Page()
函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
object 参数说明:
属性 | 类型 | 描述 |
---|---|---|
//index.jsPage({ data: { text: "This is page data." }, onLoad: function(options) {// Do some initialize when page load. }, onReady: function() {// Do something when page ready. }, onShow: function() {// Do something when page show. }, onHide: function() {// Do something when page hide. }, onUnload: function() {// Do something when page close. }, onPullDownRefresh: function() {// Do something when pull down. }, onReachBottom: function() {// Do something when page reach bottom. }, onShareAppMessage: function () { // return custom share data when user share. }, onPageScroll: function() {// Do something when page scroll },// Event handler. viewTap: function() {this.setData({ text: 'Set some data for updating view.' }, function() {// this is setData callback }) }, customData: { hi: 'MINA' } })
初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。
渲染层可以通过 对数据进行绑定。
示例代码:
{{text}} {{array[0].msg}}
Page({ data: { text: 'init data', array: [{msg: '1'}, {msg: '2'}] } })
函数">生命周期函数
onReady: 页面初次渲染完成
onHide: 页面隐藏
onUnload: 页面卸载
onLoad: 页面加载
当navigateTo或底部tab切换时调用。
当redirectTo或navigateBack的时候调用。
onLoad参数
类型 | 说明 |
---|---|
需要在
app.json
的window选项中或中开启enablePullDownRefresh
。当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
onReachBottom
: 上拉触底可以在
app.json
的window选项中或中设置触发距离onReachBottomDistance
。在触发距离内滑动期间,本事件只会被触发一次。
onPageScroll
: 页面滚动参数为 Object,包含以下字段:
onPullDownRefresh
: 下拉刷新
监听用户下拉刷新事件。
监听用户上拉触底事件。
监听用户滑动页面事件。
类型 | 说明 |
---|---|
onShareAppMessage
: 用户转发
用户点击转发按钮的时候会调用
此事件需要 return 一个 Object,用于自定义转发内容
只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
自定义转发字段
说明 | 默认值 |
---|---|
Page({ onShareAppMessage: function () {return { title: '自定义转发标题', path: '/page/user?id=123' } } })
除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入,当达到触发事件时,就会执行 Page 中定义的事件处理函数。
示例代码:
click me
Page({ viewTap: function() {console.log('view tap') } })
基础库 1.2.0 开始支持,低版本需做
基础库 1.2.0 开始支持,低版本需做
route
字段可以获取到当前页面的路径。
setData
函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data
的值(同步)。
类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|
其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message
,a.b.c.d
,并且不需要在 this.data 中预先定义。
注意:
示例代码:
{{text}} {{num}} {{array[0].text}} {{object.text}} {{newField.text}}
//index.jsPage({ data: { text: 'init data', num: 0, array: [{text: 'init data'}], object: { text: 'init data' } }, changeText: function() {// this.data.text = 'changed data'// bad, it can not work this.setData({ text: 'changed data' }) }, changeNum: function() {this.data.num = 1 this.setData({ num: this.data.num }) }, changeItemInArray: function() {// you can use this way to modify a danamic data path this.setData({'array[0].text':'changed data' }) }, changeItemInObject: function(){this.setData({'object.text': 'changed data' }); }, addNewField: function() {this.setData({'newField.text': 'new data' }) } })
以下内容你不需要立马完全弄明白,不过以后它会有帮助。
下图说明了 Page 实例的生命周期。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。