E企盈营销工具技术服务商 热线:4006-838-530

【小程序入门】小程序页面的数据绑定及展示

E企盈直播平台营销卖货系统

上篇文章我们提到了首页https://blog.csdn.net/u014650759/article/details/90719228,这篇,我们通过前面的例子,继续讲解一个基本的页面具备了哪些元素及其知识点,通过前面的系列文章我们知道,小程序的结构是MVC:page.js 即控制层(C),也叫业务逻辑层;page.js 中的data属性,即数据模型层(M);page.wxml 即展现层(V);page.wxss 即css,增强展现层效果。上面是关于一个页面所必需的四个代码文件,我们知道,一个页面的展现需要有基本的视图组件元素及数据,了解各种视图组件及功能使用,可查看官方的链接https://developers.weixin.qq.com/miniprogram/dev/component/。要展示数据,还需要后台将数据传递过来,在小程序中,起传递作用的就是js文件中的data,而界面xaml代码中,则通过{{}}将data中参数绑定的形式展现出来。所以,如果我们要展示某个数据,我们先需要在页面js文件中赋变量及其值:上面js页面初始化了一个data数据变量motto,并赋值为“Hello World”,而在关联页面xaml中,通过{{}}绑定该变量即可显示出来。通过上面的截图还可以看到,src=”{{userInfo.avatarUrl}}”这样的组件属性和内容一样,都要通过{{}}进行绑定,只不过添加了引号,但其标签固有属性如mode=”cover”和class=”usermotto”之类,则不需要。需要注意的是checked控件元素需要写成checkbox checked=”{{false}}” /checkbox不要直接写 checked=”false”,是为了体现其计算结果是一个字符串。另外,我们看到,页面xaml中还可以有控制属性,以用于控制页面显示的元素内容,如上图的wx:if=”{{!hasUserInfo && canIUse}}和wx:else还有,既然都说道绑定这里了,顺便说下上面xaml没有体现但页面开发中xaml存在的知识点:1.绑定可以存在运算符,如下。当然,你也可以在页面js中计算后在通过data中参数绑定过来view hidden=”{{flag ? true : false}}” Hidden /viewview {{a + b}} + {{c}} + d /viewview{{“hello” + name}}/view2.从上面的js中可以看到最开头的代码const app = getApp(),关于这里的知识点是:每个小程序默认的都会有app.js文件,在这个app.js文件可以定义全局变量,定义之后可以在每个页面进行访问。通过getApp()方法,即可使用app.js里的全局变量。翻看前面文章或本实例,查看app.js文件中定义及使用方式:总结,至此,我们知道了一个页面怎么将数据展现出来,页面是怎么将后台js文件的数据传递到xaml页面文件的。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 【小程序入门】小程序页面的数据绑定及展示
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏