数据绑定
微信小程序页面渲染时，框架会将 WXML 文件同对应的 Page 的 data 进行绑定，在页面中我们可以直接使用 data 的属性，其使用的语法是 Mustache 语法，也就是使用双大括号将变量或简单的运算规则包裹起来，实现的主要渲染方式有以下几种：
简单绑定
简单绑定就是使用 Mustache 语法（双大括号）将变量包起来，在模版中直接作为字符串输出使用，可以用于内容、组件属性、控制属性、关键字等输出，其中关键字输出是指将 JavaScript 中的关键字按照其真值输出。我们还是以之前建立的测试项目为例，新建一个 test 页面，其 test.wxml 内容如下：
<!--pages/test/test.wxml-->
<!-- 作为内容直接输出 --><view>{{content}}</view><!-- 作为属性输出 --><view style="border: {{border}}">作为属性渲染</view><!-- 关键字 --><checkbox checked="{{false}}"></checkbox>复制代码
复制代码
test.json 内容如下
Page({
/** * 页面的初始数据 */ data: { content: '作为内容', border: 'solid 1px #f00', showContent: 'false' },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
},})复制代码
复制代码
最后的运行结果如下
需要注意的是组件属性为 boolean 类型时，不要直接写 checked=“false”，这样 checkde 的值是一个“flase”字符串，转换成 boolean 类型后其代表 true，这种应该使用关键字输出 checked=“{{false}}”。
运算
在{{}}中不仅可以直接显示数据，还支持一些简单的运算如三元运算、算数运算、判断逻辑、字符串运算。还是以 test 页面为例，其 test.wxml 如下
<!--pages/test/test.wxml-->
<!-- 三元表达式 --><view>{{showContent ? '显示文本' : '不显示文本'}}</view><!-- 算数运算符 --><view>{{num1 + num2}} + 1 + {{num3}} = ?</view><!--字符串运算 --><view>{{"name : " + name}}</view><!-- 逻辑判断 --><view>{{num3 > 3}}</view><!-- 数据路径运算 --><view>{{student.age}}{{myArray[0]}}</view>复制代码
复制代码
test.js 如下
Page({
/** * 页面的初始数据 */ data: { showContent:false, num1 : 1, num2 : 2, num3 : 3, name : 'QStack', student : { age : 12 }, myArray : ['arr1', 'arr2'] },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
},})复制代码
复制代码
最终结果如下
组合
data 中数据可以在模版再次组合成新的数据结构，这种组合常常在数组或对象中使用，数组的组合比较简单，对于对象的组合常用于模版中，我们下一篇文章再仔细介绍，数组的组合就是直接将值放置到数组的某个下标下：
<!-- 数组组合--><view>{{[myValue, 2, 3, "string"]}}</view>复制代码
复制代码
Page({
/** * 页面的初始数据 */ data: { myValue : 1, },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
},})复制代码
复制代码
其最后的结果为
条件渲染
wx:if
除了简单的数据绑定，常常还会使用逻辑分支，通过逻辑分支控制是否渲染该部分，使用 wx:if="{{判断条件}}"判断是否渲染，如果判断条件为真则渲染该代码块，反之则不渲染。
<view wx:if="{{showContent}}" >{{[myValue, 2, 3, "string"]}}</view>复制代码
复制代码
Page({
/** * 页面的初始数据 */ data: { myValue : 1, showContent : false },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
},})复制代码
复制代码
如上代码则不会渲染，与此同时 WXML 也支持使用 wx:elif 和 wx:else,如下
<view wx:if="{{showContent}}" >{{1}}</view><view wx:elif="{{showContent}}" >{{2}}</view><view wx:else="{{!showContent}}" >{{3}}</view>复制代码
复制代码
block wx:if
wx:if 是一个控制属性，可以加在任何组件上，但是如果想要控制多个控件但是不想影响布局，则可以使用 block:if，block 不是一个组件而是一个包装元素，在渲染过程中不做任何渲染，由属性控制。
wx:if 与 hidden
wx:if 是控制是否渲染，hidden 是控制是否显示，无论 hidden 是什么值都会调用渲染线程去渲染组件。hidden 适用于状态频繁切换的场景，避免重复渲染影响性能。
列表渲染
组件的 wx:for 控制属性用于遍历数组，重复渲染组件，在遍历过程中当前项的下标变量默认为 index，数组当前项变量名默认为 item，如：
<view wx:for="{{myArray}}">{{index}} : {{item}}</view>复制代码
复制代码
// pages/test/test.jsPage({
/** * 页面的初始数据 */ data: { myArray : [0, 1, 2], },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
},})复制代码
复制代码
index、item 变量名可以通过 wx:for-index、wx:for-item 属性修改，在普通遍历中没有必要修改 index 和 item，当 wx:for 嵌套使用时就有必要设置变量名，避免变量名重复，如下面遍历一个二维数组。
<view wx:for="{{myArray}}" wx:for-index="myIndex" wx:for-item="myItem"> <block wx:for="{{myItem}}" wx:for-index="subIndex" wx:for-item="subItem"> {{subItem}} </block></view>复制代码
复制代码
// pages/test/test.jsPage({
/** * 页面的初始数据 */ data: { myArray : [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
},})
复制代码
最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163 相互学习，我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点 star:http://github.crmeb.net/u/defu不胜感激 ！
完整源码下载地址：https://market.cloud.tencent.com/products/33276
PHP 学习手册：https://doc.crmeb.com
技术交流论坛：https://q.crmeb.com
评论