H5 ページを WeChat アプレットに埋め込み、ページ ジャンプを実行する

要件は非常に単純です。つまり、アプレットに H5 ページを埋め込み、このアプレットの他のページにジャンプするボタンを提供することです。作成者にとって初めての連絡なので、記録を作成します
:コンポーネント
WeChat アプレットが主に使用されweb-view詳細な使用法 >>> Web ビュー WeChat 公式ドキュメント個人用アプレットはサポートされていない
ここに画像の説明を挿入
ことに注意してください。

1.H5を埋め込む

H5 を作成した後、次のコードを使用してページをアプレット ページに埋め込むことができます。ページは自動的に埋められます。モバイル端末への適応を適切に行う必要があります。

<!--pages/test/test.wxml-->
<web-view src="http://192.168.xx.xxx:8080/#/"></web-view>

オンラインになった後、埋め込む前に、ここのドメイン名をミニ プログラムの合法的なドメイン名に追加する必要があります。ローカルでテストする場合は、アプレットのローカル設定でドメイン名を検証しないようにチェックしてください。

2. アプレット内のページにジャンプします

WeChat SDK をインポートする必要があります。公式 CDN を直接インポートできます。

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

または npm を使用します:

npm install weixin-js-sdk

H5 ページで紹介されました:

import wx from 'weixin-js-sdk';

WeChat オープン インターフェイスを呼び出して、次のページにジャンプします:
タブバー ページ:

wx.miniProgram.switchTab({
    
    
     url: "/pages/home/home",
   });

タブバー以外のページ:

wx.miniProgram.navigateTo({
    
    
    url: "/pages/smile/smile",
  });

考える:

いくつかの情報を読んだ後、他のアプレットにジャンプする必要があることがわかりましたが、これまでのところ解決策は、リレー ページ (アプレット自体のページ) にジャンプし、アプレットを介して他のアプレットにジャンプすることです。
その上!

おすすめ

転載: blog.csdn.net/weixin_54858833/article/details/118653960