页面生命周期函数
-
onLoad()
页面加载时候触发，一个页面只会调用一次，可以在onLoad的参数获取打开当前页面路径的参数。
-
onShow()
页面显示/切入前台触发。
-
onReady()
页面初次渲染完成时触发，一个页面只会调用一次。
-
onHide()
页面隐藏/切入后台时触发。
-
onUnload()
页面卸载时触发。
页面路由
页面栈
框架以栈的形式维护了当前所有页面。当路由切换的时候，页面栈表现如下：
| 路由方式 | 页面栈表现 |
|---|---|
| 初始化 | 新页面入栈 |
| 打开新页面 | 新页面入栈 |
| 页面重定向 | 当前页面出栈 ，新页面入栈 |
| 页面返回 | 页面不断出栈，直至目标返回页 |
| Tab切换 | 页面全部出栈，只留下新的Tab页面 |
| 重加载 | 页面全部出栈，只留下新的页面 |
可以使用getCurrentPages()函数获取当前页面栈。
路由方式
对于路由的触发方式以及页面生命周期函数如下：
| 路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
|---|---|---|---|
| 初始化 | 小程序打开的第一页面 | onLoad,onShow | |
| 打开新页面 | 调用API wx.navigateTo 使用组件 |
onHide | onLoad,onShow |
| 页面重定向 | 调用 API wx.redirectTo 使用组件 |
onUnload | onLoad, onShow |
| 页面返回 | 调用 API wx.navigateBack 使用组件 用户按左上角返回按钮 |
onUnload | onShow |
| Tab切换 | 调用API wx.switchTab 使用组件<navigator open-type="switchTab/>" 用户切换Tab |
各种情况请参考下表 | |
| 重启动 | 调用API wx.reLaunch 使用组件 |
onUnload | onLoad,onShow |
Tab切换对应的生命周期(以A、B页面为Tabbar页面，C页面是从A页面打开的页面，D页面是从C页面打开的页面为例)：
| 当前页面 | 路由后页面 | 触发的生命周期(按顺序) |
|---|---|---|
| A | A | Nothing happend |
| A | B | A.onHide(),B.onLoad(),B.onShow() |
| A | B(再次打开) | A.onHide(),B.onShow() |
| C | A | C.onUnload(),A.onShow() |
| C | 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() |
| D(从转发进入) | B | D.onUnload(),B.onLoad(),B.onShow() |
Tips:
- navigateTo,redirectTo只能打开非tabBar页面。
- switchTo只能打开tabBar页面。
- reLaunch可以打开任意页面。
- 页面底部的tabBar由页面决定，只要是定义为tabBar的页面，底部都有tabBar。
- 调用页面路由带参数可以在目标页面的onLoad中获取。
