微信小程式更新webview頁面的三種方法

php是最好的语言
發布: 2018-08-06 15:32:07
原創
18284 人瀏覽過

場景

在小程式其它頁面做了操作,資料發生改變,回到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: &#39;&#39;
    });
    setTimeout(() => {
      this.setData({
        webviewUrl: tmpUrl
      })
    }, 100);
  }
登入後複製

這樣便可以在不影響導覽列歷史的情況下刷新頁面,也可以是跳轉url。
這裡setData之後,頁面內容的更新應該是非同步執行的,因此我們後一次修改url需要延時一小段時間,否則會出現error。
猜測setData後頁面實際更新應該是在下次的requestAnimationFrame,因此如果頁面完全不卡頓可能16ms就可以了,保險起見,我設了100ms。

小結

目前我了解到的情況來看,確實沒有一個簡單的API可以直接無副作用地刷新小程式webview。方法三是我自己摸索出來的辦法。但是總覺得這麼簡單的問題應該有更直接的做法才對,奇怪。

相關文章:

微信小程式中的下拉刷新和上拉載入的實作方法詳解

JS刷新父視窗的幾種方式小結

以上是微信小程式更新webview頁面的三種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!