專(zhuān)業(yè)的短鏈接生成工具
鏈接域名
短網(wǎng)址有效期
企業(yè)小程序-h5跳轉(zhuǎn)小程序
更新時(shí)間：2025-4-20 05:21:34 作者：愛(ài)短鏈
在企業(yè)環(huán)境中，從H5頁(yè)面跳轉(zhuǎn)到小程序是一個(gè)常見(jiàn)的需求。以下是企業(yè)小程序-H5跳轉(zhuǎn)小程序的具體方法和步驟：
一、方法概述
- 使用web-view標(biāo)簽結(jié)合wx.miniProgram.reLaunch方法
- 利用wx-open-launch-weapp接口
- 利用URL Scheme接口
二、詳細(xì)步驟
方法一：使用web-view標(biāo)簽結(jié)合wx.miniProgram.reLaunch方法
-
小程序啟動(dòng)頁(yè)面設(shè)置：
- 在小程序的啟動(dòng)頁(yè)面中，只使用<web-view>標(biāo)簽來(lái)加載H5頁(yè)面。例如：<web-view src="https://www.xxx.cn/auth.html"></web-view>。
-
H5頁(yè)面編寫(xiě)：
- 在H5頁(yè)面中，編寫(xiě)授權(quán)邏輯，并在授權(quán)成功后通過(guò)wx.miniProgram.reLaunch方法攜帶參數(shù)跳回小程序。
- 需要在H5頁(yè)面中引入微信JS-SDK，例如：<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>。
-
注意事項(xiàng)：
- 確保H5頁(yè)面的域名已經(jīng)在微信開(kāi)放平臺(tái)進(jìn)行了配置，并獲得了相應(yīng)的權(quán)限。
- wx.miniProgram.reLaunch方法會(huì)關(guān)閉所有非tabBar頁(yè)面，并跳轉(zhuǎn)到指定頁(yè)面。因此，在調(diào)用此方法時(shí)，需要謹(jǐn)慎選擇跳轉(zhuǎn)的目標(biāo)頁(yè)面。
方法二：利用wx-open-launch-weapp接口
-
H5頁(yè)面編寫(xiě)：
- 在H5頁(yè)面中，使用<wx-open-launch-weapp>標(biāo)簽來(lái)觸發(fā)跳轉(zhuǎn)到小程序的操作。
- 設(shè)置appid和path屬性來(lái)指定要跳轉(zhuǎn)的小程序及其頁(yè)面路徑。
- 可以添加extraData屬性來(lái)傳遞額外的數(shù)據(jù)給小程序。
-
示例代碼：
html復(fù)制代碼
| <wx-open-launch-weapp id="launch-btn" appid="wx12345678" path="pages/home/index?user=123&action=abc"> | |
| <script type="text/wxtag-template"> | |
| <style>.btn { padding: 12px }</style> | |
| <button class="btn">打開(kāi)小程序</button> | |
| </script> | |
| </wx-open-launch-weapp> |
-
注意事項(xiàng)：
- <wx-open-launch-weapp>標(biāo)簽是微信提供的開(kāi)放標(biāo)簽，需要在微信環(huán)境下才能正常使用。
- 確保H5頁(yè)面的域名已經(jīng)在微信開(kāi)放平臺(tái)進(jìn)行了配置，并獲得了使用此標(biāo)簽的權(quán)限。
方法三：利用URL Scheme接口
-
獲取URL Scheme：
- 在微信開(kāi)放平臺(tái)上，為小程序生成一個(gè)URL Scheme。這通常涉及到調(diào)用微信提供的接口，并傳遞小程序的appid、path以及版本參數(shù)（如envVersion）。
-
H5頁(yè)面調(diào)用：
- 在H5頁(yè)面中，通過(guò)HTTPS調(diào)用生成的URL Scheme來(lái)觸發(fā)跳轉(zhuǎn)到小程序的操作。
- 可以通過(guò)設(shè)置envVersion參數(shù)來(lái)指定跳轉(zhuǎn)到小程序的開(kāi)發(fā)版、體驗(yàn)版或正式版。
-
示例代碼：
javascript復(fù)制代碼
| wx.navigateToMiniProgram({ | |
| appId: '你的小程序AppID', | |
| path: 'page/index/index?id=123', | |
| extraData: { foo: 'bar' }, | |
| envVersion: 'trial', // 設(shè)置為體驗(yàn)版 | |
| success(res) { | |
| // 跳轉(zhuǎn)成功 | |
| }, | |
| fail(res) { | |
| // 跳轉(zhuǎn)失敗 | |
| } | |
| }); |
- 注意：上述代碼示例中的wx.navigateToMiniProgram方法實(shí)際上是在小程序內(nèi)部調(diào)用的，而不是在H5頁(yè)面中直接調(diào)用的。在H5頁(yè)面中，你需要通過(guò)構(gòu)造URL Scheme的方式來(lái)實(shí)現(xiàn)跳轉(zhuǎn)，而不是直接調(diào)用此方法。具體的URL Scheme構(gòu)造方式和調(diào)用方式可以參考微信開(kāi)放平臺(tái)的官方文檔。
-
注意事項(xiàng)：
- URL Scheme的有效期通常為30天，且每個(gè)鏈接只能點(diǎn)擊一次。因此，在實(shí)際應(yīng)用中，需要定期生成新的URL Scheme。
- 確保H5頁(yè)面的域名已經(jīng)在微信開(kāi)放平臺(tái)進(jìn)行了配置，并獲得了使用URL Scheme的權(quán)限。
三、總結(jié)
以上三種方法都可以實(shí)現(xiàn)從H5頁(yè)面跳轉(zhuǎn)到小程序的功能。具體選擇哪種方法取決于你的業(yè)務(wù)場(chǎng)景和需求。例如，如果你需要在H5頁(yè)面中直接嵌入小程序的內(nèi)容并實(shí)現(xiàn)跳轉(zhuǎn)，可以使用<web-view>標(biāo)簽；如果你需要在H5頁(yè)面中提供一個(gè)按鈕來(lái)觸發(fā)跳轉(zhuǎn)到小程序的操作，可以使用<wx-open-launch-weapp>標(biāo)簽；如果你需要更靈活地控制跳轉(zhuǎn)的目標(biāo)頁(yè)面和版本，可以使用URL Scheme接口。
