一、聲明和綁定數據

小程序頁面中使用的數據均需要在 Page() 方法的 data 對象中進行聲明定義

在將數據聲明好以后，需要在 WXML 中綁定數據，數據綁定最簡單的方式是使用 Mustache 語法（雙大括號）將變量包起來。

在 {{ }} 內部可以做一些簡單的運算，支持如下幾種方式：

1. 算數運算

2. 三元運算

3. 邏輯判斷

4. 其他…

📌?注意事項：

? 在 {{ }} 語法中，只能寫表達式，不能寫語句，也不能調用 js 相關的方法

定義數據：

Page({// 頁面的初始數據data: {num: 1}// coding...
}

使用數據：

pages/index/index.wxml

<!-- 如果需要展示數據，在 wxml 中需要使用雙大括號寫法將變量進行包裹 --><!-- 展示內容 -->
<view>{{ school }}</view>
<view>{{ obj.name }}</view><!-- 綁定屬性值，如果需要動態綁定一個變量，屬性值也需要使用雙大括號進行包裹 -->
<view id="{{ id }}">綁定屬性值</view><!-- 如果屬性值是布爾值，也需要使用雙大括號進行包裹 -->
<checkbox checked="{{ isChecked }}" /><!-- 算術運算 -->
<view>{{ id + 1 }}</view>
<view>{{ id - 1 }}</view><!-- 三元運算 -->
<view>{{ id === 1 ? '等于' : '不等于' }}</view><!-- 邏輯判斷 -->
<view>{{ id === 1 }}</view><!-- 在雙大括號寫法內部，只能寫表達式，不能寫語句，也不能調用 js 的方法 -->
<!-- <view>{{ if (id === 1) {} }}</view> -->
<!-- <view>{{ for (const i = 0; i <= 10; i++) {} }}</view> -->
<view>{{ obj.name.toUpperCase() }}</view>

pages/index/index.js

// index.js
Page({// 在小程序頁面中所需要使用的數據均來自于 data 對象data: {id: 1,isChecked: false,school: '尚硅谷',obj: {name: 'tom'}}})

?

二、?聲明和修改數據

小程序中修改數據并不能直接進行賦值，而是要通過調用?this.setData?方法才能實現

將需要修改的數據以?key:value?的形式傳給?this.setData?方法。

this.setData?方法有兩個作用：

1. 更新數據
2. 驅動視圖更新

?
Page({// 頁面的初始數據data: {num: 1},updateNum() {this.setData({// key 是需要修改的數據// value 是最新值num: this.data.num + 1})}// coding...
}?

三、setData-修改對象類型數據

在實際開發中，我們經常會在?data?中聲明對象類型的數據，小程序中通過調用 setData 方法可以修改頁面的數據，包括對象類型的數據。下面是修改對象類型數據的方法：

1、定義一個對象

Page({// 定義頁面中使用的數據data: {userInfo: {name: 'Tom',age: 10,gender: '男'}}
}

2、修改對象中的單個屬性：

this.setData({'userInfo.name': 'Jerry'
})

3、修改對象中的多個屬性

// 修改對象中的多個屬性
this.setData({'userInfo.name': 'Jerry','userInfo.age': 100
})

4、使用 ES6 的展開運算符

在修改對象類型的數據時，可以使用 ES6 的展開運算符先復制對象，然后利用新值對舊值覆蓋的方式修改

const userInfo = {...this.data.userInfo,name: 'Jerry',age: 100
}// 修改對象中的多個屬性
this.setData({userInfo
})

5、使用解構賦值修改對象屬性

在修改對象類型的數據時，可以使用解構賦值來修改對象屬性

// 將 userInfo 從 data 中進行解構
const { userInfo } = this.data
// 產生一份新數據
const newUserInfo = {...userInfo,name: 'Jerry',age: 100
}
// 修改對象中的多個屬性
this.setData({userInfo: newUserInfo
})

6、使用 Object.assign 方法合并對象

在修改對象類型的數據時，可以使用 Object.assign 方法將多個對象合并為一個對象

// 使用 Object.assign 方法將多個對象合并為一個對象
const userInfo = Object.assign(this.data.userInfo, { name: 'Jerry' },{ age: 100 }
)// 修改對象中的多個屬性
this.setData({userInfo
})

Object.assign詳解_object assign-CSDN博客?

7、刪除對象中的屬性

在刪除對象中的屬性時，不能使用?delete?操作符，因為小程序的數據綁定機制不支持監聽 delete 操作

// 使用展開運算符拷貝一份數據，產生一個新對象
const newUser = { ...this.data.userInfo }
// 使用 delete 刪除新對象中的屬性
delete newUser.age //不支持使用this.setData({// 將新的對象進行賦值userInfo: newUser
})

📌?注意事項：

小程序的數據綁定機制只能監聽到 setData 方法中修改的數據，無法監聽到直接刪除屬性的操作，所以在刪除對象屬性時，需要先將對象復制一份再進行操作，然后再調用 setData 方法更新數據。

四、setData-修改數組類型數據

數組類型數據也是經常會使用的數據格式之一，下面是修改數組類型數據的方法：

1、定義一個數組

Page({// 定義頁面中使用的數據data: {animalList: ['Tom', 'Jerry', 'Spyke']}// coding...
}

2、使用數組的 concat 方法合并數組

在修改數組類型的數據時，可以使用數組的 concat 方法來合并數組

// 使用 concat 方法來合并數組
const newList = this.data.animalList.concat('Tyke')// 使用 setData 進行賦值
this.setData({animalList: newList
})

3、使用數組的 push 方法新增屬性

在修改數組類型的數據時，可以使用數組的 push 方法來添加元素

// 使用數組的 push 方法來添加元素
this.data.animalList.push('Tyke')// 使用 setData 進行賦值
this.setData({animalList: this.data.animalList
})

4、使用 ES6 的展開運算符

在數組類型的數據時，可以使用 ES6 的展開運算符先復制數組，然后進行合并。

// 使用 ES6 的展開運算符先復制數組，然后進行合并
const newList = [...this.data.animalList, 'Tyke']// 使用 setData 進行賦值
this.setData({animalList: newList
})

5、修改數組中某個元素的值：

利用索引的方式進行修改，但必須使用 wx:for 來進行渲染數組，否則會出現錯誤

this.setData({'animalList[2]': 'Tyke' 
})

6、使用數組的 filter 方法刪除元素

在修改數組類型的數據時，可以使用數組的 filter 方法來刪除元素

// 使用數組的 filter 方法來刪除元素
const newList = this.data.animalList.filter(item => item !== 'Tom')// 使用 setData 進行賦值
this.setData({animalList: newList
})

五、數據綁定-簡易雙向綁定

在 WXML 中，普通屬性的綁定是單向的，例如：

<input value="{{ num }}" />

如果使用?this.setData?來更新?num?，num?和輸入框的中顯示的值都會被更新為值。但如果用戶修改了輸入框里的值，卻不會同時改變?data?中的?num?。

如果需要在用戶輸入的同時也將?data?中的數據修改 ，需要借助簡易雙向綁定機制。此時可以在對應項目之前加入?model:?前綴即可，例如：

<input model:value="{{ value }}" />

如果使用?this.setData?來更新?num?，num?和輸入框的中顯示的值都會被更新為值。

如果輸入框的值被改變了，?data?的數據也會隨著改變。

同時， WXML 中所有綁定了數據的位置也會被一同更新。

📌?注意事項：

簡易雙向綁定的屬性值如下限制：

1. 只能是一個單一字段的綁定，例如：錯誤用法：

2. 尚不能寫 data 路徑，也就是不支持數組和對象，例如：錯誤用法：

<!-- 單向綁定：數據能夠影響頁面，但是頁面更新不會影響到數據 -->
<!-- <input type="text" value="{{ value }}" /> --><!-- 雙向綁定：數據能夠影響頁面，頁面更新也能夠影響數據 -->
<!-- 如果想實現簡易雙向綁定，需要再對應的屬性之前添加 model: -->
<!-- <input type="text" model:value="{{ value }}" /> --><!-- 如果需要獲取復選框的選中效果，需要給 checked 添加 model: -->
<checkbox model:checked="{{ isChecked }}" /> 是否同意該協議<!-- 注意事項1：屬性值只能是一個單一字段的綁定 -->
<input type="text" model:value="值為 {{ value }}" /><!-- 注意事項2：屬性值不能寫數據路徑，也就是不支持對象和數組 -->
<input type="text" model:value="{{ obj.value }}" >

六、列表渲染-基本使用

1、基本使用

列表渲染：就是指通過循環遍歷一個數組或對象，將其中的每個元素渲染到頁面上

只需要在組件上使用?wx:for?屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件

默認數組當前項的變量名默認為?item

默認數組的當前項的下標變量名默認為?index

在使用?wx:for?對數組進行遍歷的時候，建議加上?wx:key?屬性，如不提供?wx:key，會報一個?warning， 如果明確知道該列表是靜態，即以后數據不會改變，或者不必關注其順序，可以選擇忽略。

wx:key?的值以兩種形式提供：

1. 字符串：代表需要遍歷的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變
2. 保留關鍵字?*this?代表在 for 循環中的 item 本身，當 item 本身是一個唯一的字符串或者數字時可以使用

當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，并且?提高列表渲染時的效率?。

📌?注意事項：

? 在使用?wx:for?對數組進行遍歷的時候，建議加上?wx:key?屬性，否則控制臺會報警告

<!-- 如果需要進行列表渲染，需要使用 wx:for 屬性 -->
<!-- 屬性值需要使用雙大括號進行包裹 -->
<!-- 每一項的變量名默認是 item -->
<!-- 每一項下標（索引）的變量名默認是 index --><!-- 如果渲染的是數組，item：數組的每一項，index：下標 -->
<!-- <view wx:for="{{ numList }}">{{ item }} - {{ index }}</view> --><!-- 如果渲染的是對象，item：對象屬性的值，index：對象屬性 -->
<!-- <view wx:for="{{ obj }}">{{ item }} - {{ index }}</view> --><!-- ------------------------ 關于 Key --------------------------------- --><!-- wx:key 提升性能 -->
<!-- wx:key 的屬性值不需要使用雙大括號進行包裹，直接寫遍歷的數組 中 item 的某個屬性 --><!-- wx:key 屬性值有兩種添加形式 -->
<!-- 字符串，需要是遍歷的數組 中 item 的某個屬性，要求該屬性是列表中唯一的字符串或者數字，不能進行動態改變 -->
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }}</view><!-- 保留關鍵字 *this，*this 代表的是 item 本身，item 本身是唯一的字符串或者數字 -->
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>

// profile.js
Page({data: {numList: [1, 2, 3],fruitList: [{ id: 1, name: '蘋果', price: 66 },{ id: 2, name: '橘子', price: 77 },{ id: 3, name: '香蕉', price: 88 }],obj: {name: 'tom',age: 10}}})

七、列表渲染-使用進階

修改默認下標和變量名：

如果需要對默認的下標和變量名進行修改，可以使用?wx:for-item?和?wx:for-index

1. 使用?wx:for-item?可以指定數組當前元素的變量名

2. 使用?wx:for-index?可以指定數組當前下標的變量名

<view wx:for="{{ animal }}" wx:for-item="itemName" wx:for-index="i">{{ itemName.name }} - {{ itemName.avatar }} - {{ i }}
</view>

渲染多節點結構塊：

如果需要渲染一個包含多節點的結構塊，可以使用一個?<block/>?標簽將多個組件包裝起來

<block wx:for="{{ animal }}"><view><span>{{ item.name }}</span><span>{{ item.avatar }}</span></view>
</block>

注意：?<block/>?并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。?

八、條件渲染

知識點：

條件渲染主要用來控制頁面結構的展示和隱藏，在微信小程序中實現條件渲染有兩種方式：

1. 使用?wx:if、wx:elif、wx:else?屬性組
2. 使用?hidden?屬性

<view wx:if="{{condition}}"> True </view>

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view

<view hidden="{{condition}}"> True </view>

wx:if?和?hidden?二者的區別：

• wx:if?：當條件為?true?時將內容渲染出來，否則元素不會進行渲染，通過移除/新增節點的方式來實現
• hidden?：當條件為?true?時會將內容隱藏，否則元素會顯示內容，通過?display?樣式屬性來實現的

<!-- 使用 wx:if、wx:elif、wx:else 屬性組控制元素的隱藏和控制 -->
<view wx:if="{{ num === 1 }}">num 等于 {{ num }}</view>
<view wx:elif="{{ num === 2 }}">num 等于 {{ num }}</view>
<view wx:else>大于 2</view><view hidden="{{ num !== 1 && num !== 2 && num !== 3 && num < 3}}">{{ num < 3 ? 'num 等于' + num : '大于 2' }}
</view><button type="primary" bindtap="updateNum">修改數據</button>

Page({// 頁面的初始數據data: {num: 1},// 更新數據updateNum() {this.setData({num: this.data.num + 1})}// coding...
}

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?