微信小程序出现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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 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面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
一年级班主任寄语
2014/01/19 职场文书
《锄禾》教学反思
2014/04/08 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
2014年法院工作总结
2014/11/24 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
mysql分表之后如何平滑上线详解
2021/11/01 MySQL