6. 微信模板语法

WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。

6.1 数据绑定

6.1.1 普通写法

<!--pages/img/img.wxml-->
<text>pages/img/img.wxml</text>
<text>pages/img/img.wxml</text>
<view>{{message}}</view>
<view>{{number}}</view>
<view>{{isSelect}}</view>
<view>{{isNotSelect}}</view>
<view>{{person.id}}</view>
<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view data-design="{{person.name}}">自定义属性attr</view>
<checkbox checked="{{isSelect}}"></checkbox> 
<checkbox checked="{{isNotSelect}}"></checkbox> 

Page({
    data: {
        message: 'Hello MINA!'
    }
})

 上面代码一些变量没有定义完整。

 提示：

1. text 标签相当于 HTML中的 span 标签，行内元素，不会换行；
2. view 标签相当于HTML中的 div 标签，默认为块级元素，会换行；
3. checkbox 标签就是 HTML 中的复选框

注意：字符串和花括号之间一定不要存在空格，否则会导致数据识别失败。

6.1.2 组件属性

<view id="item-{{id}}"></view>
<view data-design="{{person.name}}">自定义属性attr</view>

6.2 运算

<view>{{1+1}}</view>
<view>{{'1'+'2'}}</view>
<view>{{1+1==3? "是" : "否"}}</view>

1. 可以在花括号中加入表达式 不可以加入 语句
2. 表达式
   1. 指的是一些简单运算：数字运算、字符串拼接、逻辑运算等……
      1. 数字的加减
      2. 字符串拼接
      3. 三元表达式
3. 语句
   1. 复杂的代码段
      1. if else
      2. switch
      3. do while
      4. for

6.3 列表渲染

6.3.1 wx:for单层循环数组

项的变量名默认为 item， wx:for-item可以指定数组当前元素的变量名

下标变量名默认为 index，wx:for-index 可以指定数组当前下标的变量名

wx:key 用来提高数组渲染的性能

wx:key 绑定的值有如下选择:

• 1. string类型，表示循环项中的唯一属性，如：

list: [
    {
        id: 1,
        name: '张三',
    }, {
        id: 2,
        name: '李四'
    }
]
wx:key = "id"

• 2. 保留字 *this ，它的意思是 item 本身，*this 代表的必须是唯一的字符串和数组。

list: [1, 2, 3, 4, 5];
wx:key = "*this"

代码：

<view 
    wx:for="{{userList}}" 
    wx:for-item="item" 
    wx:for-index="index"
    wx:key="id">{{index}} -- {{item.id}} -- {{item.name}}</view>
 
<view 
    wx:for="{{userList}}" 
    wx:key="id">{{index}} -- {{item.id}} -- {{item.name}}</view> 
<view 
 
Page({
    data: {
        userList: [
          {
              id: 1,
              name: '张三',
          }, {
              id: 2,
              name: '李四'
          }
       ]
    }
})

 

6.3.2 wx:for单层循环对象

wx:for = "{{对象}}" wx:for-item = "对象的值" wx:for-index = "对象的属性"

循环对象的时候最好把item和index的名称都修改一下：

wx:for-item = "value" wx:for-index = "key"

person:  {
  id: 1,
  name: '張三',
  height: 155,
  weight: 120,
  age: 10
}
    
 <view 
    wx:for="{{person}}"
    wx:for-item = "value" 
    wx:for-index = "key" 
    wx:key="id">
    {{key}} -- {{value}}
  </view>

6.3.3 wx:for嵌套循环数组

当出现数组的嵌套循环的时候，尤其要注意，以下绑定的名称不要重名

默认情况下，我们不写

wx:for-item = "item" wx:for-index="index" 小程序也会把循环项的默认名称item和索引名称 index

只有一层循环的话（wx:for-item="item"  wx:for-index="index"）可以省略

 

userList2: [
      {
        id: 1,
        name: '張三',
        height: 155,
        weight: 120,
        age: 10,
        children: [
          {
            id: 11,
            name: '張三1',
            height: 155,
            weight: 120,
            age: 10
          },
          {
            id: 12,
            name: '張三2',
            height: 155,
            weight: 120,
            age: 10
          },
        ]
      },
      {
        id: 2,
        name: '李四',
        height: 155,
        weight: 120,
        age: 10,
        children: [
          {
            id: 21,
            name: '李四1',
            height: 155,
            weight: 120,
            age: 10,
          },
          {
            id: 22,
            name: '李四2',
            height: 155,
            weight: 120,
            age: 10,
          }
        ]
      },
    ]
    
<view
  wx:for="{{userList2}}"
  wx:for-item="parent"
  wx:key="id">
     {{parent.id}}--{{parent.name}}
    <view
      wx:for="{{parent.children}}"
      wx:for-item="son"
      wx:key="id">
      {{son.id}}--{{son.name}}
     </view>
</view>

6.3.4 block

渲染有一个包含多个结点的结构块 block 最终不会变成真正的dom元素

1. 占位符的标签
2. 写代码的时候，可以看到这个标签的存在
3. 页面渲染的时候，小程序会把它移除掉

 

<block  wx:for="{{[1,2,3]}}" wx:key="*this">
   <view>{{index}}:</view>
   <view>{{item}}</view>
</block>	

 

<view>
    <block wx:for="{{userList}}"
        wx:for-item="item"
        wx:for-index="index"
        wx:key="id" class="user_list">
        {{index}} -·- {{item.id}} -·- {{item.name}}
    </block>
</view>

6.4 条件渲染

6.4.1 wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view>
    <view>条件渲染</view>
    <view>
        <view wx:if="{{false}}">1</view>
        <view wx:elif="{{true}}">2</view>
        <view wx:else>3</view>
    </view>
</view>

6.4.2 hidden

在标签上直接加入属性hidden

<view>--------------</view>
<view hidden> hidden1</view>
<view hidden="{{true}}"> hidden2</view>
<view hidden="{{false}}"> hidden3</view>
<view hidden style="display: flex"> hidden4</view>
<view>===========</view>

6.4.3 wx：if 和 hidden的使用场景

1. 当标签不是频繁的切换显示时，优先使用wx：if，直接把标签从页面结构中给移除掉
2. 当标签频繁的切换显示的时候，优先使用hidden，通过添加样式的方式来切换显示

<view hidden style="display: flex"> hidden4</view>

这里在标签上设置了样式，会覆盖掉hidden的样式，所以这个标签会显示出来