小程序开发入门教程（五）

背景

上一篇文章我们已经介绍了微信小程序运行的宿主环境、启动过程以及页面的渲染过程，还介绍了生命周期函数，通过behaviors 可以用来让多个页面有相同的数据字段和方法，通过Component可以构建更加复杂的页面。之前的几篇文章我们已经对微信小程序有了一个感性的认识，接下来我们将会详细介绍微信小程序各个部分的开发细节，这篇文章我们将会介绍WXML的能力。WXML是框架设计的一套标记语言，正如之前所提到的利用WXML编写的.wxml将会定义页面的结构，WXML具有数据绑定、列表渲染、条件渲染、模版和事件等能力。

数据绑定

微信小程序页面渲染时，框架会将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) {

    },
})

其最后的结果为

1, 2, 3, string

条件渲染

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.js
Page({

    /**
     * 页面的初始数据
     */
    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.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        myArray : [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9]
        ]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },
})

最后

有兴趣可以关注公众号QStack，会定期分享一些文章和免费的学习资源。