微信小程序生命周期详解
在我看来小程序的生命周期虽然简单,但是他渗透了小程序开发的整个过程,对于小程序开发人员来说这是十分重要的,我们应该深入理解他。首先我们来看下小程序开发文档中的生命周期图。
以下是官网给出的生命周期状态图
为了更好地理解小程序生命周期我们也需要知道小程序路由。
小程序路由
小程序以栈的形式维护页面,当路由发生变化时页面栈的表现如下:
实际操作
1、页面A入栈
注:onReady是在onShow之后触发;
onReady和onLoad一样只在页面入栈时渲染一次;
2、页面A->页面B(通过redirectTo跳转,A页面出栈,B页面入栈)
A页面触发onUnload(注意,此处没有触发onHide);
B页面触发onLoad、onShow、onReady;
3、页面A->页面B(通过navigationTo跳转,A页面不出栈,B页面入栈)
A页面触发onHide;
B页面触发onLoad、onShow、onReady;
4、页面A->页面B,当页面B回到页面A(通过navigationBack返回,下面是:页面B回到页面A时触发的)
B页面触发onUnload;
A页面触发onShow;
5、页面A出栈
页面A触发onUnload;
6、页面A->页面B->页面A(通过navigationTo跳转,下面是:页面B跳到页面A时触发的)
B页面触发onHide;
A页面触发onLoad、onShow、onReady;
注:此时栈为ABA三个页面,第一个页面A没有出栈。
用文字来描述的话大家可能觉得乱乱的,下面我们用表格来呈现它
注:以下中:跳到指navigateTo,重定向指redirectTo,返回指navigateBack。
当前页面 |
路由栈(栈底->栈顶) |
操作 |
触发的生命周期(按顺序) |
A |
A |
进入A页面 |
A.onLoad;A.onShow;A.onReady; |
B |
AB |
跳到B |
A.onHide; B.onLoad;B.onShow;B.onReady; |
C |
AC |
重定向到C |
B.onUnload; C.onLoad;C.onShow;C.onReady; |
D |
ACD |
跳到D |
C.onHide; D.onLoad;D.onShow;D.onReady; |
E |
ACDE |
跳到E |
D.onHide; E.onLoad;E.onShow;E.onReady; |
D |
ACD |
回到D |
E.onUnload; D.onShow; |
A |
ACDA |
跳到A |
D.onHide; A.onLoad;A.onShow;A.onReady; |