微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由

Posted 2021-01-22 逍遥云天

前言：

对于小程序的页面路由，如果没有一定开发经验的话，理解起来还是会有些困难的。哪怕是有一定小程序开发经验的开发者，能够完全理解掌握的恐怕也不多。

这里就以另外一种方式来详细的介绍小程序的页面栈及路由方式，相信看了本文你能更深入的了解小程序的页面路由的。

模拟场景：

小程序的页面路径基本上都可以用PC端浏览器来模拟，如：

小程序页面栈	类似于	浏览器页面栈
小程序的初始化（新页面入栈）	———	打开浏览器默认加载首页
小程序打开新页面（新页面入栈）	———	浏览器在新标签中访问网址或者点击当前页面链接新标签页打开页面
页面返回（当前页面出栈，新页面入栈）	———	浏览器返回上一页
。。。。。。

如果说小程序的官方文档比较抽象，那么转换成浏览器来理解就应该容易的多了。

下面会结合官方相关文档，以浏览器为例进行详细解析。

页面路由：

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

页面栈：

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

路由方式	页面栈表现	pc端浏览器模拟
初始化（打开小程序，进入首页）	新页面入栈	打开浏览器自动打开默认首页
打开新页面	新页面入栈	1. 浏览器打开新标签页访问网址； 2. 他页面中点击链接新窗口打开页面
页面重定向	当前页面出栈，新页面入栈	1. 当前页面点击链接在当前页面打开； 2. 当前页面地址栏输入其他网址访问； 3. 在当前页面点击书签栏中的书签（设置在当前页面打开书签）
页面返回	页面不断出栈，直到目标返回页	点击浏览器的返回按钮返回上一页
Tab 切换	页面全部出栈，只留下新的 Tab 页面	这个可能有点不好理解，不过还是可以用浏览器解释的： 小程序的Tab页可看做一个浏览器打开的不同窗口，这些窗口相互之间不影响，从Tab页打开其他非Tab页面可看做在浏览器一个窗口页面中在当前页面进入其他页面，从这个角度来看，就容易理解的多了
重加载	页面全部出栈，只留下新的页面	这个就不太好举例了，可以理解为重启浏览器，只不过重启后可以打开指定页面

如果还是有点看不懂，下边将会在路由方式中进行详细介绍：

路由方式：

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

路由方式		路由前页面	路由后页面	浏览器模拟
初始化	小程序首页		onLoad, onShow	浏览器打开的第一个页面初次加载
打开新页面	wx.navigateTo	onHide	onLoad, onShow	在浏览器新标签页中打开新页面都会隐藏上一页并加载新页面
页面重定向	wx.redirectTo	onUnload	onLoad, onShow	浏览器页面中打开新的页面
页面返回	wx.navigateBack	onUnload	onShow	当前页面内打开新页面，点击返回按钮会销毁新页面，返回显示上一页
Tab 切换	wx.switchTab		各种情况请参考下表
重启动	wx.reLaunch	onUnload	onLoad, onShow	销毁所有页面重启浏览器，打开加载新页面

这里尤其需要注意的就是Tab页了，对于小程序的Tab页与普通页面有很大的区别的，最常用的就是只能使用wx.switchTab来跳转到Tab页面，否则，超链接将无法进行跳转。

对于Tab页，可以理解为浏览器的不同的标签页，不同标签页之间相互无影响，可以在新的标签页中打开新页面，也可以在已打开标签页内打开新的页面，下边将结合官方文档中关于Tab 切换对应的生命周期进行详细解析。

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()	切回A页面，然后再点B页面，那么A隐藏，B显示
C	A	C.onUnload(), A.onShow()	C页面由A页面进入，则C页面进入A页面，C页面销毁，A页面显示
C	B	C.onUnload(), B.onLoad(), B.onShow()	这个就不好用浏览器来解释了，表格后边直接用小程序Tab页来细说
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()	这个就不好用浏览器来解释了，表格后边直接用小程序Tab页来细说
D（从转发进入）	A	D.onUnload(), A.onLoad(), A.onShow()	D页面入口还是A页面，所以这个同C-->A
D（从转发进入）	B	D.onUnload(), B.onLoad(), B.onShow()	同C-->B

对于C-->B可以这样理解：

 如上，Tab页中都会显示导航栏的，C页面由Tab A进入，则由C页面通过wx.switchTab打开Tab B的时候，Tab B页面就会显示导航栏，也就是回到了Tab A/Tab B入口了。

这样就可以理解为Tab A页内打开的页面打开其他Tab页的时候会销毁当前页面并重新加载其他即将打开的Tab页，这个可能有点绕，可以看下边的脑图：

注：

1. 上边脑图系实例验证得出，建议最好是自己写个完整的demo验证下，如果能按这个完整走一遍，相信你对Tab 切换对应的生命周期会有不一样的理解。

2. 上面例子中仅使用了 wx.navigateTo 和 wx.switchTab 两个 页面跳转Api,仅在验证Tab切换生命周期，感兴趣的可以自行验证其他路由跳转方式。

示例代码：

https://developers.weixin.qq.com/s/FGRKgcmu7Y4U