開発では、Web ビュー コンポーネントを使用して H5 ページを埋め込むのが非常に一般的ですが、多くの人は、Web ビューに埋め込まれた H5 がネイティブ アプレットとどのように対話するかを知りません。以下に、WeChat アプレットと Webview H5 間の対話を実装する方法を紹介します。
Webビュー機能の説明
Web ページをホストするためのコンテナ。ミニ プログラム ページ全体が自動的に埋められ、個人用ミニ プログラムは当面サポートされません。
クライアント バージョン 6.7.2 以降、navigationStyle:custom は Web ビュー コンポーネントでは無効です。
Web ビューには H5 が埋め込まれ、パラメータをネイティブ アプレットに渡します
方法 1. postMessage を使用する
Web ビュー コンポーネントには「bindmessage」属性があり、次のように公式に導入されています。
Web ページがミニ プログラムにメッセージを投稿すると、ミニ プログラムがトリガーされ、特定の時間 (ミニ プログラムの撤退、コンポーネントの破棄、共有) にメッセージを受信します。e.detail = {data}、データは複数の postMessage パラメータで構成される配列です
「メッセージ」イベントをWebビューコンポーネントにバインドします。
ミニ プログラムで H5 によって渡されたデータを受信するには、H5 でメッセージ イベントをトリガーします。
例：
アプレット/ページ/テスト/test.wxml:
<web-view src="" bindmessage="receiveMessage"></web-view>
アプレット/ページ/テスト/test.js:
receiveMessage(e){
console.log(e.detail)//接收H5传过来的数据
}
H5：
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
wx.miniProgram.postMessage({
data: {
foo: 'bar'} })
</script>
ミニプログラムとH5間の通信にはPostMessageを利用することができますが、ミニプログラムが撤退、コンポーネントが破棄、共有された場合にのみ起動されるため、場合によっては開発ニーズを満たせない場合があります。
方法 2: パラメーターを指定してページ ジャンプを使用する
jweixin JSSDK を参照し、WeChat wx.miniProgram API を呼び出します。
| インターフェース名 | 説明する | 最小バージョン |
|---|---|---|
| wx.miniProgram.navigateTo | パラメータはアプレットのインターフェースと一致しています | 1.6.4 |
| wx.miniProgram.navigateBack | パラメータはアプレットのインターフェースと一致しています | 1.6.4 |
| wx.miniProgram.switchTab | パラメータはアプレットのインターフェースと一致しています | 1.6.5 |
| wx.miniProgram.reLaunch | パラメータはアプレットのインターフェースと一致しています | 1.6.5 |
| wx.miniProgram.redirectTo | パラメータはアプレットのインターフェースと一致しています | 1.6.5 |
| wx.miniProgram.postMessage | アプレットにメッセージを送信すると、特定の時間にコンポーネントのメッセージ イベントがトリガーされます (アプレットのバック、コンポーネントの破棄、共有)。 | 1.7.1 |
| wx.miniProgram.getEnv | 現在の環境を取得する | 1.7.1 |
たとえば、現在シナリオがあります。H5 はリスト ページで、リスト項目をクリックすると、ネイティブ アプレットの詳細ページにジャンプします。
H5：
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
function handleClick(e){
let id = e.target.dataset.id
let url = `/pages/detail/detail?id=${
id}`;
wx.miniProgram.navigateTo({
url,
});
}
</script>
アプレット/pages/detail/detail.js:
onLoad: function (options) {
console.log(options.id)//接收H5传过来的数据
}
Web ビューに H5 パラメータを埋め込むネイティブ アプレット
ネイティブ アプレットが Web ビューに H5 パラメータを埋め込むのは非常に簡単で、ネイティブ アプレットは Web ビューの src 属性を直接変更できます。
'xxx.com?arg=123'
h5 ページは URL のパラメータを取得します。このメソッドにより、ページが再読み込みされます。ページを読み込みたくない場合は、ハッシュを変更できます。
'xxx.com#123'
H5 ページはハッシュ値の変化を監視します。
window.onhashchange=function(){
alert('hash值改变')
console.log(window.location.hash)//获取当前hash值
}