微信小程序学习日记 L03 生命周期

一开始按照 Vue 的思路下来，会认为生命周期很重要，需要完整的看一遍，但是其实整个小程序开发完之后，生命周期的概念其实并不是很重要，
大概分成 小程序 的生命周期和 页面/组件 的生命周期。
这些生命周期函数中主要就是使用 onShow 和 onLoad 两个，用来获取和设置初始参数，发起请求等等。
其它的几个回调函数其实很少有用到，但是还是聊一聊吧。

📱 `app.js` 小程序的生命周期回调函数 App(Object object) | 微信开放文档

1. `onLaunch(options)` 小程序初始化完成时触发

全局只触发一次
参数也可以使用 wx.getLaunchOptionsSync 获取
options参数和 wx.getLaunchOptionsSync 方法的回调参数一致

注意：部分版本在无 referrerInfo的时候会返回 undefined，建议使用 options.referrerInfo && options.referrerInfo.appId 进行判断。

2. `onShow(options)` 小程序启动，或从后台进入前台显示时触发

可以使用 wx.onAppShow 绑定监听
options参数与 wx.onAppShow 方法的回调参数一致

3. `onHide()` 小程序从前台进入后台时触发

可以使用 wx.onAppHide 绑定监听

📄 页面中的生命周期回调函数 Page(Object object) | 微信开放文档

1. `onLoad(options)` 页面加载时触发

一个页面在一个生命周期中只会调用一次
可以在 options 中获取打开当前页面路径中的参数。

2. `onShow()` 页面显示/切入前台时触发

一般的接口请求我会在这边调用

3. `onReady()` 页面初次渲染完成时触发

代表页面已经准备妥当，可以和视图层进行交互。

一个页面只会调用一次
注意：对界面内容进行设置的 API 如 wx.setNavigationBarTitle，请在 onReady 之后进行。

4. `onHide()` 页面隐藏/切入后台时触发

触发时机：如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

5. `onUnload()` 页面卸载时触发

触发时机：如 wx.redirectTo 或 wx.navigateBack 到其他页面时

示例代码：

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.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onResize: function() {
    // Do something when page resize
  },
  // 自定义函数
  onCustomMethod: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
})

📑 组件中的生命周期回调函数组件生命周期 | 微信开放文档

1. `created()` 在组件实例刚刚被创建时执行

组件实例刚刚被创建好时， created 生命周期被触发。
此时还不能调用 setData

2. `attached()` 在组件实例进入页面节点树时执行

在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。
绝大多数初始化工作可以在这个时机进行

3. `ready()` 在组件在视图层布局完成后执行

同页面组件的 onShow

4. `moved()` 在组件实例被移动到节点树另一个位置时执行

没有一个很合适的场景，在小程序中也有人提问这个函数的执行时机，我写了一个片段可以查看 🔖代码片段

5. `detached()` 在组件实例被从页面节点树移除时执行

退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

🧷 组件所在页面的生命周期：

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。

1. `show()` 组件所在的页面被展示时执行

2. `hide()` 组件所在的页面被隐藏时执行

3. `resize(size)` 组件所在的页面尺寸变化时执行

可以接收一个 size 参数

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

在 behaviors 中也可以编写生命周期方法，同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意，如果一个组件多次直接或间接引用同一个 behavior ，这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。

🌰 组件生命周期完整示例

Component({
  // 推荐组件生命周期函数定义方式
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对小于 2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // 组件所在页面的生命周期回调
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

尾声

🎇 在组件中有提到 `behavior` 这个东西的一些疑问

behavior 直译过来就是行为，有点不是很明确，只能看 behaviors | 微信开放文档上的解释：

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。

再继续往下翻文档的时候看到使用方法和同名字段的覆盖和组合规则就基本能确定了，就是 VueJS 中的 mixins API

但是如果在 behavior 中也使用了生命周期函数，和当前组件的生命周期函数的谁先执行呢？是否和Vue一样？
可以查看官方提供的 🔖代码片段
实际操作得出的结果：先执行 behavior 的生命周期函数，然后再是执行组件本身的生命周期函数
文档也给出了规则：

对于同种生命周期函数，遵循如下规则：

behavior 优先于组件执行；

子 behavior 优先于父 behavior 执行；

靠前的 behavior 优先于靠后的 behavior 执行；

最后本文所描述小程序最新版本 v2.17.0 (2021-04-28)

🙄 疑问

获取场景值

可以在 app.js 的 onLaunch 和 onShow 中获取，并不能在页面中的 onLaunch 和 onShow 中获取，会返回 undefined，但可以使用 wx.getLaunchOptionsSync() 这个 API 来获取小程序启动时的参数。

文档

📱 app.js 小程序的生命周期回调函数 App(Object object) | 微信开放文档

1. onLaunch(options) 小程序初始化完成时触发

2. onShow(options) 小程序启动，或从后台进入前台显示时触发

3. onHide() 小程序从前台进入后台时触发

📄 页面中的生命周期回调函数 Page(Object object) | 微信开放文档

1. onLoad(options) 页面加载时触发

2. onShow() 页面显示/切入前台时触发

3. onReady() 页面初次渲染完成时触发

4. onHide() 页面隐藏/切入后台时触发

5. onUnload() 页面卸载时触发

📑 组件中的生命周期回调函数 组件生命周期 | 微信开放文档

1. created() 在组件实例刚刚被创建时执行

2. attached() 在组件实例进入页面节点树时执行

3. ready() 在组件在视图层布局完成后执行

4. moved() 在组件实例被移动到节点树另一个位置时执行

5. detached() 在组件实例被从页面节点树移除时执行