小程序页面注册

注册页面

通过 Page() 函数注册页面，函数接受 Object 参数，指定页面的初始数据、生命周期函数、事件处理函数等

属性	类型	描述
data	Object	初始化数据
onLoad	Function	生命周期函数–监听页面加载
onReady	Function	生命周期函数–监听页面初次渲染完成
onShow	Function	生命周期函数–监听页面显示
onHide	Function	生命周期函数–监听页面隐藏
onUnload	Function	生命周期函数–监听页面卸载
onPullDownRefresh	Function	页面相关事件处理函数–监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	右上角转发函数
onPageScroll	Function	页面滚动函数
onTabItemTap	Function	当前是 tab 页时，点击 tab 时触发
其他	Any	可以添加任意的函数或数据到 object 参数中，在页面的函数中用 `this` 可以访问

Page({
    data: {
        text: "This is page data."
    },
    onLoad: (options) => { },
    onReady: () => { },
    onShow: () => { },
    onHide: () => { },
    onUnload: () => { },
    onPullDownRefresh: () => { },
    onReachBottom: () => { },
    onShareAppMessage: () => { },
    onPageScroll: () => { },
    onTabItemTap: (item) => {
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
    },
    viewTap: function () {
        this.setData({
            text: 'Set some data for updating view.'
        }, function () {
            // this is setData callback
        })
    },
    otherData: {}
})

生命周期函数

onLoad

只调用一次，可以在该函数中获取其他页面打开当前页面所调用的 query 参数
onShow

每次打开页面都会调用
onReady

页面初次渲染时调用，此时可以与视图进行交互

对界面进行设置如 wx.setNavigationBarTitle 需在该函数之后
onHide

使用 navigateTo 或切换底部 tab 时调用
onUnload

使用 redirectTo 或 navigateBack 时调用

页面相关事件处理函数

onPullDownRefresh

监听下拉刷新事件

需要在全局配置或页面配置中开启 enablePullDownRefresh

当处理完数据刷新后，可以通过 wx.stopPullDownRefresh 停止当前页面的下拉刷新，也可通过 wx.startPullDownRefresh 调触发下拉刷新动画
onReachBottom

监听上拉触底事件

需要在全局配置或页面配置中设置触发距离 onReachBottomDistance

在触发距离内滑动期间只会被触发一次
onPageScroll

监听页面滚动事件

参数为 Object，包含 scrollTop 字段（页面在垂直方向已滚动的距离，单位px）
onShareAppMessage

只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，点击转发按钮时触发

该事件需要返回一个 Object，用于自定义转发内容，包含转发标题和转发路径

title：转发标题，默认为小程序名称

path：转发路径，必须以 / 开头，默认为当前页面路径
1
2
3
4
5
6
Page({
onShareAppMessage: () => ({
title: '自定义转发标题',
path: '/pages/logs/logs'
})
});

Page.prototype.route

route 字段可以获取到当前页面的路径

在 onReay、onLoad等函数中调用该字段会报错

Page.prototype.setData()

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

直接修改 this.data 而不调用 this.setData 是无法改变页面状态，还会造成数据不一致

单次修改的数据不能超过 1024kB，请尽量避免一次设置过多的数据

不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题

字段	类型	必填	描述	最低版本
data	Object	是	需要改变的数据（key: value）
callback	Function	否	回调函数	1.5.0