微信小程序出现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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
JavaScript中实现块作用域的方法
Apr 01 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
vue element-ui读取pdf文件的方法
Nov 26 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
js 浮动层菜单收藏
2009/01/16 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
js实现简易拖拽的示例
2020/10/26 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python实现360皮肤按钮控件示例
2014/02/21 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
个人求职信范文分享
2013/12/13 职场文书
技能竞赛活动方案
2014/02/21 职场文书
个人求职信格式范文
2015/03/20 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记