微信小程序出现wx.navigateTo页面不跳转问题的解决方法

 更新时间:2017年12月26日 11:28:19   作者:Tiramisu_C  
这篇文章主要介绍了微信小程序出现wx.navigateTo页面不跳转问题的解决方法,简单分析了微信小程序出现wx.navigateTo页面不跳转情况的原因及相应的解决方法,需要的朋友可以参考下

本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法。分享给大家供大家参考,具体如下:

今天在做微信小程序的时候,做的商品购买流程。流程是这样的:

商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面。

但是在支付成功之后,点击按钮跳转,发现怎么也跳转不了到订单详情页面,前后log都能打印出来,证明已经执行了wx.navigateTo方法,但是跳转不成功,而且,坑爹的是也不报错。

翻看微信小程序开发文档,参考链接:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigatetoobject

其中有一行提到:

就是这一句:“注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。”数一数我的跳转页面,当然你可以可以看微信开发者工作的预览视图右上角,会出现您当前调试的页面有5个这样的提示。

再贴一下我的页面跳转情况:

① 商品展示-->② 商品详情-->③ 下单页面-->④ 下单详情页面-->⑤ 支付结果页面-->⑥ 跳转订单详情页面

就在最后一步的时候已经跳转不过去了,此时前面已经使用wx.navigateTo跳转了五个页面,刚好达到限制。

然后我试着在下单页面跳转到下单详情页面的时候换用:wx.redirectTo()方法跳转,然后再编译执行,发现跳转到订单详情页面成功。然后我把一些不需要返回之后还回到当前页面的跳转换成了wx.redirectTo()来跳转,解决了wx.navigateTo跳转不成功的问题。

wx.redirectTo()方法,是打开新的页面,并关闭当前的页面。这个理解起来可以使用android的启动模式来理解。就像一个水桶,可以说一个栈,这个桶只能装得下5个西瓜,本来水桶是没有西瓜的,然后我们打开一个页面使用wx.navigateTo方法启动的时候,就往水桶里边扔一个西瓜,这样五个满了之后,再打开新的页面,再往水桶里边扔西瓜,那肯定是装不下的了。如果我们使用的是wx.redirectTo(),当我们打开一个新页面时,也会往桶里扔一个西瓜,然后会把当前的这个在桶里的西瓜,吃掉,这样就留出了空间。

所以,在微信小程序页面跳转中,如果当前的页面,在跳转之后是不必要的,没有返回到这个页面的需求的时候,尽量使用wx.redirectTo()来跳转打开新的页面,避免出现上述的问题。

希望本文所述对大家微信小程序开发有所帮助。

相关文章

  • javascript判断并获取注册表中可信任站点的方法

    javascript判断并获取注册表中可信任站点的方法

    这篇文章主要介绍了javascript判断并获取注册表中可信任站点的方法,可实现针对域名和IP的可信任站点判断功能,需要的朋友可以参考下
    2015-06-06
  • JS+html5实现异步上传图片显示上传文件进度条功能示例

    JS+html5实现异步上传图片显示上传文件进度条功能示例

    这篇文章主要介绍了JS+html5实现异步上传图片显示上传文件进度条功能,结合完整实例形式分析了JavaScript前端结合HTML5实现post文件上传与进度条显示相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • 微信小程序实现多行文字滚动

    微信小程序实现多行文字滚动

    这篇文章主要为大家详细介绍了微信小程序实现多行文字滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法

    bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法

    这篇文章主要介绍了bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法 ,本文给大家分享几种解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • H5实现中奖记录逐行滚动切换效果

    H5实现中奖记录逐行滚动切换效果

    这篇文章主要为大家详细介绍了H5实现中奖记录逐行滚动切换效果,利用定时器实现中奖记录逐行展示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • webpack5的loader配置小白学习篇

    webpack5的loader配置小白学习篇

    这篇文章主要为大家介绍了webpack5的loader配置非常适合webpack入门的小白学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 用js通过url传参把数据从一个页面传到另一个页面

    用js通过url传参把数据从一个页面传到另一个页面

    如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层
    2014-09-09
  • JavaScript常用脚本汇总(二)

    JavaScript常用脚本汇总(二)

    本文给大家分享的javascript常用脚本有把JavaScript中的伪数组转换为真数组、JavaScript设置主页功能、JavaScript收藏功能、javascript检测元素是否支持某个属性代码、创建和使用命名空间,有需要的小伙伴们快来看看吧。
    2015-03-03
  • 利用JS十分钟判断数组中存在元素的多种方式

    利用JS十分钟判断数组中存在元素的多种方式

    这篇文章主要给大家介绍了关于利用JS十分钟判断数组中存在元素的多种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • ES6中箭头函数的定义与调用方式详解

    ES6中箭头函数的定义与调用方式详解

    这篇文章主要给大家介绍了关于ES6中箭头函数的定义与调用方式的相关资料,文中通过示例代码介绍的非常详细,相信会对大家的学习或者工作带来一定的帮助,需要的朋友们下面来一起看看吧。
    2017-06-06

最新评论