小程序 之 “逃不掉的生命周期”之介绍

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

对于开发人员,生命周期是我们必经之路.基本上在移动端本质上都是一样的.无非是优先级的问题.今天咱们带个小疑问来看这篇文章.界面的生命周期是谁赋予的呢?.

您能在这里看到啥

1. 各司其职的生命周期
2. 有何职能

各司其职的生命周期

我们简单画一下小程序界面图层分布图,如下所示

、

从上面的图层中,我们可以知道.一个被启动的小程序,一般分三个层级.对应的就分成3个Thread.

• 应用层(AppService Thread)

  应用层的生命周期,是指小程序从启动 -> 运行 -> 销毁的完整闭环的过程.如下所示.

  

• 页面层(View Thread)

  页面层的生命周期如下所示,

  

• 组件层(Component Thread)

  组件的生命周期如下所示

  

从我们整理的生命周期的顺序中,不难发现.无论是谁.都必须经过创建、显示、隐藏、销毁.从上面的层级关系中,父节点做了最基本的生命周期事件,子节点在父节点的基础上做了自有扩展.也可以理解为,所有的生命周期,都是已应用层为基石.“开枝散叶”的.

下面我们必须亮出官方文档的关系图.就更清楚了.如下所示

有何职能

从上面分层中.我们知道每个层级生命周期执行顺序,但理论还是要落地到可执行的生命周期函数中.

• 生命周期函数

  • 说明

    • 由程序框架提供的内置函数.会随着生命周期.依次执行.

  • 作用

    • 方便开发人员,在生命周期中,执行特定的操作.比如
      • 界面将要出现的时候,刷新状态.
      • 小程序将要出现的时候.刷新状态等等

  • 生命周期函数分为3类

    • 应用层

      注意:必须在app.js中执行调用.并且只能调用一次.

      函数	说明	举例
      onLaunch	初始化完成时触发,只触发一次	获取用户信息或者本地数据存储等等功能
      onShow	启动或后台切换到前台时触发	比如其他小程序打开自己小程序获取传参.重启播放器等
      onHide	从前台进入后台时触发	小程序退到后台.播放器暂停等
      onError	小程序发生脚本错误或执行错误时触发	收集错误日志.
      onpageNotFound	再打开不存在的界面的时候触发	可以跳转到404界面,也可以弹框提示用户
      onUnhandleRejection	未处理的 Promise 拒绝事件监听函数。
      onThemeChange	监听系统主题变化	可以让小程序主题跟随系统改变而改变.

    后台:是指当用户点击右上角关闭按钮,或者微信app退到后台并没有被系统杀死时触发. 前台:是指再次打开小程序,并没有删除小程序时触发.小程序是打开状态.微信从后台到前台的时候触发.

    • 页面层

      函数	说明	举例
      onLoad	界面加载完成时触发	请求数据,获取界面传值
      onShow	界面显示时触发	刷新数据
      onReady	界面初次渲染完成时触发	获取组件实例
      onHide	界面隐藏时触发	定时器或者播放器
      onUnload	界面销毁时触发	销毁蓝牙.

    • 组件层

      组件生命周期如下所示 一些需要注意的细节

      1. 相对重要的生命周期是created attached detached.
      2. 当组件刚被创建好的时候触发created方法,切记此时的this.data是Component构造器中定义的data.并非组件实例的data.所以此时,是不可以调用setData方法的.
      3. 当组件初始化后,且加载到树节点后,attached方法被触发.此时的就可以使用setData了.初始化的相关工作可以在这里进行了.
      4. 自2.2.3起,组件的生命周期可以在lifetimes字段内进行声明,当然lifetimes里的生命周期函数,优先级最高.如下所示

      
      Component({
       lifetimes: {
         
         created: function() {},
      
         attached: function() {},
      
       },
       // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
       created: function() {},
       attached: function() {},
      
      })
      

学习资料

• 微信官方文档