评论

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

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



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


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


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


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


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


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


例如在下面路由配置中

{
"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
  });
}


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

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

3 个评论

  • Wang
    Wang
    2020-01-11

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

    2020-01-11
    赞同 2
    回复 1
    • 回归自然
      回归自然
      发表于移动端
      2020-11-13
      熊云方15220351875
      2020-11-13
      1
      回复
  • TNT
    TNT
    2020-01-07

    这一万多个关注咋刷的

    2020-01-07
    赞同 1
    回复 7
    • Hasaki
      Hasaki
      2020-01-07
      一个一个关注的呀
      2020-01-07
      1
      回复
    • TNT
      TNT
      2020-01-07回复Hasaki
      哪里找到的这么多人,
      2020-01-07
      1
      回复
    • Hasaki
      Hasaki
      2020-01-07
      爬的,,我可是被封过号的人...
      2020-01-07
      1
      回复
    • TNT
      TNT
      2020-01-07回复Hasaki
      这么厉害。
      2020-01-07
      1
      回复
    • 王浩Hanks🇨🇳
      王浩Hanks🇨🇳
      2020-01-07回复Hasaki
      爬半天,1w多个人,也不关注我  T_T
      2020-01-07
      1
      回复
    查看更多(2)
  • li  jian🏁
    li jian🏁
    发表于移动端
    2022-01-13
    丝g Hxhcz .c
    2022-01-13
    赞同
    回复
登录 后发表内容