CRMEB 潜水
  • 1发帖数
  • 1主题数
  • 0关注数
  • 0粉丝
开启左侧

小步伐开辟入门教程

[复制链接]
 楼主| CRMEB 发表于 2022-3-29 15:39:12 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
数据绑定

微信小步伐页面渲染时,框架会将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
猜你喜欢
在线客服QQ
2241998733

24x7小时免费咨询

Powered by 创意电子 ©2018-现在 专注资源实战分享源码下载站联盟商城繁体中文