收藏
回答

连续调用wx.navigateTo会跳转失败

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug wx.navigateTo 客户端 7.0.3 2.6.0

问题概述


在wx.navigateTo的success回调函数中继续调用wx.navigateTo,页面跳转与预期不一致。


复现方法


1. 使用代码片段 https://developers.weixin.qq.com/s/PbxxKcmZ7Q7e

2. 点击页面中的navigate按钮,将会通过递归进行多次页面跳转,代码如下:


const NAVIGATE_COUNT = 5;
 
const navigate = (times) => {
  const url = `/page/index?times=${times}`;
  console.log('navigate to', url);
  wx.navigateTo({
    url,
    success(res) {
      console.log('success', times, res);
      if (times > 1) {
        navigate(times - 1);
      }
    },
    fail(res) {
      console.log('fail', times, res);
    }
  })
}
navigate(NAVIGATE_COUNT);

3. 在模拟器和iOS上,会出现页面历史丢失的现象(可以通过后退查看页面栈,会发现数量比预期的少);在Android上没有此问题

4. 点击页面中的navigate with timeout按钮,该按钮与前者的区别在于会在success后使用setTimeout延迟300ms再进行调用

success(res) {
  console.log('success', times, res);
  if (times > 1) {
    navigate(times - 1);
  }
},

5. 在模拟器/iOS/Android中均可以正常跳转

回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-灵芝
    社区技术运营专员-灵芝
    2019-03-28

    请问这样跳转的具体使用场景是什么?

    2019-03-28
    有用
    回复 3
    • Malash
      Malash
      2019-11-14
      以电商下单举例说明:
      1. 用户在PageA点击“支付按钮”,此时由于用户未登陆,将进入PageB进行登陆
      2. 用户在PageB上登陆完成,这个时候代码触发 wx.navigateBack 回到PageA
      3. 回到PageA后(即navigateBack的callback执行),代码立刻调用wx.navigateTo进入PageC,即真正的支付页面
      2019-11-14
      回复
    • Malash
      Malash
      2019-11-14
      在我们的测试过程中,发现wx.navigateBack和wx.navigateTo都会触发这个bug,代码片段中为了方便只使用了navigateTo,但navigateBack也是会有问题的
      2019-11-14
      回复
    • 社区技术运营专员-灵芝
      社区技术运营专员-灵芝
      2019-12-20回复Malash
      出现问题的具体是什么机型、微信版本号是多少?
      2019-12-20
      回复
  • M先生
    M先生
    2019-10-09

    这种tab切换一直点就会出现问题,脑瓜疼!

    2019-10-09
    有用
    回复
  • 痛快科技
    痛快科技
    2019-03-28

    很好奇这是什么需求

    2019-03-28
    有用
    回复
登录 后发表内容