评论

避免分包加载引起的页面重复打开问题

避免分包加载引起的页面重复打开问题



你有经历过在小程序里进行页面跳转时页面被重复打开的情况吗?


如果有的话您可以继续往下看。


随着我们业务的拓展,功能的增加小程序包体变大,我们不得不使用小程序分包来解决首屏加载问题。


在解决问题的时候,必将会引起另一些问题,比如:


小程序启动之后,用户通过按钮打开未访问过的分包路由页面,跳转时由于分包加载数据会耗时,界面上的元素仍然可以响应用户的操作,如果用户不小心或由于焦急重复点击按钮后,按钮的事件处理函数就会随着点击重复执行,页面会被重复打开好几次。


但一旦页面被加载过,跳转是非常快的,就很难出现重复点击的情况。


例如在下面路由配置中

{
"subPackages": [
  {
    "root": "pages/index/",
    "pages": [
      "index"
    ]
  },
  {
    "root": "pages/post/",
    "pages": [
        "details",
        "list",
        ]
   }
]
}


我们给首页的Page里添加一个点击事件来跳转到我们的文章页面


handleArticleTap(e){
  const pid = e.currentTarget.dataset.pid;
  consturl =`pages/post/details?pid=${pid};
  wx.navigateTo({url});
}



我们打开页面 pages/index/index 来访问小程序的首页,首页上存在一些推荐文章的链接按钮,用户可通过这些按钮来查看我们的文章。


在实际情况中,我们偶尔会观察到诡异的现象:我们的文章页面被重复打开了。



用户首次通过点击跳转按钮来跳转到pages/post/details?pid=1 时,pages/post/details 页面未被小程序框架加载,页面会处于假死状态,在Android上可以明显的看到系统显示【模块加载中】 这样的提示。


重复打开页面会给用户带来不必要的麻烦。



解决这个问题,那就是上锁



wx.navigateTo 给我们提供了一个success接口,我们的处理函数可以稍作修改就解决这个问题?

handleArticleTap(e){
  if (this.handleArticleTapLock){
    return;
  }
  this.handleArticleTapLock=true;
  const pid = e.currentTarget.dataset.pid;
  const url =`pages/post/details?pid=${pid};
  wx.navigateTo({
    url,
    success()=>{
      this.handleArticleTapLock=false;
    }
  });
}

文档上并没有描述success的触发时机,然后我就亲手试了一下,发现果然不行哦。


页面还没被打开navigateTo就success了!!


那我们就试试通过Page的onShow生命周期上锁:


onShow(){
  this.handleArticleTapLock=false;
},
handleArticleTap(e){
  if (this.handleArticleTapLock){
    return;
  }
  this.handleArticleTapLock=true;
  const pid = e.currentTarget.dataset.pid;
  const url =`pages/post/details?pid=${pid}`;
  wx.navigateTo({
    url
  });
}


这下只能点一下了,除非页面退回来,点再多下都不管用。

最后一次编辑于  01-07  
点赞 0
收藏
评论

2 个评论

  • Wang
    Wang
    01-11

    其实这种情况不光会出现在分包中,不是分包的页面中也会出现这种情况,只要反应速度慢一点点就可以实现连击现象,不一定是两次,也许是无限次,只要点击速度够快。

    01-11
    赞同
    回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    01-07

    这一万多个关注咋刷的

    01-07
    赞同
    回复 6
    • 兰昊
      兰昊
      01-07
      一个一个关注的呀
      01-07
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      01-07回复兰昊
      哪里找到的这么多人,
      01-07
      回复
    • 兰昊
      兰昊
      01-07
      爬的,,我可是被封过号的人...
      01-07
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      01-07回复兰昊
      这么厉害。
      01-07
      回复
    • Hanks🇨🇳
      Hanks🇨🇳
      01-07回复兰昊
      爬半天,1w多个人,也不关注我  T_T
      01-07
      回复
    查看更多(1)
登录 后发表内容