微信小程序出现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的变量值传递给ASP变量
Dec 10 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 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
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
JS获取父节点方法
2009/08/20 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
python和shell获取文本内容的方法
2018/06/05 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python对文件的操作方法汇总
2020/02/28 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
资产经营总监岗位职责
2013/12/04 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
2014年关工委工作总结
2014/11/17 职场文书
农村老人去世追悼词
2015/06/23 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
python基础之停用词过滤详解
2021/04/21 Python