微信小程序页面路由,微信小程序页面栈路由方式

2017-12-22 作者：黄先生

页面路由

在小程序中所有页面的路由全部由框架进行管理。

框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：

getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

Tip：不要尝试修改页面栈，会导致路由以及页面状态错误。

对于路由的触发方式以及页面生命周期函数如下：

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		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		各种情况请参考下表
重启动	调用 API `wx.reLaunch` 或使用组件 `<navigator open-type="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：

更多微信小程序开发教程，可以关注hi小程序。