微信小程序出现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声明变量时为什么要加var关键字
Sep 29 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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/02 无线电
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
基于initPHP的框架介绍
2013/04/18 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Linux下多个Python版本安装教程
2018/08/15 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
速比涛英国官网:Speedo英国
2019/07/15 全球购物
母亲七十大寿答谢词
2014/01/18 职场文书
事务机电主管工作职责
2014/02/25 职场文书
小学开学典礼主持词
2014/03/19 职场文书
六年级学生评语
2014/04/22 职场文书
2014年三万活动总结
2014/04/26 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
2014年关工委工作总结
2014/11/17 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android