微信小程序出现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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
jquery form 加载数据示例
Apr 21 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JS实现拼图游戏
Jan 29 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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
收音机术语解释
2021/03/01 无线电
牡丹941资料
2021/03/01 无线电
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
js里的prototype使用示例
2010/11/19 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
部队学习十八大感言
2014/01/11 职场文书
三查三看党性分析材料
2014/02/18 职场文书
空乘英文求职信
2014/04/13 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
职工年度考核评语
2014/12/31 职场文书
商务司机岗位职责
2015/04/10 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
读书笔记怎么写
2015/07/01 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python