navigate 如何突破小程序的五层页面限制？

Posted 2020-09-16 愤怒的小学生

微信小程序中的页面导航 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 的区别在于：

• navigateTo 不会将旧页面出栈；

• redirectTo 会将旧页面出栈，再将需要跳转到的页面入栈；

• navigateBack 则是将页面栈最后一个元素出栈，因此倒数第二个元素会成为最后一个元素，即变成「当前页面」。

结合下面一个例子可以对上面的内容有更好的理解：有一个小程序包含 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，回复「上手」获取全网最值得看的小程序