微信小程序出现wx.navigateTo页面不跳转问题的解决方法


Posted in Javascript onDecember 26, 2017

本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法。分享给大家供大家参考,具体如下:

今天在做微信小程序的时候,做的商品购买流程。流程是这样的:

商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面。

但是在支付成功之后,点击按钮跳转,发现怎么也跳转不了到订单详情页面,前后log都能打印出来,证明已经执行了wx.navigateTo方法,但是跳转不成功,而且,坑爹的是也不报错。

翻看微信小程序开发文档,参考链接:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigatetoobject

其中有一行提到:

微信小程序出现wx.navigateTo页面不跳转问题的解决方法

就是这一句:“注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。”数一数我的跳转页面,当然你可以可以看微信开发者工作的预览视图右上角,会出现您当前调试的页面有5个这样的提示。

再贴一下我的页面跳转情况:

① 商品展示-->② 商品详情-->③ 下单页面-->④ 下单详情页面-->⑤ 支付结果页面-->⑥ 跳转订单详情页面

就在最后一步的时候已经跳转不过去了,此时前面已经使用wx.navigateTo跳转了五个页面,刚好达到限制。

然后我试着在下单页面跳转到下单详情页面的时候换用:wx.redirectTo()方法跳转,然后再编译执行,发现跳转到订单详情页面成功。然后我把一些不需要返回之后还回到当前页面的跳转换成了wx.redirectTo()来跳转,解决了wx.navigateTo跳转不成功的问题。

wx.redirectTo()方法,是打开新的页面,并关闭当前的页面。这个理解起来可以使用android的启动模式来理解。就像一个水桶,可以说一个栈,这个桶只能装得下5个西瓜,本来水桶是没有西瓜的,然后我们打开一个页面使用wx.navigateTo方法启动的时候,就往水桶里边扔一个西瓜,这样五个满了之后,再打开新的页面,再往水桶里边扔西瓜,那肯定是装不下的了。如果我们使用的是wx.redirectTo(),当我们打开一个新页面时,也会往桶里扔一个西瓜,然后会把当前的这个在桶里的西瓜,吃掉,这样就留出了空间。

所以,在微信小程序页面跳转中,如果当前的页面,在跳转之后是不必要的,没有返回到这个页面的需求的时候,尽量使用wx.redirectTo()来跳转打开新的页面,避免出现上述的问题。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
javascript不可用的问题探究
Oct 01 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
javascript实现数字时钟效果
Feb 06 Javascript
Webpack实战加载SVG的方法
Dec 26 #Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 #Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 #Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 #Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 #Javascript
You might like
PL-880隐藏功能
2021/03/01 无线电
初品cakephp 入门基础
2012/02/16 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
accesskey 提交
2006/06/26 Javascript
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
公务员职业生涯规划书范文  
2014/01/19 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
租车协议书范本
2014/04/22 职场文书
主题党日活动总结
2014/07/08 职场文书
材料化学专业求职信
2014/07/15 职场文书
护士工作心得体会
2016/01/25 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
详解Python flask的前后端交互
2022/03/31 Python