微信小程序页面路由原理

姚静

摘要：小程序的开发方兴未艾，本文以图解的形式详细剖析了小程序开发中的页面栈及页面路由原理，对于该原理的深入理解有助于开发者更好地理解小程序的开发框架，更好地开发出功能强大的小程序。

关键词：小程序;Mini Program;页面栈;路由

中图分类号：TP3      文献标识码：A

文章编号：1009-3044（2019）28-0054-02

微信小程序（以下简称小程序）也叫Mini Program，是腾讯公司在2017年推出的一种不需要下载安装即可使用的轻应用，小程序基于用户量超10亿的微信平台，以其无须下载和卸载、随时可用、无处不在等简洁特点，一经推出便引起轰动，短短一两年时间便呈现出爆发增长的态势，越来越多的用户接受并使用小程序，越来越多的开发者加入小程序的开发之中。

小程序的开发基于Web技术，与传统的Web开发（如网页）有很多相似之处，因此有Web开发经验的开发者可以很容易地掌握小程序开发技术。但小程序作为轻应用的本质，决定了其短小精干、功能受限等有别于传统Web开发的特点，这些技术特点又导致了在跨进小程序开发的门槛时，传统Web开发者的很多技术经验往往成为理解障碍而非助力，这其中最为典型的一个核心概念便是小程序的页面路由。

众所周知，传统Web开发基于HTML+CSS编写的Web页面，典型呈现就是我们熟知的浏览器，在浏览器中我们点击页面上的超链接可以跳转到另一个页面，也可以点击回退回到上一个页面，循环往复，无穷无尽，换句话讲，可以有无限个页面;而在小程序中，由于其Mini的特点，小程序多能占用的资源是严格受限的，每个小程序包括图片、样式、页面、代码等最大不能超过2MB（如果加上扩展包最大为4MB），这决定了小程序的页面个数不是不限的，而是严格受限的，且页面之间的跳转也与传统Web页面有很大差异，这样一套机制在小程序中称为页面栈。

1 页面栈

软件开发者均知道，栈是一种先进后出的数据结构，在小程序体系中，页面栈便是一种采用栈结构维护页面与页面之间关系的框架，该栈的容量最大为5，这意味着在小程序中，可以同时存在的页面最多为5个。

小程序中页面之间的跳转被称为路由，页面路由有严格的规定和限制，所有页面的路由均由页面栈框架进行管理，当发生路由切换的时候，页面栈的表现如下：

上表中的打开新页面、页面重定向、页面返回、Tab切换、重启动，在小程序中分别对应wx.navigateTo、wx.redirectTo、wx.navigateBack、wx.switchTab、wx.reLaunch等API，这些API是在小程序开发中最常用的功能，它们背后的逻辑以及事件触发均与页面栈紧密相关，只有对这些细节了如指掌，才能真正驾驭小程序的开发，下面便详细剖析上述几种页面流转与页面栈变化的关系，为简洁起见略去页面流转过程中的事件触发，读者可在熟悉页面栈之后阅读官方文档进一步了解。

2 页面路由原理

假设我们有一个小程序，其首页页面为A，另外还有B、C、D、E、F、G等六个页面。

打开小程序：用户打开一个小程序时，小程序的首页页面入栈，页面栈大小变为1;

1）wx.navigateTo：该API通常在响应用户点击界面时打开一个新页面，该新页面入栈，页面栈大小加1;当反复调用该API后页面栈大小不断增大，当页面栈大小为5时，调用该API将无效，此时的呈现效果即为用户点击界面却无法正常打开对应的新页面，这是很多刚开始小程序开发的开发者经常遇到的一个问题，只有详细了解了页面栈及页面路由的原理才可以解决这个问题;以下为wx.navigateTo的两种常见用例：

用例1：在首页A打开页面B，在页面B打开页面C，在页面C打开页面D，在页面D打开页面E，在页面E打开页面F：

该用例与用例1不同之处在于，在页面D重复打开了页面B，此时虽然页面B在页面栈中，但仍会打开一个新页面B并入栈，页面栈大小依然加一，此时页面栈中有2个页面B，这2个页面B是彼此独立的（也即可以拥有不同的数据及呈现），这是很重要的一点，也是很多开发者容易困惑之处。

2）wx.redirectTo：该API通常在响应用户点击界面时重定向到一个新页面，原页面出栈，该新页面入栈，页面栈大小不变，以上面的用例1为例，在页面E重定向到页面F：

3）wx.navigateBack：该API与传统Web浏览器中的页面回退很相似，其 delta參数决定当前页面栈弹出几个页面（即页面栈大小减小几），弹出之后的栈顶页面作为当前呈现页面，以下为图例：

相对于上述三个API，wx.switchTab和wx.reLaunch的逻辑则相对简单，限于篇幅不再赘述。

3 结语

微信小程序依托于拥有庞大用户群的微信平台，以其简洁的特点和强大的功能，正在成为移动互联网的下一个风口浪尖，而透彻理解小程序页面路由原理，对于小程序开发者是必不可少的一课，本文通过图解用例，详细剖析了小程的页面栈及路由细节，读者在掌握该原理细节的基础之上，可以大大提高开发效率，为小程序的生态发展添砖加瓦。

参考文献：

[1] 微信官方文档[EB/OL]. https：//developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

[2] 熊普江，谢宇华.小程序，巧应用[M].北京：机械工业出版社，2017.

[3] 雷磊.微信小程序开发入门与实践[M].北京：清华大学出版社，2017.

【通联编辑：张薇】