微信小程序出现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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
javascript插入样式实现代码
Feb 22 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
php与php MySQL 之间的关系
2009/07/17 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
修复ie8&chrome下window的resize事件多次执行
2011/10/20 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
python发送邮件功能实现代码
2016/07/15 Python
基于Django用户认证系统详解
2018/02/21 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
jupyter notebook清除输出方式
2020/04/10 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
主题团日活动总结
2014/06/25 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
医德医风自我评价
2014/09/19 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis