微信小程序出现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 相关文章推荐
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
JavaScript数组操作详解
Feb 04 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
用文本文件制作留言板提示(上)
2006/10/09 PHP
php 保留字列表
2012/10/04 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python如何进行矩阵运算
2020/06/05 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
个人自我鉴定总结
2014/03/25 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
公证书
2019/04/17 职场文书
创业计划书之熟食店
2019/10/16 职场文书
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL