Drei Methoden zum Aktualisieren von Webview-Seiten im WeChat-Applet

Szenario

Wenn Sie einen Vorgang auf anderen Seiten des Miniprogramms ausführen, ändern sich die Daten. Wenn Sie zur Webansichtsseite zurückkehren, müssen Sie die Daten in der Webansicht aktualisieren. Da das Miniprogramm keine Echtzeit-Kommunikationsfunktionen mit der Webansicht bietet, ist eine Aktualisierung der Seite eine Überlegung wert.

Methode 1

Die gebräuchlichste Methode besteht darin, die URL der Webansicht zu ändern, einige Abfrageparameter oder ähnliches hinzuzufügen, und die Seite wird aktualisiert. Dadurch wird jedoch der Browserverlauf der Webansicht verlängert, sodass der Benutzer beim Zurückkehren zur vorherigen Seite in der Webansicht und nicht zur vorherigen Seite des Applets zurückkehrt.

Methode 2

Rufen Sie die Methode wx.redirectTo(OBJECT) im Miniprogramm auf. Geben Sie hier die URL der aktuellen Seite ein. Tatsächlich wird durch das Schließen und erneute Öffnen der aktuellen Seite der Zweck einer getarnten Aktualisierung der Webansicht erreicht. Da die Mini-Programmseite jedoch erneut geöffnet wird, wird es länger dauern. Außerdem sieht der Benutzer die vorherige Seite blinken und dann wird die neue Seite angezeigt.

Methode 3

Lassen Sie die Webansicht zunächst bedingt rendern:

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

Wenn Sie eine Aktualisierung durchführen müssen, setzen Sie zunächst die WebviewUrl auf leer und zerstören Sie die aktuelle Webansicht. Setzen Sie dann webviewUrl auf den aktuellen Wert. Wie folgt:

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

Auf diese Weise können Sie die Seite aktualisieren, ohne den Verlauf der Navigationsleiste zu beeinträchtigen, oder es kann auch eine Sprung-URL sein.
Nach setData hier sollte die Aktualisierung des Seiteninhalts asynchron ausgeführt werden. Wenn wir also die URL das letzte Mal ändern, müssen wir sie um einen kurzen Zeitraum verzögern, da sonst ein Fehler auftritt.
Ich denke, die eigentliche Aktualisierung der Seite nach setData sollte im nächsten requestAnimationFrame erfolgen. Wenn die Seite also überhaupt nicht hängen bleibt, kann es sein, dass sie 16 ms beträgt. Um auf der sicheren Seite zu sein, stelle ich sie auf 100 ms ein.

Zusammenfassung

Nach dem, was ich bisher gelernt habe, gibt es tatsächlich keine einfache API, die die Webansicht des Miniprogramms direkt und ohne Nebenwirkungen aktualisieren kann. Methode drei ist eine Methode, die ich selbst herausgefunden habe. Aber ich habe immer das Gefühl, dass ein so einfaches Problem einen direkteren Ansatz haben sollte, was seltsam ist.

Verwandte Artikel:

Detaillierte Erläuterung der Implementierungsmethode der Pulldown-Aktualisierung und des Pullup-Ladens im WeChat-Applet

JS Übergeordnetes Fenster aktualisieren Zusammenfassung mehrerer Methoden

Das obige ist der detaillierte Inhalt vonDrei Methoden zum Aktualisieren von Webview-Seiten im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!