微信小程序生命周期的记录

小程序中生命周期分为3类：

• 应⽤的生命周期
• 页面的生命周期
• 组件的生命周期

一、生命周期

1. 应⽤的生命周期

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

2. 页面的生命周期

生命周期参考图

Page({
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function(options) {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  }
});

3. 组件的生命周期

• 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

• 生命周期方法可以直接定义在 Component 构造器的第一级参数中。 组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）

Component({
  // 组件自身的生命周期
  lifetimes: {
    created: function() {
      // 在组件实例刚刚被创建时执行
    },
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    ready: function() {
      // 在组件在视图层布局完成后执行
    },
    moved: function() {
      // 在组件实例被移动到节点树另一个位置时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
    error: function(Object Error) {
      // 每当组件方法抛出错误时执行
    }
  },
 
  // 组件所在页面的生命周期
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
});

二、执行过程

1. 应⽤的⽣命周期执行过程：

• ⽤户⾸次打开⼩程序，触发 onLaunch（全局只触发⼀次）
• ⼩程序初始化完成后，触发onShow⽅法，监听⼩程序显示
• ⼩程序从前台进⼊后台，触发 onHide⽅法
• ⼩程序从后台进⼊前台显示，触发 onShow⽅法
• ⼩程序后台运⾏⼀定时间，或系统资源占⽤过⾼，会被销毁

2. ⻚⾯⽣命周期的执行过程：

• ⼩程序注册完成后，加载⻚⾯，触发onLoad⽅法
• ⻚⾯载⼊后触发onShow⽅法，显示⻚⾯
• ⾸次显示⻚⾯，会触发onReady⽅法，渲染⻚⾯元素和样式，⼀个⻚⾯只会调⽤⼀次
• 当⼩程序后台运⾏或跳转到其他⻚⾯时，触发onHide⽅法
• 当⼩程序有后台进⼊到前台运⾏或重新进⼊⻚⾯时，触发onShow⽅法
• 当使⽤重定向⽅法 wx.redirectTo() 或关闭当前⻚返回上⼀⻚wx.navigateBack()，触发onUnload

3. 执行顺序

• 打开小程序：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead
• 进入下一个页面：(currPage)onHide --> (NextPage)onLoad --> (NextPage)onShow --> (NextPage)onReady
• 返回上一个页面：(currPage)onUnload --> (prePage)onShow
• 离开小程序：(App&Page)onHide
• 再次进入：小程序未销毁 --> (App)onShow(执行上面的顺序），小程序被销毁，（App)onLaunch重新开始执行.