收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
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中均可以正常跳转

最后一次编辑于  03-28  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

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

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

    03-28
    赞同
    回复 2
    • Malash
      Malash
      2天前
      以电商下单举例说明:
      1. 用户在PageA点击“支付按钮”,此时由于用户未登陆,将进入PageB进行登陆
      2. 用户在PageB上登陆完成,这个时候代码触发 wx.navigateBack 回到PageA
      3. 回到PageA后(即navigateBack的callback执行),代码立刻调用wx.navigateTo进入PageC,即真正的支付页面
      2天前
      回复
    • Malash
      Malash
      2天前
      在我们的测试过程中,发现wx.navigateBack和wx.navigateTo都会触发这个bug,代码片段中为了方便只使用了navigateTo,但navigateBack也是会有问题的
      2天前
      回复
  • M先生
    M先生
    10-09

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

    10-09
    赞同
    回复
  • 痛快科技
    痛快科技
    03-28

    很好奇这是什么需求

    03-28
    赞同
    回复