一、页面路由、页面栈
个人看来,页面路由说白了就是页面跳转,也可以看作是页面入栈和出栈的过程。
官方文档中这样写到:(个人比较喜欢看图表的形式,因为比较清晰)
二、生命周期函数
小程序有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()方法。