【菜狗日记】微信小程序开发— 程序、页面、组件的生命周期函数

2022年9月5日 天气:晴

本日记参考来源：微信官方文档·小程序

刚开始接触微信小程序开发,大体上感觉和vue及其相似,不过在许多地方也有不同比如指令、事件绑定、事件函数参数传递等 其中生命周期函数与VUE差别是比较大的。

微信小程序中的生命周期分为:程序(App)的生命周期、页面(Page)的生命周期与组件（Component）的生命周期

程序(App)的生命周期函数及事件处理函数

名称	说明
onLaunch	生命周期回调——监听小程序初始化。 小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
onShow	生命周期回调——监听小程序启动或切前台。 小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。
onHide	生命周期回调——监听小程序切后台。 小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。
onError	错误监听函数。 小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。
onPageNotFound	页面不存在监听函数。 小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。(基础库 1.9.90 开始支持，低版本需做兼容处理。)
onUnhandledRejection	未处理的 Promise 拒绝事件监听函数。() 小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。(基础库 1.9.90 开始支持，低版本需做兼容处理。)
onThemeChange	监听系统主题变化 系统切换主题时触发。也可以使用 wx.onThemeChange 绑定监听。(基础库 2.11.0 开始支持，低版本需做兼容处理。)

页面(Page)的生命周期函数及事件处理函数

名称	说明
onLoad	生命周期回调—监听页面加载 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
onShow	生命周期回调—监听页面显示 页面显示/切入前台时触发。
onReady	生命周期回调—监听页面初次渲染完成 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onHide	生命周期回调—监听页面隐藏 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
onUnload	生命周期回调—监听页面卸载 页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时
onPullDownRefresh	监听用户下拉动作 * 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。 * 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。 * 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。.
onReachBottom	页面上拉触底事件的处理函数 * 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。 * 在触发距离内滑动期间，本事件只会被触发一次。
onShareAppMessage	用户点击右上角转发 监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。 注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
onShareTimeline	用户点击右上角转发到朋友圈 监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。 注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮
onAddToFavorites	用户点击右上角收藏 监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。
onPageScroll	页面滚动触发事件的处理函数
onResize	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	当前是 tab 页时，点击 tab 时触发
onSaveExitState	页面销毁前保留状态回调

组件(Component)的生命周期函数及组件所在页面的生命周期

名称	说明
lifetimes	组件生命周期声明对象 自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。
created	在组件实例刚刚被创建时执行
attached	在组件实例进入页面节点树时执行
ready	在组件在视图层布局完成后执行
moved	在组件实例被移动到节点树另一个位置时执行
detached	在组件实例被从页面节点树移除时执行
error	每当组件方法抛出错误时执行
pageLifetimes	组件所在页面的生命周期声明对象 还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。
show	组件所在的页面被展示时执行
hide	组件所在的页面被隐藏时执行
resize	组件所在的页面尺寸变化时执行

lifetimes代码示例：

// lifetimes
Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

pageLifetimes代码示例：

// pageLifetimes
Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

最后感谢大家浪费5分钟翻看今天日记！