微信小程序开发页面路由
作者: --时间: 2022-09-29
阅读量:
微信小程序页面路由——让你的应用更加灵活高效
在开发小程序时,我们需要对其生命周期及页面路由有所了解,而页面路由是小程序中非常重要的一部分。它可以帮助我们精细地控制用户的操作路径,增强用户体验以及提升交互性。
1. 页面栈
所有页面在小程序中均由框架进行管理,并以栈的形式维护当前所有的页面。当进行路由切换时,页面栈会按照不同的方式进行变化。常见的页面栈变化方式及表现如下:
| 路由方式 | 页面栈表现 |
|---|---|
| 初始化 | 新页面入栈 |
| 打开新页面 | 新页面入栈 |
| 页面重定向 | 当前页面出栈,新页面入栈 |
| 页面返回 | 页面不断出栈,直到目标返回页 |
| Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 |
| 重加载 | 页面全部出栈,只留下新的页面 |
开发者可以通过调用getCurrentPages()函数获取当前页面栈。该函数会返回一个按照栈顺序排列的数组,第一个元素为首页,最后一个元素为当前页面。
2. 路由方式及生命周期函数
路由方式主要指用户操作触发不同的路由事件,比如打开新页面、页面重定向、页面返回等。对于这些路由事件,小程序中也预置了一些生命周期函数。
| 路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
|---|---|---|---|
| 初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
| 打开新页面 | 调用API wx.navigateTo / 使用组件 navigator open-type="navigateTo" | onHide | onLoad, onShow |
| 页面重定向 | 调用API wx.redirectTo / 使用组件 navigator open-type="redirectTo" | onUnload | onLoad, onShow |
| 页面返回 | 调用API wx.navigateBack / 使用组件 navigator open-type="navigateBack" / 用户按左上角返回按钮 | onUnload | onShow |
| Tab 切换 | 调用API wx.switchTab / 使用组件navigator open-type="switchTab" / 用户切换Tab | 各种情况请参考下表 | |
| 重启动 |

