小程序模板语法

小程序有一套专门的模板语法来实现数据的渲染。

1.1双向绑定

小程序支持数据双向绑定，语法如下所示：

pages/index/index.wxml

<view>{
  { msg }}</view>
<input name="number" model:value="{
  { msg }}" />

pages/index/index.js

Page({
  data: {
    msg: 'hello mp'
  }
})

pages/index/index.wxss

input {
  height: 40px;
  padding: 0 10px;
  margin: 10rpx 0;
}

注意双向绑定仍然采用插值语法

微信小程序中 input、textarea、checkbox 等表单组件都支持双向绑定语法。

1.2 列表渲染

如果 data 中有一个数组类型的列表数据，我们要如何渲染出来呢？ 小程序提供了一个指令 wx:for 类似于 Vue 中的 v-for，通过一个小例子来学习：

pages/index/index.js

// 调用 Page 函数
Page({
  data: {
    students: [
      { id: 1, name: '小明', age: 18, gender: '男' },
      { id: 2, name: '小红', age: 17, gender: '女' },
      { id: 3, name: '小刚', age: 19, gender: '男' },
      { id: 4, name: '小丽', age: 18, gender: '女' },
      { id: 5, name: '小米', age: 19, gender: '女' }
    ]
  }
})

基本的语法格式

wx:for 的语法格式为 wx:for="{ { 数据名称 }}" ，并且内置默认通过 index 获取数组的索引值，item 访问数组的单元值，如下代码所示：

pages/index/index.wxml

<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
  </view>
  <view class="item" wx:for="{
  {students}}">
    <text>{
  {index + 1}}</text>
    <text>{
  {item.name}}</text>
    <text>{
  {item.age}}</text>
    <text>{
  {item.gender}}</text>
  </view>
</view>

样式美化：

pages/index/index.wxss

.students {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-right: none;
  border-bottom: none;
}

.students .item {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  line-height: 30px;
}

.students .item:first-child {
  background-color: #eee;
}

.students text {
  flex: 1;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

wx:key

在使用 wx:for 时会收到一个警告

是由于在使用 wx:for 时没有指定 wx:key 属性，这个 wx:key 属性的作用于 Vue 中一样的，但是语法稍有不同，大家一定要注意，如下所示：

pages/index/index.wxml

<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
  </view>
  <view class="item" wx:for="{
  {students}}" wx:key="id">
    <text>{
  {index + 1}}</text>
    <text>{
  {item.name}}</text>
    <text>{
  {item.age}}</text>
    <text>{
  {item.gender}}</text>
  </view>
</view>

[{id: xx, name},{}]

*this：

上述代码中 wx:key 属性的值要求必须具有唯一性，使用时分成两种情形：

pages/index/index.js

Page({
  data: {
    names: ['小明', '小红', '小刚', '小丽', '小米']
  }
})

pages/index/index.wxml

<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
  </view>
  <view class="item" wx:for="{
  {names}}" wx:key="*this">
    <text>{
  {index + 1}}</text>
    <text>{
  {item}}</text>
  </view>
</view>

自定义单元值和索引值的名字

开发中 wx:for 的嵌套是比较常见的，外层 wx:for 和内层的 wx:for 都使用 index 和 item 来访问数组的索引和单元，会使得代码的易读性比较差，这种情况下通过 wx:for-index 和 wx:for-item 来分别指定如何访问数组的索引值和单元值，如下代码所示：

pages/index/index.wxml

<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
  </view>
  <view class="item" wx:for="{
  {students}}" wx:key="id" wx:for-index="key" wx:for-item="student">
    <text>{
  {key + 1}}</text>
    <text>{
  {student.name}}</text>
    <text>{
  {student.age}}</text>
    <text>{
  {student.gender}}</text>
  </view>
</view>

1.3 条件渲染

wx:if

通过条件渲染控制元素或组件的显示与隐藏

pages/index/index.js

// 调用 Page 函数
Page({
  data: {
    show: true
  },
  toggle() {
    // 切换 show 的值
    this.setData({
      show: !this.data.show
    })
  }
})

pages/index/index.wxml

<!-- 条件数据渲染 -->
<button type="primary" bind:tap="toggle">显示/隐藏</button>
<view wx:if="{
  {show}}">{
  {msg}}</view>