ミニ プログラムの他のページで操作を実行すると、データが変更され、Web ビュー ページに戻ったら、Web ビューのデータを更新する必要があります。ミニ プログラムは Web ビューとのリアルタイム通信機能を提供しないため、ページを更新することが考慮されます。
最も一般的な方法は、WebView の URL を変更し、クエリ パラメーターなどを追加することで、ページが更新されます。ただし、これにより Web ビューの閲覧履歴が増加し、ユーザーが戻るときにアプレットの前のページではなく、Web ビューの前のページに戻ることになります。
ミニプログラムでwx.redirectTo(OBJECT)
メソッドを呼び出します。ここに現在のページの URL を入力します。実際、現在のページを閉じて再度開くと、Web ビューを更新するという目的は隠れて達成されます。ただし、ミニプログラムページを再開するため、さらに時間がかかります。また、ユーザーには前のページが点滅してから、新しいページが表示されます。
まず、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アプレットにおけるプルダウンリフレッシュとプルアップロードの実装方法を詳しく解説
以上がWeChat アプレットで Web ビュー ページを更新する 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。