【小程序】页面路由触发的生命周期函数详解

一、页面路由、页面栈

个人看来，页面路由说白了就是页面跳转，也可以看作是页面入栈和出栈的过程。

官方文档中这样写到：（个人比较喜欢看图表的形式，因为比较清晰）

 

二、生命周期函数

小程序有5个生命周期函数：

1、onLoad()：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

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

3、onReady()：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。

4、onHide()：页面隐藏/切入后台时触发。 如navigateTo或底部 tab 切换到其他页面，小程序切入后台等。

5、onUnload()：页面卸载时触发。如redirectTo或navigateBack到其他页面时。

 

三、路由触发的生命函数

实际上官方文档上少了onReady()函数的调用，所以我在demo中把每个页面的生命周期函数都打印出来，方便我观察他们的生命周期函数的调用。

代码像下面这样：（很简单的几个代码文件）

想要代码的小伙伴可以从这儿下载：demo下载，然后自己观察。

 

下面是我总结的页面路由引发的生命周期函数的调用：

（与上面一样的场景：以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例。）

当前页面	路由后页面	触发的生命周期（按顺序）
A（首次进入A）		A.onLoad(), A.onShow()，A.onReady()
A	B	A.onHide(), B.onLoad(), B.onShow(), B.onReady()
B	A（再次打开）	B.onHide(), A.onShow()【此时并没有执行A.onLoad和A.onReady】
A（用wx.navigateTo方式进入B）	C	A.onHide(), C.onLoad(), C.onShow(), C.onReady()
C（返回A）	A	C.onUnload(), A.onShow()
A（用wx.redirectTo方式进入C）	C	A.onUnload(), C.onLoad(), C.onShow(), C.onReady()
C（用wx.switchTab方式进入B）	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D（从转发进入）	A	D.onUnload(), A.onLoad(), A.onShow()

 

上面例子中，我们可以看出：

总结1：只要是没进过的页面，第一次进入都会执行下面3个生命周期函数： onLoad(),onShow(), onReady()。

总结2：在当前页面重定向（例如：调用wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>）
或页面返回（例如：调用wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮）
或重启动（例如：调用wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>）时，
当前页面都会调用onUnload()方法。

总结3：页面第二次进入时，是不会调用onReady()方法的，除非该页面之前执行了onUnload()方法。