小程序中经常会遇见webview中的h5需要强刷的场景
如小程序原生页面返回到H5页面:
1.小程序 --> 2.H5 --> 3.小程序
当3.小程序往回跳到h5时,正常情况下,h5是原封不动地展示,任何监听事件都不会惊动。包括浏览器的页面隐藏与否
//监听页面显示隐藏
document.addEventListener(visibilitychange, (e)=>{console.log(e)}); // null
//监听手Q页面显示隐藏
document.addEventListener(qbrowserVisibilityChange, (e)=>{console.log(e)}); // null
然后呢,你的需求又不得不强制唤醒H5(打不过产品,就好好听人家话好吧)。既然h5这边明确了做不了任何手脚,那么我们将目光放到了小程序。
在小程序的onShow事件打了log,很明显,往回退是可以被明确感知到的。
onShow() {
console.log('onshow'); // onshow
}
在小程序的社区看见了很多教程文档,说是在webview的src后边增加时间戳。类似于这样
const version = (new Date()).valueOf();
this.data.url = `${this.data.originSrc}/${version}`;
嗯哼,确实可以了嘛,但是history栈也增加了一个记录,所以往回退的时候用户需要点击两次,才可以跳回1.小程序。这跟预期的不太一致,不慌,熟悉路由API的小朋友就知道rediectTo专治路由层级。
wx.redirectTo({ url: `/packages/webview/webview?url=${encodeURIComponent(this.data.url)}` });
虽然美中不足的是,重定向的时候页面会跳闪,但是已经是目前所知最优解了。
接下来是进阶版,嘻嘻,我只想要指定时刻刷新H5,并不想每次回来都要看到那个跳闪啊。那就可以设个全局变量啦。(数据存储方式是为了演示,不是最优存储哈)
// 跳到某个页面你想要重刷h5
wx.setStorageSync('webview_refresh_sign', 'refresh');
// webview页面
const isRefresh = wx.getStorageSync('webview_refresh_sign');
if (isRefresh) {
// do your thing
}