小程序生命周期函数

最新推荐文章于 2024-04-25 18:47:26 发布

大雾四时起

最新推荐文章于 2024-04-25 18:47:26 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

文章标签：小程序

本文链接：https://blog.csdn.net/qq_45666837/article/details/118311202

生命周期

生命周期是指一个小程序从创建到销毁的过程中一系列的操作

小程序的两种生命周期

在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面

小程序的生命周期

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

参数

属性	类型	默认值	说明
onLaunch	function	否	生命周期回调——监听小程序初始化。
onShow	function	否	生命周期回调——监听小程序启动或切前台
onHide	function	否	生命周期回调——监听小程序切后台
onError	function	否	错误监听函数
onPageNotFound	function	否	页面不存在监听函数
onUnhandledRejection	function	否	未处理的 Promise 拒绝事件监听函数
onThemeChange	function	否	监听系统主题变化
其他	any	否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

示例

App({
  onLaunch (options) {
    // 小程序初始化完成时触发，全局只触发一次。
  },
  onShow (options) {
    // 小程序启动，或从后台进入前台显示时触发。
  },
  onHide () {
    //小程序从前台进入后台时触发。
  },
  onError (msg) {
    // 小程序发生脚本错误或 API 调用报错时触发。
  },
  onPageNotFound (res) {
    // 小程序要打开的页面不存在时触发。
  },
  onUnhandledRejection () {
	// 小程序有未处理的 Promise 拒绝时触发。
  },
  onThemeChange () {
	// 系统切换主题时触发。
  },
  globalData: 'I am global data'
})

getApp()方法

获取到小程序全局唯一的 App 实例

示例:

var appInstance = getApp()
console.log(appInstance.globalData)

注意:

不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，使用 this 就可以拿到 app 实例。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。
页面的生命周期

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

参数

属性	类型	说明
data	Object	页面的初始数据
options	Object	页面的组件选项，同 Component 构造器中的 options
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onShareTimeline	function	用户点击右上角转发到朋友圈
onAddToFavorites	function	用户点击右上角收藏
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发
其他	any	开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

示例:

Page({
  data: {
    text: "This is page data."
    // data 是页面第一次渲染使用的初始数据。
  },
  // 生命周期回调函数
  onLoad: function(options) {
    // 页面加载时触发。一个页面只会调用一次
  },
  onShow: function() {
    // 页面显示/切入前台时触发
  },
  onReady: function() {
    // 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
  },
  onHide: function() {
    //页面隐藏/切入后台时触发。
  },
  onUnload: function() {
    // 页面卸载时触发。
  },
  onPullDownRefresh: function() {
    // 监听用户下拉刷新事件。
  },
  onReachBottom: function() {
    // 监听用户上拉触底事件
  },
  onShareAppMessage: function () {
    // 监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容
  },
  onPageScroll: function() {
    //监听用户滑动页面事件
  },
  onResize: function() {
    // 小程序屏幕旋转时触发。
  },
})

getCurrentPages()方法

获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。

注意：

不要尝试修改页面栈，会导致路由以及页面状态错误。
不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

总结

onLoad，onReady，onShow，onHide 的区别

onLoad：页面加载时触发，且只发生一次，有些数据实时性要求不高可以onlaod里面触发对应的请求
onReady：页面初次渲染之后触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
onShow：定义是页面显示，切入前台触发，可以理解为页面出现一次，他就被调用一次包括你前进后退到这个页面，适合有些实时性的数据，例如订单列表数据
onHide：切换页面的时候你就会发现该函数被调用，这个页面切换到别的页面就会触发(注意切换不是关闭)

小程序生命周期函数

生命周期

小程序的两种生命周期

小程序的生命周期

参数

示例

getApp()方法

示例:

注意:

页面的生命周期

参数

示例:

getCurrentPages()方法

注意：

总结