小程序中經(jīng)常會遇見webview中的h5需要強(qiáng)刷的場景
如小程序原生頁面返回到H5頁面:
1.小程序 --> 2.H5 --> 3.小程序
當(dāng)3.小程序往回跳到h5時儒将,正常情況下狡汉,h5是原封不動地展示璃饱,任何監(jiān)聽事件都不會驚動。包括瀏覽器的頁面隱藏與否
//監(jiān)聽頁面顯示隱藏
document.addEventListener(visibilitychange, (e)=>{console.log(e)}); // null
//監(jiān)聽手Q頁面顯示隱藏
document.addEventListener(qbrowserVisibilityChange, (e)=>{console.log(e)}); // null
然后呢,你的需求又不得不強(qiáng)制喚醒H5(打不過產(chǎn)品携茂,就好好聽人家話好吧)钞钙。既然h5這邊明確了做不了任何手腳,那么我們將目光放到了小程序刊侯。
在小程序的onShow事件打了log痘括,很明顯,往回退是可以被明確感知到的滔吠。
onShow() {
console.log('onshow'); // onshow
}
在小程序的社區(qū)看見了很多教程文檔纲菌,說是在webview的src后邊增加時間戳。類似于這樣
const version = (new Date()).valueOf();
this.data.url = `${this.data.originSrc}/${version}`;
嗯哼疮绷,確實(shí)可以了嘛翰舌,但是history棧也增加了一個記錄,所以往回退的時候用戶需要點(diǎn)擊兩次冬骚,才可以跳回1.小程序椅贱。這跟預(yù)期的不太一致懂算,不慌,熟悉路由API的小朋友就知道rediectTo專治路由層級庇麦。
wx.redirectTo({ url: `/packages/webview/webview?url=${encodeURIComponent(this.data.url)}` });
雖然美中不足的是计技,重定向的時候頁面會跳閃,但是已經(jīng)是目前所知最優(yōu)解了山橄。
接下來是進(jìn)階版垮媒,嘻嘻,我只想要指定時刻刷新H5航棱,并不想每次回來都要看到那個跳閃啊睡雇。那就可以設(shè)個全局變量啦。(數(shù)據(jù)存儲方式是為了演示饮醇,不是最優(yōu)存儲哈)
// 跳到某個頁面你想要重刷h5
wx.setStorageSync('webview_refresh_sign', 'refresh');
// webview頁面
const isRefresh = wx.getStorageSync('webview_refresh_sign');
if (isRefresh) {
// do your thing
}