一次讲清楚小程序所有生命周期

一共分为四个部分

• 应用生命周期
• 页面生命周期
• 组件生命周期
• 应用页面组件执行顺序

参考博客：雷银
微信开发文档
你不知道的小程序系列之生命周期执行顺序

应用生命周期(App(Object object))

1. onLaunch: 初始化小程序时触发，全局只触发一次。
2. onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
3. onHide: 用户从前台切换到后台隐藏时触发。
4. onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息。

初始化小程序：首次打开小程序。
后台： 点击左上角关闭，或者按了设备 Home 键离开微信，并没有直接销毁，而是进入后台。
前台：再次进入微信或再次打开小程序，相当于从后台进入前台。

点击查看官方文档参考

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

页面生命周期(Page(Object object))

1. onLoad：首次进入当前页面时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数，一个页面只调用一次。
2. onShow：页面显示加载完成后，后台切到前台或重新进入页面时触发。
3. onReady：页面首次渲染完成时触发，代表页面已经准备妥当，可以和视图层进行交互，一个页面只调用一次。
4. onHide：从前台切到后台或进入其他页面触发。
5. onUnload：页面卸载时触发。

页面加载顺序：加载顺序是先加载onLoad，再是onShow，最后onReady。
页面卸载：页面是堆栈的方式引入，当前页面返回上一级页面的时候，当前页面卸载。适用于返回弹窗
点击查看官方文档参考

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onShow: function() {
    // Do something when page show.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  }
})

组件生命周期(Component(Object object))

自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）

1. created：在组件实例刚刚被创建时执行。
2. attached：在组件实例进入页面节点树时执行。
3. ready：在组件在视图层布局完成后执行。
4. moved：在组件实例被移动到节点树另一个位置时执行。
5. detached：在组件实例被从页面节点树移除时执行。
6. error：每当组件方法抛出错误时执行，待一个参数返回报错问题
   组件创建时间：看总结小程序生命周期整体执行顺序
   组件进入页面节点执行时间：看总结小程序生命周期整体执行顺序
   组件在视图层布局完成顺序：看总结小程序生命周期整体执行顺序

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

组件所在页面的生命周期

1. show：组件所在的页面被展示时执行。
2. hide：组件所在的页面被隐藏时执行。
3. resize：组件所在的页面尺寸变化时执行，返回一个参数。

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

应用页面组件执行顺序

如果一个小程序首页中，同时有一个组件，可以猜测下他们的相应生命周期的执行顺序。可以看下附件，理解下当你打开一个小程序，你设定在各个生命周期的事件是什么时候运行的，方便解决BUG。

涉及执行顺序的小程序生命周期：

以下例子中
App：

• onLaunch
• onShow
• onHide

Page：

• onLoad
• onShow
• onReady
• onHide
• onUnload

Component：

• created
• attached
• ready
• moved
• detached
  加载顺序可以看官方的生命周期

• 首先执行 App.onLaunch > App.onShow
• 其次执行 Component.created > Component.attached
• 再执行 Page.onLoad > Page.onShow
• 最后 执行 Component.ready > Page.onReady

详细过程参考文档：你不知道的小程序系列之生命周期执行顺序

附件：

小程序启动流程

生命周期

执行顺序