乐趣区

关于小程序:小程序开发入门教程

jiezi

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

最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163 互相学习，咱们会有业余的技术答疑解惑

如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点 star:http://github.crmeb.net/u/defu 不胜感激！

残缺源码下载地址：https://market.cloud.tencent….

PHP 学习手册：https://doc.crmeb.com
技术交换论坛：https://q.crmeb.com

退出移动版