微信小程序的Page()方法和页面生命周期

216 阅读2分钟

Page()方法

注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。官方文档

常用参数

  1. data:页面的初始数据,this.data访问里面的数据。
  2. options:页面的组件选项,如样式隔离styleIsolation和multipleSlots多插槽支持。
  3. behaviors:类似于mixins和traits的组件间代码复用机制。
  4. onLoad:生命周期回调—监听页面加载。
  5. onShow:生命周期回调—监听页面显示。
  6. onReady:生命周期回调—监听页面初次渲染完成。
  7. onHide:生命周期回调—监听页面隐藏。
  8. onUnload:生命周期回调—监听页面卸载。
  9. onPullDownRefresh:监听用户下拉动作。
  10. onReachBottom: 页面上拉触底事件的处理函数。
  11. onShareAppMessage:用户点击右上角转发。
  12. onShareTimeline:用户点击右上角转发到朋友圈。
  13. onAddToFavorites:用户点击右上角收藏。
  14. onPageScroll:页面滚动触发事件的处理函数。
  15. onResize:页面尺寸改变时触发。
  16. onTabItemTap:当前是 tab 页时,点击 tab 时触发。
  17. onSaveExitState: 页面销毁前保留状态回调。
  18. other:可以添加任何变量或方法,如data:{num1:3,arr1:[1,2],obj:{age:18}}、onBindTapBtn(),用this.变量或方法可以访问。

页面的生命周期

页面生命周期指小程序页面从 加载->运行->销毁 的整个过程

onLoad触发场景

  • 监听页面加载页面创建的时候执行 只会调用一次
  • 页面创建的时候执行。

onShow触发场景

  • 监听页面显示,后台切前台时候也会触发。onShow执行完再执行onReady。
  • 页面显示的的时候执行。

onReady触发场景

  • 监听页面初次渲染完成 只会调用一次。onShow执行完再执行onReady。
  • 页面初次渲染完成的时候执行。

onHide触发场景

  • 监听页面隐藏在当前小程序进入后台时也会触发。
  • 页面在隐藏时候触发。

onUnload触发场景

  • 监听页面卸载。
  • 页面销毁时触发。

Page页面生命周期图例

image.png

和vue的生命周期对照图

image.png