【小程序】小程序刷新webview小結

場景

在小程序其它頁面作了操做，數據發生改變，回到webview頁面時須要更新webview裏面的數據。因爲小程序沒有提供與webview的實時通訊能力，所以刷新頁面是個可考慮的作法。

方法一

最多見的作法，修改一下webview的url，加點query參數什麼的，頁面就會更新了。可是這會增長webview的瀏覽history，致使用戶在後退的時候，會在webview內退到前一個頁面，而不是退到小程序的前一個頁面。

方法二

在小程序內調用wx.redirectTo(OBJECT)方法。這裏填當前頁面的url。實際上是關閉當前頁面從新打開，變相達到刷新webview的目的。可是因爲從新打開了小程序頁面，所以耗時會增長一些。而且，用戶會看到前一個頁面閃一下，而後出現新頁面。

方法三

首先，讓webview作條件渲染：

<web-view wx:if="{{ webviewUrl }}" src="{{ webviewUrl }}" />

須要刷新時，先把webviewUrl設爲空，銷燬當前webview。而後再把webviewUrl設爲當前值。以下：

refreshWebview: function () {
    let tmpUrl = this.data.webviewUrl;
    this.setData({
      webviewUrl: ''
    });
    setTimeout(() => {
      this.setData({
        webviewUrl: tmpUrl
      })
    }, 100);
  }

這樣即可以在不影響導航欄歷史的狀況下刷新頁面，也能夠是跳轉url。
這裏setData以後，頁面內容的更新應該是異步執行的，所以咱們後一次修改url須要延時一小段時間，不然會出現error。
猜想setData後頁面實際更新應該是在下一次的requestAnimationFrame，所以若是頁面徹底不卡頓可能16ms就能夠了，保險起見，我設了100ms。

小結

目前我瞭解到的狀況來看，確實沒有一個簡單的API能夠直接無反作用地刷新小程序webview。方法三是我本身摸索出來的辦法。可是總以爲這麼個簡單的問題應該有更直接的作法纔對，奇怪。