微信小程序生命周期详解

    在我看来小程序的生命周期虽然简单,但是他渗透了小程序开发的整个过程,对于小程序开发人员来说这是十分重要的,我们应该深入理解他。首先我们来看下小程序开发文档中的生命周期图。

以下是官网给出的生命周期状态图

微信小程序生命周期详解_第1张图片

微信小程序生命周期详解_第2张图片

    为了更好地理解小程序生命周期我们也需要知道小程序路由。

小程序路由

    小程序以栈的形式维护页面当路由发生变化时页面栈的表现如下:

微信小程序生命周期详解_第3张图片

实际操作

1、页面A入栈

微信小程序生命周期详解_第4张图片

注: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;

    在这里我没有把switchTab和reLaunch的例子列举出来,因为原理都一样,大家可以先去看下文章上面的小程序路由那张图,然后查找这些操作对应的出栈和入栈情况便可以知道相应触发的生命周期。




你可能感兴趣的:(微信小程序)