微信小程序开发项目实战（微课版）课件 2-2 课件-构建页面数据.pptx

项目二小程序编程基础任务二构建页面数据MiniProgram

定义data数据：在页面JS文件page函数中第一项为data属性，在data中定义本页面逻辑处理需要用到的数据，其中很大一部分数据将用WXML文件的数据渲染。因为小程序JS文件是基于JavaScript编写的，所以在JS文件中可以定义字符串、数字、布尔值、对象和数组等类型的数据。Next》页面数据Page({???data:?{????text:?This?is?page?data.,??????sliderOffset:?0,???????state:{???????????genre:[],???????????genre_index:?0,???????????model:[],???????????model_index:?0,???????????terminalStatus:,???}????},})

获取data数据：获取data中的text和genre_index值需要使用this。Next》页面数据?onLoad:function(options){??????var?gener_index=this.data.state.genre_index???????console.log(gener_index)???????var?text=this.data.text????????console.log(text)????}

页面数据执行效果如下图所示。

内容绑定：WXML中的动态数据均来自对应Page的data。数据绑定使用Mustache语法即{{}}语法将变量包起来。Next》数据绑定在index.wxml页面数据绑定，示例代码如下：view{{message}}/view

组件属性：在小程序组件中,properties是组件的对外属性,用来接收外界传递到组件中的数据。Next》数据绑定在index.wxml页面数据绑定，示例代码如下：viewid=item-{{id}}/view

控制属性：在index.wxml页面数据绑定，示例代码如下Next》数据绑定view?wx:if={{condition}}hello,world/view

关键字：true：boolean类型的true，代表真值。false：boolean类型的false，代表假值。Next》数据绑定在index.wxml页面数据绑定，示例代码如下：checkboxchecked={{false}}/checkbox特别注意：不要直接写checked=false，其计算结果是一个字符串，转成boolean类型后代表真值。

感谢观看THANK项目二小程序编程基础