微信小程序开发图解案例教程PPT完整全套教学课件.pptx

HelloWorld界面在pages/index/index.js文件里，Page的data里提供了数据源motto，data的数据可以动态地绑定到WXML页面中，如图1.30所示。步骤一：图1.30

},onShow:function(){//当小程序显示时做一些事情

},onHide:function(){//当小程序隐藏时做一些事情

res.size.windowHeight//新的显示区域高度

:

打开新页面调用APIwx.navigateTo或使用组件onLoad，onShowonHide页面重定向调用APIwx.redirectTo或使用组件onLoad，onShowonUnload页面返回调用APIwx.navigateBack或用户按左上角返回按钮onShowonUnload（多层页面返回时每个页面都会按顺序触发onUnload）tab切换调用APIwx.switchTab或使用组件或用户切换Tab

重启动调用APIwx.reLaunch或使用组件OnLoad，onShowonUnload2.3.5自定义函数除了初始化数据和生命周期函数，在Page中还可以定义一些特殊的函数，如事件处理函数。在渲染层的组件中加入事件绑定，当达到触发事件时，就会执行Page中定义的事件处理函数。clickmePage({clickMe:function(){console.log('viewtap')}})示例代码如下。2.3.6

setData设值函数Ptotype.setData()设值函数用于将数据从逻辑层发送到视图层，同时改变对应的this.data的值。setData()参数格式：接收一个对象，以key:value的形式表示将this.data中的key对应的值改变成value。示例代码如下。{{text}}Changenormaldata{{array[0].text}}ChangeArraydata{{object.text}}ChangeObjectdata{{newField.text}}Addnewdata//index.jsPage({data:{text:'initdata',array:[{text:'initdata'}],object:{text:'initdata'}},2.3.6

setData设值函数changeText:function(){//this.data.text='changeddata'这种方式赋值不起作用

this.setData({text:'changeddata'})},changeItemInArray:function(){//可以用这种方式动态修改数据

wx:for列表渲染单个组件在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。数组当前项的下标变量名默认为index，数组当前项的变量名默认为item。示例代码如下。{{idx}}:{{itemName.message}}{{index}}:{{item.message}}Page({data:{使用wx:for-item可以指定数组当前元素的变量名，使用wx:for-index可以指定数组当前下标的变量名。示例代码如下。array:[{message:'foo',},{message:'bar'}]}})2.6.2

blockwx:for列表渲染多个组件wx:for应用在某一个组件上，如果想渲染一个包含多节点的结构块，wx:for需要应用在标签上。示例代码如下。{{index}}:{{item}}2.6.3

wx:key指定唯一标识符如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如中的输入内容，的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。wx:key的值以如下两种形式提供。字符串保留关键字示例代码如下。{{item.id}}Page({data:{objectArray:[{id:5,unique:'unique_5'},{id:4,unique:'unique_4'},{id:3,unique:'unique_3'},{id:2,unique:'unique_2'},{id:1,unique:'unique_1'},{id:0,unique:'unique_0'},]}}2.6.3

import引用{{text}}import可以在该文件中使用目标文件定义的template。例如在item.wxml文件中定义了一个叫item的template，示例代码如下。在index.wxml文件中引用了item.wxml文件，就可以使用item模板。示例代码如下。2.8.2