如何「掏空」小程序的五层页面限制? | 技术宝典

知晓程序注:

很多开发者在面对小程序的五层页面限制时,大概都会想起下面这首歌。

知晓程序(微信号 zxcx0101)现在就告诉你们,怎样狠狠把这五层页面榨干。

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

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

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

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

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

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

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

不过上述五层的限制只是针对 navigateToredirectTo 则无此限制。因为 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)

原文发表时间:2016-12-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(下)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

1294
来自专栏hotqin888的专栏

ppt(Powerpoint)中插入swf(flash)动画方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1072
来自专栏DeveWork

为 WordPress 后台管理菜单自定义排序

在对WordPress 进行二次开发时候,可能需要对 WordPress 后台管理菜单自定义排序,后台管理菜单默认的顺序是文章-多媒体-页面-评论-外观……;还...

2379
来自专栏Keegan小钢

Android样式的开发:Style篇

前面铺垫了那么多,终于要讲到本系列的终篇,整合所有资源,定义成统一的样式。 哪些该定义成统一的样式呢?举几个例子吧:

882
来自专栏Java成神之路

博客园_01_为博客园添加目录的方法总结

本文转自:作者:妙音天女    地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html

832
来自专栏王磊的博客

react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

前言:   目前关于rn比较知名并且封装好的图片选择控件很多,不过能同时支持多图片上传,个数控制兼容iOS/Ad的却寥寥无几,而今天介绍的这款框架可以实现:图片...

44214
来自专栏前端人人

React第三方组件5(状态管理之Redux的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

2554
来自专栏积累沉淀

JavaScript事件

JavaScript事件 对于事件来讲,首先,我们需要了解这样几个概念:事件;事件处理程序;事件类型;事件流;事件冒泡;事件捕获;事件对象;事件模拟,事件方面的...

2286
来自专栏京东技术

Vue拖拽组件开发实例

vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子,来分析Vue组件化相关知识。

78313
来自专栏Windows Community

Windows 8.1 应用再出发 (WinJS) - 几种新增控件(2)

上篇我们介绍了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand、BackButton、Hub、ItemContainer,本篇...

3166

扫码关注云+社区