小程序之数据绑定

前言

上一篇稍微了解了一下MINA框架的组成，这一回继续了解MINA框架的视图层[view]。

视图层

MINA框架的视图层由WXML（WeiXin Markup language）和WXSS（WeiXin Style Sheet）编写，将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

1 组件

组件是视图层的基本组成单元，以下是比较常用的组件：

• 视图容器组件：view、scroll-view、swiiper、movable-view、cover-view
• 基础内容组件：icon、text、rich-text、progress
• 表单组件：button、checkbox、form、input、radio等
• 媒体组件：audio、image、video、camera
• 导航：navigator

2 数据绑定

WXML中的动态数据均来自对应Page的data。
数据绑定使用"Mustache"语法（双大括号）将变量包起来。
PS：

• 相同变量名，后面覆盖前面
• 花括号和引号之间如果有空格，将最终被解析成为字符串

3 组件渲染

3.1 列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名，wx:for 也可以嵌套。
PS:

• 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用 wx:key
  来指定列表中项目的唯一的标识符。
• 当 wx:for 的值为字符串时，会将字符串解析成字符串数组

3.2 条件渲染

在框架中，用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个else块。
PS:

• 如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好

4 数据绑定实例

下面用一个简单的实例，来展示小程序的数据绑定。
1）打开app.json，在pages中最上面添加一行pages/demo/demo，保存后将自动生成页面 demo.
PS: 程序默认pages的第一行作为首页
2）打开demo.js，在data中添加一个变量, color:’’, 并且在Page定义函数 changeColor

  data: {
	//多个变量之间要用逗号隔开
    color:''
  },
  //中间是生命周期函数，不去动它

  //多个函数之间要用逗号隔开
  changeColor: function (e) {
    this.setData({
      //多个变量之间要用逗号隔开
      color: e.currentTarget.dataset.colorname
    });
  }

3）打开demo.wxss，添加两个样式

//颜色可以用英文、rbg、编码表示
.text-red{
  color:red;
}

.text-blue{
  color: blue;
}

4）打开demo.wxml，添加两个button，用bindtap绑定事件changeColor，传递参数colorName，text的样式设置为text-{{color}}

<text class="text-{{color}}">pages/demo/demo.wxml</text>

<button bindtap="changeColor" data-colorname="red">变成红色</button>

<button bindtap="changeColor" data-colorname="blue">变成蓝色</button>

效果如下，点击对应按钮变色

PS: bindtap和catchtap都能绑定事件，前者是冒泡的，后者是非冒泡的，这里不详述。

5 条件渲染实例

直接使用上面的demo
1）打开demo.js，在data中增加一个变量，showStat:true，并且在Page定义函数showOrHide

data: {
    //多个变量之间要用逗号隔开
    color:'',
    showStat:true
  },
  //....
  showOrHide() {
    var state = !this.data.showStat;
    this.setData({
      showStat: state
    });
  }

2）打开demo.wxml，新增一个button，绑定事件showOrHide，text使用条件渲染 wx:if="{{showStat}}"

<text class="text-{{color}}" wx:if="{{showStat}}">pages/demo/demo.wxml</text>

<button bindtap="showOrHide">显示/隐藏</button>

效果如下，点击后切换text的显示/隐藏状态。

6 列表渲染实例

依旧是用这个demo
1）打开demo.js，在data中定义textList

data: {
    //多个变量之间要用逗号隔开
    color:'',
    showStat:true,
    textList: {
      text1: {
        content: "这是第一行",
        color: "red"
      },
      text2: {
        content: "这是第二行",
        color: "blue"
      },
      text3: {
        content: "这是第三行",
        color: "green"
      },
      text4: {
        content: "这是第四行",
        color: "yellow"
      },
      text5: {
        content: "这是第五行",
        color: "purple"
      }
    }
  },

2）打开demo.wxss，定义其他颜色的样式
3）打开demo.wxml，新增view

<view wx:for="{{textList}}">
  <text class="text-{{item.color}}">{{item.content}}</text>
</view>

效果如下：

7 总结

• 数据绑定使用双括号 {{param}}
• bindtap绑定事件，data-*传递参数
• wx:for绑定一个数组，当前元素默认为item