如何跳出小程序五级页面的限制
前言:做小程序开发,就要在微信的规则内玩耍。最近做的小程序经常会有个报错:RangeError: Maximum call stack size exceeded。这意思是说小程序页面超过5级跳转了,应该怎么解决呢?
微信小程序官方文档中,关于页面的跳转,有三个API,两个跳转新页面的 API 分别为 wx.navigateTo
和 wx.redirectTo
,还有一个 API 名为 wx.navigateBack
,它用于返回上级页面。
wx.navigateBack
在小程序的初始版本中只能回到上一个页面,在最新版本(0.10.102800)的更新中给 navigateBack
添加了一个参数 delta
,用于决定需要返回几层页面。
navigator
组件的默认跳转方式与 wx.navigateTo
相同,而如果添加 redirect
属性,则与 wx.redirectTo
的跳转方式相同。
wx.navigateTo
在官方文档中描述如下:
保留当前页面,跳转到应用内的某个页面,使用
wx.navigateBack
可以返回到原页面。
通过 navigateTo
跳转后,可点击左上角的按钮返回上一个页面。而如果多次调用 navigateTo
之后,就需要返回多次才能回到初始页面,这种交互更像是客户端打开一个新的view。因此,官方在此处有一个限制(最多五级)。
注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。
不过上述五层的限制只是针对 navigateTo
,redirectTo
则无此限制。因为 redirectTo
的行为是:
关闭当前页面,跳转到应用内的某个页面。
因此,当页面个数超过五层时,应该用redirectTo来替换navigateTo,就可以避免Maximum call stack size exceeded的异常,但是redirectTo关闭当前页面的做法,有些场景并不适用,比如,从列表页进详情页面,如果进入详情页面时,关闭列表页面,再次back时,就没办法回到列表页面。
通过 redirectTo
跳转后,只是无法返回跳转前的页面,但并不是无法调用 navigateBack
,而是调用之后,会回到使用 redirectTo 跳转前的上一个页面。
页面栈可以通过 getCurrentPages
方法获取:
getCurrentPages()
函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
这个方法也比较适用,在多层页面跳转中,你可能会用的到。
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能
- 表格可在线编辑效果
- CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应
- JS网页顶部弹出可关闭广告图层
- 未来会不会出现人类大脑与人工智能进行链接,而产生的超级大脑?
- android布局文件中android:icon="?attr/menuIconCamera"找不到对应图标路径
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(1)表结构
- Centos7修改默认网卡名(改为eth0)以及网卡启动报错RTNETLINK answers: File exists处理
- 通过企业分布式缓存共享运行时数据
- 移植SlidingMenu Android library,和安装example出现的问题解决
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(2)插入记录
- Centos中yum方式安装java
- 微信小程序新革命催生新物种新物种带来大红利!玩转行业新玩法
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(3)删除记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Tensorflow–取tensorf指定列的操作方式
- spring-boot-route(一)Controller接收参数的几种方式
- python中 _、__、__xx__()区别及使用场景
- 浅谈TensorFlow中读取图像数据的三种方式
- python 最简单的实现适配器设计模式的示例
- spring-boot-route(二):读取配置文件的几种方式
- 关于tensorflow softmax函数用法解析
- keras的backend 设置 tensorflow,theano操作
- spring-boot-route(三)实现多文件上传
- PHP attributes()函数讲解
- PHP children()函数讲解
- spring-boot-route(四)全局异常处理
- PHP registerXPathNamespace()函数讲解
- Python闭包装饰器使用方法汇总
- spring-boot-route(五)整合Swaager2生成接口文档