小程序H5页面的强刷

小程序中经常会遇见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
}