小さなプログラムにH5を組み込む方法の紹介

注:

アプレットは Cookie をサポートしていません。埋め込まれた h5 は Cookie をサポートしていますが、これらは WeChat Web ページの Cookie と共存し、相互に影響を与えます。

ミニ プログラムは https のみをサポートします。

ミニ プログラムに埋め込まれた H5 のドメイン名は、WeChat バックエンドで信頼できるドメイン名として設定する必要があります。

WeChat SDK バージョンを使用してください1.4、1.0 の一部の機能は利用できませんサポート: https://res.wx.qq.com/open/js/jweixin-1.4.0.js

1. ミニ プログラム環境の決定

WeChat の古いバージョンは、ミニ プログラムがサポートしているかどうかによって異なります。H5 をサポートしている場合は、

wx.miniProgram.getEnv(function(res) {
     if (res.miniprogram) {
         //这里才是小程序环境
         //但是这个方法是异步的请注意
     }

が必要です。そうでない場合は、ミニ プログラムの開発者に H5 ページを開いてもらいますそして、URL を通じてフィールドを H5 に渡し、そのフィールドがミニ プログラム環境であるかどうかを判断します。

2. ミニ プログラムの共有

ミニ プログラムのドキュメント:

ユーザーは、共有時に現在の Web ビューの URL を取得できます。つまり、webViewUrl パラメーターを返すことができます。 onShareAppMessage コールバック。

しかし、実際のマシンの実践では、ミニプログラム開発からのフィードバックに従って、一部のシナリオでは URL が取得できないため、最終的に postMessage メソッドを通じて共有情報を渡します。例は次のとおりです:

wx.miniProgram.postMessage({ data:{
      active_shareTit:分享语言,
      active_shareimg:分享图
      active_shareurl: 分享链接
}})

3. Cookie を同期します。

ミニ プログラムは、URL を通じて必要なパラメーターを取得し、H5 によってインターセプトされた後、Cookie にそれらのパラメーターを設定します。

4. H5 ジャンプ アプレット

Href を使用してジャンプすることはできません。 URL は「/page/..」の形式であり、http プロトコルを含めることはできません。次の 3 つの方法を使用する必要があります:

navigateミニ プログラム ページにジャンプし、現在のページを保持するには

redirectTo 現在のページを閉じてミニ プログラムのページにジャンプします (戻ると現在のページに戻ることはできません)

switchTab ミニ プログラムのタブバー ページ (ミニ プログラムのページ) にジャンプします下部のナビゲーションでは、このページが navigateTo または redirectTo を使用している場合は失敗します!)

デモ:

wx.miniProgram.navigateTo({
    url: '/pages/prod/prod?参数1=大大说&参数2=qweqw'
})

5. アプレットは H5 にジャンプします

パラメータを H5 に渡すことができます。 src

 <web-view src="https://mp.weixin.qq.com/qq.html"></web-view>

推奨: "小さなプログラム開発チュートリアル>>

以上が小さなプログラムにH5を組み込む方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。