微信小程序生命周期与性能指标

标签:程序,生命,周期,性能,能指,指标 发布时间:2019年07月20日 点击5

本文将介绍微信小程序整个App的生命周期、单个页面的生命周期和组件的生命周期,并研究了这三个元素生命周期的关系,这在学习和开发过程中对理解小程序运行机制有紧张意义。最终,由生命周期整顿出小程序的关键指标活动策划,仅供参考。

App的生命周期

在app.js中有其生命周期相干的三个方法:onLaunch、onShow和onHide。

首先是onLaunch,这是整个小程序的第一个生命周期回调函数,在小程序初始化完成后调用。

接着,小程序将触发onShow事件形象代言费,假如小程序从后台切回前台后也会触发该事件。

最后,是小程序切到后台的事件onHide

Page的生命周期

在每个页面注册函数Page()的参数中,有生命周期的方法:onLoad、onShow、onReady、onHide、onUnload。

页面触发的第一个生命周期回调是onLoad,在页面加载的时候触发,其参数是页面的query参数,一个页面只有一次;

接着是onShow,监听页面的表现,与onLoad不同,假如页面被隐蔽后再次表现(例如:进入下一页后返回),也会触发该生命周期;

触发onShow之后,逻辑层会向渲染层发送初始化数据,渲染层完成第一次渲染之后,会关照逻辑层触发onReady生命周期,一个页面只有一次;

onHide是页面隐蔽但未卸载的时候触发的,如 wx.navigateTo 或底部tab切换到其他页面,小程序切入后台等。

onUnload是页面卸载时触发,如wx.redirectTo或wx.navigateBack到其他页面时。

Component的生命周期

组件最紧张的生命周期是created、attached、detached 网站制作报价,包含一个组件实例生命流程的最重要时间点。

首先,当组件实例刚被创建时, created生命周期被触发。此时,还不能调用setData 。 通常情况下,这个生命周期只应该用于给组件this添加一些自定义属性字段。

接着,在组件完全初始化完毕并且进入页面节点树后, attached生命周期被触发。此时, this.data 已被初始化为组件的当前值,绝大多数初始化工作可以在这个时机进行。

在组件脱离页面节点树后, detached生命周期被触发。退出一个页面时,假如组件还在页面节点树中,则 detached 会被触发。

此外,组件生命周期还有readymove生命周期豪沃A7驾驶室,分别在视图层布局完成和组件实例被移动到节点树另一个位置时实行。

团体周期

如今我们知道了App、Page、和Component分别的生命周期顺序,那么他们之间的生命周期顺序又是如何?通过开发一个简单的demo,观察运行效果,可以得到如下结论:

打开页面的情况

首先,前一个页面隐蔽,在加载下一个页面之前,必要先初始化新页面的组件。页面首次渲染之后,会触发组件的ready,最后触发的是页面的onReady,如下图:

从PageA打开pageB时的生命周期顺序

脱离页面的情况

脱离当前页面时,首先触发当前页面的卸载onUnload,接着是组件脱离节点树的detached。最后表现之前的页面,触发onShow。如下图:

从PageB返回到PageA的生命周期顺序

打开App的情况

App、Page与Component生命周期运行顺序,先从App加载然后再加载Page,在加载Page之前会先初始化该页面所用的所有组件,之后才触发页面的onLoad生命周期,如下图:

打开App时的生命周期顺序

切换到后台

切换到后台时,小程序和页面并没有卸载,只会触发隐蔽。先触发页面的onHide,接着是App的onHide。如下图:


切换到后台时的生命周期顺序

切换到前台

切换到后台时,小程序会先触发onShow,之后才是页面的onShow。如下图:

切换到前台时的生命周期顺序

关键性能指标

了解了小程序各个阶段的生命周期,我们可以制订出关键节点的性能指标,整顿如下表:

参考文档

  1. 官方文档 Page:developers.weixin.qq3564/miniprogram…

  2. 官方文档 App:developers.weixin.qq3564/miniprogram…

  3. 官方文档 页面生命周期:developers.weixin.qq3564/miniprogram…

  4. 官方文档 组件生命周期:developers.weixin.qq3564/miniprogram…

手机网站建设