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

数据绑定

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

相关推荐

  • 化妆教程学生淡妆(学生淡妆化妆步骤初学者)

    在很多的人的眼里,化妆就是浓妆艳抹,网上那些铺天盖地的纯欲妆、欧美妆、氛围妆…不光看着就复杂,而且出门分分钟成为围观对象! 但是,今天说的淡妆却是每个女生都值得学一学的 我们普通人的素颜皮肤大多都有暗沉发黄、眼神无光、纯色发白的问题,这不光是无精打采的问题,还会让原本六七分的颜值下降到三四分。 但是一个简单的淡妆,花不了30分钟,却可以让泥看起来…

    2023年7月30日
    248
  • 电脑办公软件基础知识教程(零基础学电脑办公软件)

    在信息化快速发展的今天,电脑已普及到千家万户,用电脑上网和用来娱乐已经成为人们平时的一种生活习惯。 为了进一步充实我们的生活,仅仅学会上网,已经不能满足我们对电脑使用的需求,学习一些常用的办公软件,也是很有必要的。 那么作为电脑小白应该学习哪些常用软件呢?在网络普及以前,人们普遍运用书写方式来记载东西。在网络飞速发展的今天,大部分人的生活习惯已有了截然不同的…

    2023年7月31日
    300
  • 官方原版win10安装教程(原版系统安装详细步骤)

    众所周知,当电脑出现问题,重启能解决50%,重装系统能解决90%,买台新的能解决100%。而重启电脑和再买一台新的电脑相比,无疑是最快捷方便的方法。 重装系统目前有两种方式进行安装,一种是通过PE辅助安装,好处就是便捷方便,而且有很多功能和软件可以在PE下使用。 但是如果使用的PE制作工具或者封装的系统没选好,可能会会夹带一些奇怪的软件或者全家桶,用不了多久…

    2023年7月31日
    225
  • 二阶魔方教程新手公式(二阶魔方教程新手公式图解)

    面先法分为三步。首先拼好一面(任意颜色,本文以白色为例。)再拼好已拼好面的对面(如:绿对蓝 红对橙 白对黄)。当然在学习前要知道各个字母公式的含义。 R=Right (右面顺时针旋转90度) R 的含义 与R相对的是L L=Left(左面顺时针旋转90度) L 的含义 还有F,Front(前面顺时针旋转90度) F 的含义 与F相对的是B B=Back(后面…

    2023年7月30日
    247
  • 手机视频剪辑教程自学( 如何自学手机视频剪辑)

    在现在这个短视频时代,视频已经代替了图片成为了我们记录生活的方式,因为视频更加形象生动。但是,对于一些不会剪辑视频,或者不会制作炫酷视频的新手来说。视频制作起来,太难了。其实,在现在,早就有很多人想到了这点,直接用手📱机操作,就可以轻松剪辑/编辑视频。 ​ 打开清爽视频编辑器,既可对视频进行剪辑。 1:片段编辑 进入应用的【首页】,只点击【视频编辑】,再导入…

    2023年7月30日
    248
  • html网页制作的基本步骤(html网页制作实例教程)

    随着各种网页制作工具的普及,现在不懂技术的个人也能顺利建站了。不过使用网页制作工具虽然简单,但仍有很多细节需要注意,并且要遵循一定流程。那么个人究竟该如何建站呢?下面就给大家详细科普下个人网页制作教程: 第一步:确定网站定位 先要想明白你打算用这个网站做什么,是做个人博客网站,用来记录生活,还是想做一个简历网站,用来找工作?或者是做一个自媒体网站,用来积累粉…

    2023年7月31日
    285
  • win7升级win10教程保留数据(win7保留软件升级win10)

    win10家庭版系统的操作比较简单,可以方便各个家庭成员使用.所以win7如何重装win10的办法是什么呢,下面,小编就将win7升级win10教程带给大家。 1、首先进入界面,选择win10版本。 3、检测电脑的环境配置,就可以开始安装。 4、安装过程可能比较漫长,耐心等待。 5、安装成功后,点击-立即重启,重启电脑。 6、接下进入到windows启动管理…

    2023年8月1日
    393
  • B站UP主宣布集体停更背后原因是什么?

    这次B站up主收益降低,有的直接宣布停更的事件,我作为一个B站的UP主,来聊聊我的看法。 首先说下我的团队,我们现在的团队是四个固定成员,偶尔在忙不过来的时候,会有两个机动的兼职后期。四个人负责从脚本、到拍摄、到后期剪辑、到商单、到资源拓展所有的工作。 我们所有的视频是在主流的通发的,前前后后做了大概5年的时间。其中,B站的粉丝刚刚过10万,属于是腰部靠下,…

    2023年12月15日
    195
  • 谈谈 WMTS 中的 TileMatrix 与 ScaleDenominator

    其实有时间琢磨规范文档的话,倒也不必费时间自己琢磨,这篇算是一些口水话心得。 规范文档指路:OGC Standard – Two Demensional Tile Matrix Set #6. TileMatrixSet,对,并不是 WMTS 规范,而是更精确的 2D瓦片阵列集规范,它独立于 WMTS 规范而发布。 1. WMTS 中的 Tile…

    2023年12月16日
    152
  • ps基础教程图文教程(ps基础教程新手入门图文教程)

    应用领域:摄影后期;海报设计;文字设计;移动界面;淘宝美工;网页设计;LOGO 一、基本操作 1、PSCC—首选项,选择界面颜色 2、新建与保存:新建—command+N,保存—command+S,放大画板—滚动鼠标。 左键移动 二、图层概念 1、图层面板“新建图层” 2、快速新建图层—command+option+shift+N 3、弹出新建图层面板—co…

    2023年7月30日
    249

发表回复

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