创意电子

标题: 小步伐开辟入门教程 [打印本页]

作者: CRMEB 时间: 2022-3-29 15:39
标题: 小步伐开辟入门教程
数据绑定

微信小步伐页面渲染时，框架会将WXML文件同对应的Page的data举行绑定，在页面中我们可以直接使用data的属性，其使用的语法是Mustache语法，也就是使用双大括号将变量或简单的运算规则包裹起来，实现的主要渲染方式有以下几种：
简单绑定

简单绑定就是使用Mustache语法（双大括号）将变量包起来，在模版中直接作为字符串输出使用，可以用于内容、组件属性、控制属性、关键字等输出，其中关键字输出是指将JavaScript中的关键字按照其真值输出。我们还是以之前创建的测试项目为例，新建一个test页面，其test.wxml内容如下：
{{content}}作为属性渲染复制代码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如下
{{showContent ? '显示文本' : '不显示文本'}}{{num1 + num2}} + 1 + {{num3}} = ?{{"name : " + name}}{{num3 > 3}}{{student.age}}{{myArray[0]}}复制代码test.js如下
Page({ /** * 页面的初始数据 */ data: { showContent:false, num1 : 1, num2 : 2, num3 : 3, name : 'QStack', student : { age : 12 }, myArray : ['arr1', 'arr2'] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { },})复制代码最终结果如下

组合

data中数据可以在模版再次组合成新的数据结构，这种组合常常在数组或对象中使用，数组的组合比力简单，对于对象的组合常用于模版中，我们下一篇文章再细致介绍，数组的组合就是直接将值放置到数组的某个下标下：
{{[myValue, 2, 3, "string"]}}复制代码Page({ /**    * 页面的初始数据    */ data: {       myValue : 1, }, /**    * 生命周期函数--监听页面加载    */ onLoad: function (options) { },})复制代码其末了的结果为
1, 2, 3, string复制代码条件渲染

wx:if

除了简单的数据绑定，常常还会使用逻辑分支，通过逻辑分支控制是否渲染该部分，使用wx:if="{{判断条件}}"判断是否渲染，如果判断条件为真则渲染该代码块，反之则不渲染。
{{[myValue, 2, 3, "string"]}}复制代码Page({ /**    * 页面的初始数据    */ data: {       myValue : 1,       showContent : false }, /**    * 生命周期函数--监听页面加载    */ onLoad: function (options) { },})复制代码如上代码则不会渲染，与此同时WXML也支持使用wx:elif和wx:else,如下
{{1}}{{2}}{{3}}复制代码block wx:if

wx:if是一个控制属性，可以加在任何组件上，但是如果想要控制多个控件但是不想影响布局，则可以使用block:if，block不是一个组件而是一个包装元素，在渲染过程中不做任何渲染，由属性控制。
wx:if与hidden

wx:if是控制是否渲染，hidden是控制是否显示，无论hidden是什么值都会调用渲染线程去渲染组件。hidden适用于状态频繁切换的场景，克制重复渲染影响性能。
列表渲染

组件的wx:for控制属性用于遍历数组，重复渲染组件，在遍历过程中当前项的下标变量默认为index，数组当前项变量名默认为item，如：
{{index}} : {{item}}复制代码// pages/test/test.jsPage({ /**    * 页面的初始数据    */ data: {       myArray : [0, 1, 2], }, /**    * 生命周期函数--监听页面加载    */ onLoad: function (options) { },})复制代码index、item变量名可以通过wx:for-index、wx:for-item属性修改，在寻常遍历中没有须要修改index和item，当wx:for嵌套使用时就有须要设置变量名，克制变量名重复，如下面遍历一个二维数组。
         {{subItem}} 复制代码// 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

欢迎光临创意电子 (https://wxcydz.cc/)