微信小程序出现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 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
用cssText批量修改样式
Aug 29 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
javascript中this关键字详解
Dec 12 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP中GET变量的使用
2006/10/09 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php实现分页显示
2015/11/03 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
给文字加上着重号的JS代码
2013/11/12 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
vue的基本用法与常见指令
2017/08/15 Javascript
Python绘制的二项分布概率图示例
2018/08/22 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
使用python实现滑动验证码功能
2019/08/05 Python
python银行系统实现源码
2019/10/25 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
PHP面试题附答案
2015/11/28 面试题
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
毕业生造价工程师求职信
2013/10/17 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
大学军训感言400字
2014/03/11 职场文书
小班开学寄语
2014/04/04 职场文书
委托证明书
2014/09/17 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
环卫个人总结
2015/03/03 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书