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

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

📱 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() 小程序从前台进入后台时触发

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

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

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

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

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

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

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

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

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

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

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

  • 触发时机:如 wx.redirectTowx.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)