统计数据存取

QQ小流程网页图形时，架构会将WXML文档同相关联的Page的data展开存取，在网页中他们能间接采用data的特性，其采用的句法是Mustache句法，也是采用双四元组将表达式或单纯的演算准则包覆出来，同时实现的主要就图形形式有下列三种：

单纯存取

单纯存取是采用Mustache句法（双四元组）将表达式包出来，在模板中间接做为数组输入采用，能用作文本、模块特性、掌控特性、URL等输入，当中URL输入是指将JavaScript中的URL依照其谓词输入。他们却是以以后创建的测试统计数据为例，增建两个test网页，其test.wxml文本如下表所示：

<view>{{content}}view><viewstyle="border: {{border}}">做为特性图形view><checkboxchecked="{{false}}">checkbox>复制代码

test.json文本如下表所示

Page({/**
     * 网页的初始统计数据
     */data: {content:做为文本,border:solid 1px f00,showContent:false},/**
     * 生命周期函数--监听网页加载
     */onLoad: function (options) {

    },
})
复制代码

最后的运行结果如下表所示

需要注意的是模块特性为boolean类型时，不要间接写checked=false，这样checkde的值是两个flase数组，转换成boolean类型后其代表true，这种应该采用URL输入checked={{false}}。

演算

在{{}}中不仅能间接显示统计数据，还支持一些单纯的演算如三元演算、算数演算、判断逻辑、数组演算。却是以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="{{判断条件}}"判断是否图形，如果判断条件为真则图形该代码块，反之则不图形。

<viewwx:if="{{showContent}}">{{[myValue, 2, 3, "string"]}}view>复制代码

Page({/**
     * 网页的初始统计数据
     */data: {myValue:1,showContent: false
    },/**
     * 生命周期函数--监听网页加载
     */onLoad: function (options) {

    },
})
复制代码

如上代码则不会图形，与此同时WXML也支持采用wx:elif和wx:else,如下表所示

<viewwx:if="{{showContent}}">{{1}}view><viewwx:elif="{{showContent}}">{{2}}view><viewwx:else="{{!showContent}}">{{3}}view>复制代码

block wx:if

wx:if是两个掌控特性，能加在任何模块上，但是如果想要掌控多个控件但是不想影响布局，则能采用block:if，block不是两个模块而是两个包装元素，在图形过程中不做任何图形，由特性掌控。

wx:if与hidden

wx:if是掌控是否图形，hidden是掌控是否显示，无论hidden是什么值都会调用图形线程去图形模块。hidden适用作状态频繁切换的场景，避免重复图形影响性能。

列表图形

模块的wx:for掌控特性用作遍历数组，重复图形模块，在遍历过程中当前项的下标表达式默认为index，数组当前项表达式名默认为item，如：

<viewwx: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嵌套采用时就有必要设置表达式名，避免表达式名重复，如下表所示面遍历两个二维数组。

<viewwx:for="{{myArray}}"wx:for-index="myIndex"wx:for-item="myItem"><blockwx: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