H5 ページからミニプログラムにジャンプするにはどうすればよいですか?次の記事では、H5 ページからミニ プログラムにジャンプするためのいくつかの実裝ソリューションを紹介し、落とし穴の記録や重要なポイントを共有します。

私が擔當している最近の要件には、H5 ページ ジャンプ アプレットのシナリオが含まれます。具體的なアプリケーション シナリオは次のとおりです:

操作が成功しました テキスト メッセージでリンクを送信してユーザーに連絡(luò)します => ユーザーがリンクをクリック => ミニ プログラムで指定されたページにジャンプします

を見てみましょう?，F(xiàn)在の H5 ジャンプ ミニ プログラム どの実裝ソリューション ~

実裝ソリューション

現(xiàn)在、H5 ジャンプ アプレットを?qū)g裝するためのソリューションは多數(shù)あります。実際のシナリオに応じて選択できます。上記の 2 番目のシナリオは次のとおりです。より適切です。まず 1 つずつ見てみましょう。 [関連する學習の推奨事項: 小さなプログラム開発チュートリアル ]

最初のタイプ: URL スキームを介した外部ブラウザでの実行に適した H5 ページ

、URL スキームを使用して WeChat を起動し、指定されたミニ プログラムを開きます。

ミニプログラムのURLスキーム

クラウド開発を利用する場合は認証不要で直接呼び出すことで取得できます。興味のあるお子様は、自分でドキュメントを確認してください。そうです ~

ミニ プログラムの URL スキームを取得するにはどうすればよいですか?ミニ プログラムの任意のページを開くための URL スキームは、 サーバー インターフェイス を通じて、または ミニ プログラム管理バックグラウンド

[ツール] - [URL スキームの生成] エントリで取得できます。

使用例

次の図は、[ミニ プログラム管理バックエンド - ツール - URL スキームの生成] ページ

を通じて入力されます。特定のパスとパラメータについては、[生成] ボタンをクリックして生成された URL スキームを保存し、次のようにボタンのクリック イベントに直接配置します。

openWeapp() {
    location.href = 'weixin://dl/business/?t=xxxxxx'
}

その他の詳細については、 を參照してください。 WeChat 公式ドキュメント

。

2 番目のタイプ: WeChat の短縮リンク (URL リンク) を直接使用します。

これは一般に、H5 ページを追加開発することなくリンクを直接生成するのに適しており、ユーザーはリンクを開くことができます。指定されたミニプログラムのページにジャンプします。

リンクを開くと、WeChat のデフォルトの H5 転送ページが表示されます (H5 転送ページをカスタマイズすることもできます)?，F(xiàn)在のバージョンでは、ユーザーの確認なしでアプレットへのデフォルトの自動ジャンプがすでにサポートされています。これはすごくいい。

URL リンクの取得方法

サーバー インターフェイス を通じて、任意のページを開く URL リンク

# を取得できます。ミニ プログラムの

##具體的な詳細については、

WeChat 公式ドキュメントを參照してください。

トラップ レコード

• WeChat で生成された URL リンクの

  interface では、パラメータ path は公式の URL のみを認識します。環(huán)境変數(shù) env_version がありますが、これは役に立ちません (つまり、セット path が正式バージョンにすでに存在している必要があります。そうでない場合は、次のように報告されます: 無効な weapp ページパス )。

• 生成された URL リンクは

  https://wxaurl.cn/pFawq35qbfd です。この短いリンクは WeChat 環(huán)境でのみ開くことができます [正式版] にジャンプします。env_version が [実験版] または [開発版] に設(shè)定されている場合でも、指定したバージョンにジャンプするには、外部ブラウザ で開く必要があります。バージョン、を參照してください。

• 一部の OPPO 獨自のブラウザで開くと (以下に示すように)、「攜帯電話で Web リンクを開いてください」というメッセージが表示されます?；Q性にはまだ作業(yè)が必要です...

第三種：在自定義H5頁面嵌入微信標簽

這種適用于運行在微信環(huán)境的自定義H5頁面，將跳轉(zhuǎn)按鈕融合在自研H5應用，點擊按鈕后跳轉(zhuǎn)指定小程序頁面。

• 需要 js-sdk-1.6.0 以上才支持 （https://res.wx.qq.com/open/js/jweixin-1.6.0.js）
• 在wx.config中增加openTagList（開放標簽列表）

wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印
  appId: '', // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可選，需要使用的開放標簽列表，例如['wx-open-launch-app']
});

openTagList（開放標簽列表）目前支持配置：

• wx-open-launch-weapp - 指H5跳轉(zhuǎn)小程序
• wx-open-launch-app - 指H5跳轉(zhuǎn)app
• wx-open-subscribe - 服務號訂閱通知按鈕
• wx-open-audio - 音頻播放

HTML標簽示例

<div class="module-wrap">
    <div class="module-A">
        ...
    </div>
    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxxxx"
      path="pages/home/index?user=123&action=abc"
    >
      <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">打開小程序</button>
      </script>
    </wx-open-launch-weapp>
</div>

詳細可參考微信官方文檔。

注意要點

• 使用該功能必須是非個人主體認證的小程序。
• 只能跳已發(fā)布的【正式版】小程序，不能跳【體驗版】或【開發(fā)版】。
• path 屬性，官方文檔一般是 pages/home/index?user=123&action=abc 這種示例，但實際使用可能會報頁面不存在，需要在所聲明的頁面路徑后添加 .html 后綴，如 pages/home/index.html，有毒。

最后

好了，關(guān)于H5跳轉(zhuǎn)小程序的場景就聊到這里了，希望能給大家?guī)韼椭蠹矣杏龅狡渌犊狱c也可以留言一起交流~

更多編程相關(guān)知識，請訪問：編程視頻??！

以上がH5 ページからミニ プログラムにジャンプするためのいくつかの実裝ソリューションについて話しましょう (よくある落とし穴もあります)の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。