WeChat アプレットで Web ビュー ページを更新する 3 つの方法

シナリオ

ミニ プログラムの他のページで操作を実行すると、データが変更され、Web ビュー ページに戻ったら、Web ビューのデータを更新する必要があります。ミニ プログラムは Web ビューとのリアルタイム通信機能を提供しないため、ページを更新することが考慮されます。

方法 1

最も一般的な方法は、WebView の URL を変更し、クエリ パラメーターなどを追加することで、ページが更新されます。ただし、これにより Web ビューの閲覧履歴が増加し、ユーザーが戻るときにアプレットの前のページではなく、Web ビューの前のページに戻ることになります。

メソッド2

ミニプログラムでwx.redirectTo(OBJECT)メソッドを呼び出します。ここに現在のページの URL を入力します。実際、現在のページを閉じて再度開くと、Web ビューを更新するという目的は隠れて達成されます。ただし、ミニプログラムページを再開するため、さらに時間がかかります。また、ユーザーには前のページが点滅してから、新しいページが表示されます。

方法 3

まず、Web ビューに条件付きレンダリングを実行させます。

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

更新する必要がある場合は、まず webviewUrl を空に設定し、現在の Web ビューを破棄します。次に、webviewUrl を現在の値に設定します。以下のように:

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

この方法では、ナビゲーション バーの履歴に影響を与えずにページを更新したり、URL にジャンプしたりできます。
ここで setData を実行した後、ページ コンテンツの更新は非同期で実行される必要があるため、最後に URL を変更するときは、短時間遅らせる必要があります。そうしないと、エラーが発生します。
setData 後のページの実際の更新は次の requestAnimationFrame 内にあるはずなので、ページがまったくスタックしていない場合は 16 ミリ秒になる可能性があるため、安全を期して 100 ミリ秒に設定しました。

概要

これまでに学んだことから、副作用なしにミニプログラムのWebビューを直接更新できる単純なAPIは実際にはありません。方法 3 は私が自分で考え出した方法です。しかし、私はいつも、このような単純な問題にはもっと直接的なアプローチが必要だと思うのですが、それは不思議なことです。

関連記事:

WeChatアプレットにおけるプルダウンリフレッシュとプルアップロードの実装方法を詳しく解説

JSで親ウィンドウをリフレッシュするいくつかの方法のまとめ

以上がWeChat アプレットで Web ビュー ページを更新する 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。