WeChatアプレットwebViewにH5を埋め込む方法の例

序文

WeChat ミニプログラムは新しいオープン機能を提供します!ついにミニプログラムにHTMLページを埋め込む機能が開放されました！ WeChat ミニプログラム基本ライブラリ 1.6.4 以降では、ミニプログラムに <web-view> コンポーネントを配置して HTML ページをリンクできます。これまでは、既存の HTML プログラム (HTML5 記事システム、ショッピング モール システムなど) をミニ プログラムに統合する方法がありませんでした。ミニ プログラムを使用して新しいセットを開発することしかできませんでした。現在では、<web-view> を使用することで、これらの Web システムを簡単に統合できるため、作業負荷が大幅に軽減されます。

ヒント: 個人用ミニプログラムは現在、H5 への Web ビュー参照をサポートしていません。また、ミニプログラム管理バックグラウンドで H5 ドメイン名をビジネス ドメイン名として構成する必要があります。

方法は次のとおりです

1. ページアドレスを直接紹介します。

<web-view :src="url"></web-view>

url はリダイレクト先のアドレスです。encodeURIComponent を使用して url をエンコードし、ミニ プログラムは decodeURIComponent を使用してデコードします。? と & を使用して url にパラメータを含めることができ、ミニ プログラムは onLoad; のオプションでパラメータを直接受け取ることができます。

2. ミニプログラムの上部を透明に設定します。

Web ビューに埋め込まれた H5 ページは透明に設定することはできず、ページの上部の色のみを変更できます。

• a. すべてのページを透明に設定します (app.json の window に navigationStyle:custom を追加すると、上部のナビゲーション バーが消え、右上隅にカプセル型のボタンだけが残ります)。
• b. 個々のページを透明に設定します (各個別の json に navigationStyle:custom を追加します)。

3. アプレットはH5ページにジャンプします

注: redirectTo を使用して H5 ページにジャンプすると、埋め込まれたすべての H5 ページに「戻る」ボタンが表示されなくなり、左側に「ホームページに戻る」ボタンが 1 つだけ表示されます。

4. H5はミニプログラムページにジャンプします

パラメータを使用するには、 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>を導入する必要があります。

wx.miniProgram.switchTab({ url:url}); // ミニプログラムのタブバーページにジャンプします。パラメータは渡せません

wx.miniProgram.navigateTo({ url:url,query:{//パラメータを入力}});//ミニプログラムのタブバー以外のページに移動します。パラメータを渡すことができます

その他のジャンプについては、下の図を参照してください。

5. H5はbindmessageを使ってミニプログラムにパラメータを渡す

ヒント: bindmessage を使用する場合、パラメータ転送は、ユーザーがミニプログラムの戻るボタンまたは共有ボタンをクリックするか、ミニプログラムに埋め込まれた H5 ページが破棄された場合にのみトリガーされます。それ以外の場合はトリガーされません。

6. H5は他のミニプログラムのインターフェースを使用します。APIを参照できます。私自身は関与していないので、参考のためにリンクを紹介します。

参考リンク:developers.weixin.qq.com/miniprogram…

要約する

WeChat アプレット webView を H5 に埋め込む方法についてはこれで終わりです。WeChat アプレット webView を H5 に埋め込む関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。