>[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> ~~~