微信小程序 page 函数的使用详解
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 的格式:字符串,数字,布尔值,对象,数组。 渲染层可以通过 对数据进行绑定。 示例代码:
Page({ data: { text: 'init data', array: [{msg: '1'}, {msg: '2'}] } })
onLoad: 页面加载 一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。 onShow: 页面显示 每次打开页面都会调用一次。 onReady: 页面初次渲染完成
一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。 onHide: 页面隐藏 当navigateTo或底部tab切换时调用。 onUnload: 页面卸载 当redirectTo或navigateBack的时候调用。 生命周期的调用以及页面的路由方式 onLoad参数
监听用户下拉刷新事件。 监听用户上拉触底事件。 监听用户滑动页面事件。
只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮 自定义转发字段
Page({ onShareAppMessage: function () {return { title: '自定义转发标题', path: '/page/user?id=123' } } }) 除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入,当达到触发事件时,就会执行 Page 中定义的事件处理函数。 示例代码:
Page({ viewTap: function() {console.log('view tap') } })
基础库 1.2.0 开始支持,低版本需做
其中 key 可以非常灵活,以数据路径的形式给出,如 注意:
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致 示例代码:
//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 实例的生命周期。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |