小程序开发流程详细(小程序开发入门教程)

数据绑定

vx小程序页面渲染时,框架会将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

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。商机网仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 tenspace2022@163.com 举报,一经查实,本站将立刻删除。 本文链接:https://www.315965.com/n/18014.html 聚才发 母婴好物

(0)
上一篇 2023年7月31日 上午2:52
下一篇 2023年7月31日 上午3:01

相关推荐

  • 国际象棋教程推荐(国际象棋教程入门教学)

    国际象棋可以说是最棒的棋盘游戏之一,它是战略战术和纯技术的完美融合。几个世纪以来,国际象棋一直是学者和智者们博弈的工具,其中的乐趣也非一言两语能道明。当然,下棋需要一定的天赋,但它的输赢却不受年龄的限制。现在就开始学习这门古老又迷人的艺术吧。 方法1:初步了解国际象棋 1. 学习棋子代表的意义和走子规则。 每种棋子的着法都不一样。下面就介绍一下各种棋子以及其…

    2023年7月30日
    250
  • 剪纸教程图解步骤(剪纸教程图解步骤简单)

    今天给大家带来的是——简单枫叶剪纸教程。有多简单呢?只需要一张纸,一把剪刀,而且只需要剪一下就可以了。有没有一丝心动,感兴趣的话就快来试试吧!这个枫叶剪纸作为装饰非常不错哦! 枫叶剪纸教程图解 先上图 我们需要准备的材料有:一张正方形的纸,我用的是10厘米正方形纸,供大家参考。除此之外还有剪刀。 取出正方形纸,沿着中间对折。 然后按如图所示,再次向中间折叠。…

    2023年7月30日
    341
  • windows7系统安装教程详解(windows7安装步骤图解教程)

    电脑怎么安装windows7系统,第一种最简单的这个方法啊如果笔记本能开机就是能进系统都用这种方法啊 来看一下首先插上u盘,打开电脑,然后打开我们的这个u盘 找到我们需要的系统镜像进入以后啊最下面有一个这样的安装工具双击打开 左下角这个我希望什么什么这个不要点啊记住不要点然后我们直接来到下一步到这个画面耐心等待 一直等到这个画面出现以后点击安装那么如果笔记本…

    2023年8月1日
    400
  • 织围巾教程简单易学(织围巾教程简单易学图解)

    这是骗你生女儿的贴~粉嫩嫩的颜色太好看了~ 这款围巾成品快,适合新手 用线:雪妃尔五股 用量:主色一团有剩余 作品秀: 喜欢的小伙伴一起钩起来吧 成品图↓ 这是我儿子的同学,好可爱的小女生,帮忙试戴了一下 我自己戴貌似也可以~ 有点装可爱了~ 前几天兰州群聚会,带去晒了晒 过程图: 脚脖和脚掌分别钩好两个,缝合即可 主题两头白色,中间可以换其他颜色,长短加减…

    2023年7月30日
    260
  • oracle11g安装教程完整版(oracle11g客户端安装与配置)

    在本教程中,我们将逐步介绍如何下载Oracle 11g数据库并演示如何安装在Windows 10 64位机器上,以便在系统中学习和实践PL/SQL编程。 下载并安装Oracle数据库 首先,需要到Oracle官方网站下载Oracle数据库,在这里我们将下载Oracle 11g第2版的Microsoft Windows(x64)版本。由于安装文件过大,可以分两…

    2023年7月30日
    217
  • PGO 是啥,咋就让 Go 更快更猛了?

    PGO 是什么 Profile-guided optimization (PGO),翻译过来是使用配置文件引导的优化。也被称为: profile-directed feedback(PDF) feedback-directed optimization(FDO) PGO 是计算机编程中的一种编译器优化技术,使用分析来提高程序运行时性能。也就是可以提高 Go …

    2023年12月16日
    165
  • photoshop去水印教程图解(ps如何去水印视频教程)

    ps怎么去水印无痕迹背景不变?小编带来了详细步骤图解。 by the way,如果你觉得PS太复杂,也可以使用水印云去水印软件,效果不输PS,操作更简单,手📱机电脑通用,只需涂抹一下,水印就消失了! 方法一: 1、用工具栏中的选框工具进行选区。 2、点击选择中的色彩范围。 3、点击选择中的修改子选项扩展。 4、按CTRL+F5进行内容识别填充。 5、根据以上…

    2023年8月1日
    360
  • 插花教程图解 初学者(简单易学的插花教程图解)

    居家插花零基础不用担心,高手的秘诀是画几条线,你肯定会 2020-03-27 17:13·花艺师Olivia 居家零基础插花,不要怕,来,跟着我画几条线,轻松学插花。 一、醒花 ​醒花,就是让花先吸饱水,恢复到鲜艳饱满的抬头状态。 拆开包装后,花的叶子先保留,可以帮助吸水。花枝用剪刀45度斜剪(3-5cm),放到桶里,用水浸泡到只露出花头,泡4个小时。 醒了…

    2023年7月31日
    266
  • 毛衣编织教程完整版(毛衣编织教程完整版图解)

    秋 露 』 用线:羊毛兔毛混纺2股 用量:270 克 用针:3.25mm、3.5mm、4mm 尺寸:胸围110cm,衣长57cm,领口到袖口60cm,腋下袖长32cm 作品秀: 毛线具体多少支,记不得了,是囤了10年以上的线,当时买了这个浅桃红,还买了白色和天蓝色,去年用白色3股织了《紫芊》,用量也是很省。还是比较柔软的,虽然含了兔毛,但是也不掉毛,可能还是…

    2023年8月1日
    364
  • 千牛淘宝店铺装修教程(淘宝店铺怎样装修)

    淘宝运营,小白也能学会的保姆级店铺装修攻略 如果想把店铺做起来,首先店铺装修就不能随便应付了事。 新手风风火火开店,对于店铺定位不明确,那店铺装修就是个好机会。 从店铺装修到宝贝分类,从促销区到描述模板都需要风格统一。店铺装修要和自己产品的风格一致,这样才能最大程度留住客户。 和宝贝的主图和详情页相似,店铺装修不能完全按照自己的审美。首先要明确店铺装修的目的…

    2023年8月1日
    392

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注