参数说明

解释：Page 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、页面事件处理函数、组件事件处理函数等。

Web 态说明：

由于 Web 态框架暂不支持当前是否进入前、后台的状态检测，因此在下列场景中，Page.onShow、Page.onHide生命周期无法触发；

  • 当 Web 态小程序从后台切换至前台时，如从任务管理器进入、或关闭显示在上层的语音助手等，Page.onShow生命周期无法触发；
  • 当 Web 态小程序从前台切换至后台时，如按下 Home 键，Page.onHide生命周期无法触发；
  • 当从 Web 态小程序跳转至其它第三方网页或应用时，如从 Web 态小程序打开拨号界面，Page.onHide生命周期无法触发；
  • 关闭 Web 态小程序，Page.onHide生命周期无法触发。

object 参数说明：

属性类型描述
dataObject页面的初始数据
onInitFunction页面的生命周期函数 — 监听页面初始化
onLoadFunction页面的生命周期函数 — 监听页面加载
onShowFunction页面的生命周期函数 — 监听页面显示
onReadyFunction页面的生命周期函数 — 监听页面初次渲染完成
onHideFunction页面的生命周期函数 — 监听页面隐藏
onUnloadFunction页面的生命周期函数 — 监听页面卸载
onForceReLaunchFunction页面的生命周期函数 — 监听页面重启，单击右上角菜单栏的重启按钮时触发
onPullDownRefreshFunction页面的事件处理函数 — 监听用户下拉动作
onReachBottomFunction页面的事件处理函数 — 上拉触底事件的处理函数
onShareAppMessageFunction页面的事件处理函数 — 用户点击右上角转发
onPageScrollFunction页面的事件处理函数 — 页面滚动触发事件的处理函数
onTabItemTapFunction页面的事件处理函数 — 当前是 tab 页时，点击 tab 时触发
onURLQueryChangeFunction页面的事件处理函数 — 监听页面 URL query 改变
onErrorFunction错误监听函数
其他Any开发者可以添加任意的函数或数据到 object 参数中

名词解释：

  • 菜单栏：页面右上角获取菜单按钮（右上角胶囊按钮）中三个点的图标，点击会弹出菜单面板（包含：分享、评价、重启小程序等功能）。

代码示例

  • JS
  1. // page.js
  2. Page({
  3.     data: {
  4.         text: 'init data'
  5.     },
  6.     onInit(options) {
  7.         // do something when page init
  8.     },
  9.     onLoad(options) {
  10.         // do something when page load
  11.     },
  12.     onReady() {
  13.         // do something when page ready
  14.     },
  15.     onShow() {
  16.         // do something when page show
  17.     },
  18.     onHide() {
  19.         // do something when page hide
  20.     },
  21.     onUnload() {
  22.         // do something when page unload
  23.     },
  24.     onForceReLaunch() {
  25.         // do something when page force reLaunch
  26.     },
  27.     onPullDownRefresh() {
  28.         // do something when pull down
  29.     },
  30.     onReachBottom() {
  31.         // do something when page reach bottom
  32.     },
  33.     onShareAppMessage() {
  34.         // return custom share data
  35.     },
  36.     onPageScroll() {
  37.         // do something when page scroll
  38.     },
  39.     onTabItemTap(item) {
  40.         console.log(item.index);
  41.         console.log(item.pagePath);
  42.         console.log(item.text);
  43.     },
  44.     onURLQueryChange({newURLQuery, oldURLQuery}) {
  45.         // do something when url query change
  46.     },
  47.     customData: {}
  48. });
  • 在页面中使用 behaviors ：可以用来让多个页面有相同的数据字段和方法。

代码示例

  • JS
  1. // my-behavior.js
  2. module.exports = Behavior({
  3.   data: {
  4.     sharedText: 'data shared between pages.'
  5.   },
  6.   methods: {
  7.     sharedMethod: function() {
  8.       this.data.sharedText === 'data shared between pages.'
  9.     }
  10.   }
  11. })
  14. // page-a.js
  15. var myBehavior = require('./my-behavior.js')
  16. Page({
  17.   behaviors: [myBehavior],
  18.   onLoad: function() {
  19.     this.data.sharedText === 'data shared between pages.'
  20.   }
  21. })