微信小程序出现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 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue下的@change事件的实现
Oct 25 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 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
2006/11/25 PHP
php 页面执行时间计算代码
2008/12/04 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
php验证码生成代码
2015/11/11 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
python学习之编写查询ip程序
2016/02/27 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
python生成特定分布数的实例
2019/12/05 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
优秀应届生推荐信
2013/11/09 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
企业宣传方案
2014/03/04 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
初三英语教学计划
2015/01/23 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫