小程序刷新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。方法三是我自己摸索出來的辦法。但是總覺得這么個簡單的問題應該有更直接的做法才對，奇怪。