微信小程序出现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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
实现无刷新联动例子汇总
May 20 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 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
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Django的分页器实例(paginator)
2017/12/01 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python正则表达式和元字符详解
2018/11/29 Python
详解Python self 参数
2019/08/30 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
自主实习接收函
2014/01/13 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python