你有经历过在小程序里进行页面跳转时页面被重复打开的情况吗?
如果有的话您可以继续往下看。
随着我们业务的拓展,功能的增加小程序包体变大,我们不得不使用小程序分包来解决首屏加载问题。
在解决问题的时候,必将会引起另一些问题,比如:
小程序启动之后,用户通过按钮打开未访问过的分包路由页面,跳转时由于分包加载数据会耗时,界面上的元素仍然可以响应用户的操作,如果用户不小心或由于焦急重复点击按钮后,按钮的事件处理函数就会随着点击重复执行,页面会被重复打开好几次。
但一旦页面被加载过,跳转是非常快的,就很难出现重复点击的情况。
例如在下面路由配置中
{
"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
});
}
这下只能点一下了,除非页面退回来,点再多下都不管用。
其实这种情况不光会出现在分包中,不是分包的页面中也会出现这种情况,只要反应速度慢一点点就可以实现连击现象,不一定是两次,也许是无限次,只要点击速度够快。
这一万多个关注咋刷的