微信小程序出现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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
js实现两点之间画线的方法
May 12 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
使用PHP编写的SVN类
2013/07/18 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
javascript第一课
2007/02/27 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
python序列化与数据持久化实例详解
2019/12/20 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
python的链表基础知识点
2020/09/13 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
python 操作excel表格的方法
2020/12/05 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
客服专员岗位职责
2014/02/28 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
使用JS实现简易计算器
2021/06/14 Javascript