如何「掏空」小程序的五层页面限制？

爱范儿 • 7年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

知晓程序注：

很多开发者在面对小程序的五层页面限制时，内心大概都是崩溃的。

不用慌，知晓程序（微信号 zxcx0101）今天用这篇文章来告诉你们，怎样狠狠把这五层页面榨干。

微信小程序中的页面导航 API 有三个，两个跳转新页面的 API 分别为 wx.navigateTo 和 wx.redirectTo ，还有一个 API 名为 wx.navigateBack ，它用于返回页面。

wx.navigateBack 在小程序的初始版本中只能回到上一个页面，在最新版本（0.10.102800）的更新中给 navigateBack 添加了一个参数 delta ，用于决定需要返回几层页面。

navigator 组件的默认跳转方式与 wx.navigateTo 相同，而如果添加 redirect 属性，则与 wx.redirectTo 的跳转方式相同。

navigateTo 在官方文档中描述如下：

保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面。

通过 navigateTo 跳转后，可点击左上角的按钮返回上一个页面。而如果多次调用 navigateTo 之后，就需要返回多次才能回到初始页面。因此，官方在此处有一个限制。

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

不过上述五层的限制只是针对 navigateTo ， redirectTo 则无此限制。因为 redirectTo 的行为是：

关闭当前页面，跳转到应用内的某个页面。

通过 redirectTo 跳转后，则无法返回跳转前的页面。但并不是无法调用 navigateBack ，而是调用之后，会回到使用 redirectTo 跳转前的上一个页面（此点如果不理解，下面我们会举例详细介绍）。

结合页面栈这个概念可以将上述的「页面路径」和页面层数有更好的理解。

页面栈可以通过 getCurrentPages 方法获取：

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

上述的「页面路径」可以对应为页面栈中的元素，页面栈中的最后一个元素就是当前显示的页面，页面跳转就是新页面入栈的过程。

上述三种页面 API 的区别在于：

结合下面一个例子可以对上面的内容有更好的理解：

有一个小程序包含 A、B、C、D 四个页面，A 页面为首页。小程序启动后，在 A 页面中，我们通过 navigateTo 跳转到 B 页面，然后在 B 页面中再通过 navigateTo 跳转到 C 页面。

此时页面栈中就会包含三个元素，分别为 A、B、C 三个页面。而此时如果通过 redirectTo 跳转到 D 页面， redirectTo 会将当前页面出栈，即将 C 页面出栈，再将 D 页面入栈，这时候，页面栈中的元素则会变为 A、B、D。

此时如果在 D 页面调用 navigateBack ，会发现不是返回 C 页面，而是返回到了 B 页面。因为 navigateBack 将栈中最后一个元素（D 页面）出栈后，页面栈的内容则变为 A、B。页面栈最后一个元素为 B 页面，即当前显示的会是 B 页面。

而上述「页面路径」限制为五层，其实就是规定了页面栈中的元素不能超过五个。页面栈中元素达到五个后，就不能增加了。

navigateTo 不会将旧页面出栈，因此通过 navigateTo 跳转后，页面栈中元素个数会加一，因此在页面栈中元素个数达到 5 之后再调用 navigateTo 会失败，出现无法跳转的错误。

而 redirectTo 会在将旧页面出栈后，再将新页面入栈，因此通过 redirectTo 跳转，页面栈中元素个数会保持不变，因此即使在页面栈中元素达到 5 个之后再调用 redirectTo 也能成功跳转。

以上就是知晓程序（微信号 zxcx0101）带来的页面层级三个 API 的解析文章。开发者需要在微信中，善加对这三个 API 的利用，以便能充分利用微信的五层页面限制。

本文由知晓程序原创出品，关注微信号 zxcx0101，回复「上手」获取全网最值得看的小程序上手体验系列文章。

快速关注知晓程序↓↓↓

如何「掏空」小程序的五层页面限制？知晓程序（微信号 zxcx0101）是爱范儿旗下专注于小程序生态的公众号。我们提供最全面、新鲜的小程序资讯（消息、观点、指南、活动）和服务，在这里你能了解到关于小程序的一切。