页面的详细方案()的微信小程序的功能

微信小程序- Page():



在开发微信的小程序,如果您遇到的功能或不明白,你最好去官方网站查询相应的知识。萧边在这里帮助你理清页()函数的用法。

页面()函数用于注册页面。接受一个对象参数,它指定页面的初始数据、生命周期函数、事件处理函数等。



对象参数描述:







属性
类型
描述




数据
对象
页面的初始数据


onload
功能
生命周期功能——监视页面加载


onready
功能
生命周期函数——监听器页面的第一次呈现


昂秀
功能
生命周期功能——监视器页面显示


OnHide
功能
生命周期功能——监视页隐藏


卸载文件
功能
生命周期功能——监视页面的卸载


onpulldownrefreash
功能
与页面相关的事件处理功能——监视用户下拉操作


其他
任何
开发人员可以将任何函数或数据添加到对象参数中,可以使用





示例代码:




/ / index.js
页({
数据:{
文本:这是页面数据。
},
onLoad:功能(选项){
在页面加载时初始化。
},
OnReady:函数(){
页面就绪时的内容。
},
OnShow:函数(){
当页面显示时。
},
OnHide:函数(){
页面隐藏时的内容。
},
onUnload:函数(){
页面关闭时的内容。
},
OnPullDownRefresh:函数(){
在下拉时做某事
},
事件处理程序。
ViewTap:函数(){
this.setdata({
正文:让一些数据更新的观点。
})
}
})



数据的初始化



初始化数据将用作页面的第一次呈现,数据将以JSON的形式从逻辑层传递到呈现层,因此数据必须转换成JSON格式:字符串、数字、布尔值、对象和数组。

渲染层可以将数据通过wxml。



示例代码:




{ { }
{阵列{ 0 } }



页({
数据:{
正文:'init数据,
数组:{ {味精:1},{味精:2} }
}
})



生命周期函数



onLoad:页面加载



一页只会被调用一次。



参数可以得到wx.navigateto和wx.redirectto和它的查询。



昂秀:页面显示



每次打开页面时,它都被调用一次。



第一:页面渲染的onready



页面只被调用一次,代表页面准备好与视图层交互。



在设置界面,如wx.setnavigationbartitle,请在onready成立。看到生命周期



OnHide:页面隐藏



打电话的时候,navigateto或底部tab。



onUnload:页面卸载



打电话的时候,redirectto或navigateback。



页面相关事件处理功能



OnPullDownRefresh:下拉刷新



监视用户以删除刷新事件。



你需要在配置窗口选项打开enablepulldownrefresh。



刷新数据时,wx.stoppulldownrefresh可以停止当前页面刷新下拉。



事件处理函数



除了初始化数据和生命周期函数之外,还可以在页面:事件处理函数中定义一些特殊函数。在呈现层中,事件绑定可以添加到组件中,当触发事件到达时,将在页面中定义事件处理函数。



示例代码:



点击我


页({
ViewTap:函数(){
console.log('')
}
})



Page.prototype.setData()



SetData函数用于从逻辑层数据发送到视图层,并改变相应的this.data价值。



小心 uff1a



该this.data直接修改是无效的,而网页的状态是无法改变的,并且数据不一致。

数据单套不超过1024kb。请尽量避免同时设置太多数据。



setData()的参数格式



接受一个对象,在关键值,改变在this.data相应的关键值的值。

关键是非常灵活的,在数据路径的形式给出的,如数组{ 2 }。消息,ABCD,而不需要在this.data预定义。



示例代码:




{ { }
改变正常的数据
{数组{ 0 }。文本}
改变数组数据
{ { } }文本对象。
改变对象的数据
{ {新野。文本} }
添加新的数据




/ / index.js
页({
数据:{
正文:'init数据,
数组:{ {文本:'init数据} },
对象:{
正文:'init数据
}
},
ChangeText:函数(){
this.data.text = 'changed /数据/坏,不能工作
this.setdata({
正文:'changed数据
})
},
ChangeItemInArray:函数(){
你可以用这种方式或修改一个动态数据路径
this.setdata({
阵{ 0 }。文本:'changed数据
})
},
ChangeItemInObject:函数(){
this.setdata({
对象的文本:'changed数据。
});
},
AddNewField:函数(){
this.setdata({
新:新的文本数据。
})
}
})



你不需要对下面的内容有一个全面的了解,但这会有所帮助。



生命周期



下图显示了页面实例的生命周期。



路由的页面



在一个小程序中,所有页面的路由都是由一个框架管理的,触发路由和页面生命周期功能的方式如下:

路由模式



触发时间路由后的页路由页









触发时间
路由后的页面
路由前页




初始化
applet打开的第一页
onload,昂秀



打开新的一页
调用API wx.navigateto或使用组件
onload,昂秀
OnHide


页面重定向
调用API wx.redirectto或使用组件
onload,昂秀
卸载文件


页返回
调用API wx.navigateback或用户在左上角的按钮返回
昂秀
卸载文件


Tab开关
多选项卡模式下的用户切换选项卡
开载,昂秀首次;否则昂秀
OnHide






谢谢你的阅读。我希望你能帮助你,谢谢你对这个站的支持。