参数说明

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

Web 态说明:

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

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

Object参数说明

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

名词解释:

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

代码示例

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

页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

代码示例

  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. })
  1. // page-a.js
  2. var myBehavior = require('./my-behavior.js')
  3. Page({
  4. behaviors: [myBehavior],
  5. onLoad: function() {
  6. this.data.sharedText === 'data shared between pages.'
  7. }
  8. })