>[success] # WXML 1. 類似于`HTML`代碼：比如**可以寫成單標簽，也可以寫成雙標簽** 2. 必須有**嚴格的閉合**：沒有閉合會導致編譯錯誤 * html imge 標簽可以不閉合 ~~~ <image> ~~~ * wxml 必須閉合 ~~~ <image/> ~~~ 3. **大小寫敏感**：class和Class是不同的屬性，下面案例中渲染的是兩個不同的組件內容 ~~~html <icon class="" type="success" size="23" color=""></icon> <Icon class="" type="success" size="23" color=""></Icon> ~~~ >[info] ## 關于block 1. 某些情況下，我們需要使用 `wx:if` 或 `wx:for`時，可能需要包裹一組組件標簽 2. `<block/>` 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性 3. 使用上，將需要進行遍歷或者判斷的內容進行包裹，將遍歷和判斷的屬性放在block便簽中，不影響普通屬性的閱讀，提高代碼的可讀性 >[info] ## 使用 Mustache語法 1. 小程序和Vue一樣, 提供了插值語法: **Mustache語法(雙大括號) 這種語法** 用來渲染頁面數據 ~~~html <!-- 數據綁定Mustache語法--> <view>{{message}}</view> <view>{{ firstName + lastName }}</view> <view>{{ date }}</view> ~~~ ~~~ page({ /** * 頁面的初始數據 */ data: { message:"你好", firstName:"w", lastName:"y", date: new Date().toLocaleDateString(), }, }) ~~~ >[info] ## 小程序中的判斷 1. 邏輯判斷 `wx:if – wx:elif – wx:else` 2. 可以使用`hidden`屬性 來進行組件顯示隱藏，當`hidden`屬性為`true`時, 組件會被隱藏，當`hidden`屬性為`false`時, 組件會顯示出來 3. 二者區別`hidden`控制隱藏和顯示是控制是否添加`hidden`屬性，`wx:if`是控制組件是否渲染的  ~~~html <!-- 判斷邏輯 --> <input type="number" model:value="{{score}}"/> <view wx:if="{{ score >= 90 }}">優秀</view> <view wx:elif="{{ score >=80 }}">良好</view> <view wx:elif="{{ score >=60 }}">及格</view> <view wx:else="">不及格</view> <view style="height: 50px;"></view> <!-- hidden 顯示隱藏 --> <switch checked="{{isHidden}}" bindchange="switchChange"/> <view hidden="{{ isHidden }}">hidden</view> ~~~ * index.js ~~~ Page({ /** * 頁面的初始數據 */ data: { score:90, isHidden:true, }, switchChange(e){ const isHidden = e.detail.value; this.setData({ isHidden }) } }) ~~~ >[info] ## 循環wx:for 1. 在組件上使用`wx:for`控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。 2. 默認數組的當前項的下標變量名默認為`index`，數組當前項的變量名默認為`item` 3. 使用`wx:for-item`可以指定數組當前元素的變量名 和 使用`wx:for-index`可以指定數組當前下標的變量名 4. 字符串，代表在 `for `循環的 `array `中 `item `的某個 `property`，該 `property `的值需要是列表中唯一的字符串或數字，且不能動態改變。 5. 保留關鍵字 \*this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字。 6. 循環時候也需要使用 key ，key 的作用**當某一層有很多相同的節點時，也就是列表節點時，我們希望插入、刪除一個新的節點，可以更好的復用節點；**  ~~~html <!-- 遍歷數字 --> <view style="margin-bottom: 20px;"> <view> 遍歷數字,如果是數字并且非變量時候需要使用 大胡子語法 </view> <view> 循環數字從0開始 index 也是從0 開始 </view> <block wx:for="{{ 10 }}" wx:key="index"> <text> {{index}} - {{item}}</text> </block> </view> <!-- 循環字符串 --> <view style="margin-bottom: 20px;"> <view>循環字符串 字符串 不需要用 大胡子語法包裹</view> <view>下面案例中 array 等同于使用大胡子語法定義 {{['a','r','r','a','y']}} </view> <view>下面案例中 *this 表示單個循環字符串結果</view> <block wx:for="array" wx:key="*this"> <text>{{ item }},</text> </block> </view> <!-- 循環數組對象 --> <view> <!-- 自定義key 是從 指定item 中的字段即可，book作為item 字段有id 和name --> <block wx:for="{{ books }}" wx:for-item="book" wx:for-index="i" wx:key="id"> <text>{{i}} -- {{book.id}} -- {{book.name}}</text> </block> </view> <!-- 雙層循環 --> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i" wx:key="*this"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j" wx:key="*this"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view> ~~~ * index.js ~~~ js Page({ /** * 頁面的初始數據 */ data: { books:[{"name":"w",id:1},{"name":"ww",id:2},{"name":"www",id:3},{"name":"wwww",id:4}] }, }) ~~~ >[danger] ##### 注意點 **注意：** 花括號和引號之間如果有空格，將最終被解析成為字符串 ~~~ <view wx:for="{{[1,2,3]}} "> {{item}} </view> ~~~ 等同于 ~~~ <view wx:for="{{[1,2,3] + ' '}}" > {{item}} </view> ~~~