如何從H5頁面跳轉(zhuǎn)到小程序？下面本篇文章給大家介紹一下從H5頁面跳轉(zhuǎn)到小程序的幾種實現(xiàn)方案，以及分享踩坑記錄和注意要點，希望對大家有所幫助！

最近負責(zé)的一個需求涉及到H5頁面跳轉(zhuǎn)小程序的場景，具體應(yīng)用場景是：

運營通過短信發(fā)送鏈接觸達用戶 => 用戶點開鏈接 => 跳轉(zhuǎn)至小程序指定的某個頁面

下面我們來看看H5跳轉(zhuǎn)小程序目前有哪些實現(xiàn)方案~

實現(xiàn)方案

實現(xiàn)H5跳轉(zhuǎn)小程序的方案目前有多種，可以根據(jù)自己的實際場景選擇，上面提到的場景采用第二種更合適，我們先來一個個看?！鞠嚓P(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

第一種：通過 URL Scheme

適合在外部瀏覽器運行的H5頁面，通過 URL Scheme 的方式來拉起微信打開指定小程序。

小程序的 URL Scheme 如果借助于云開發(fā)的話，是免鑒權(quán)，直接調(diào)用即可獲取，這里不過多贅述，感興趣的童鞋自己查文檔吧~

那如何獲取小程序的 URL Scheme 呢？可以通過服務(wù)端接口或在小程序管理后臺「工具」-「生成 URL Scheme」入口可以獲取打開小程序任意頁面的 URL Scheme。

使用示例

下圖是通過：【小程序管理后臺 - 工具 - 生成 URL Scheme 】的頁面

填入具體的路徑以及參數(shù)，點擊【生成】按鈕，將生成的 URL Scheme 存起來，直接放在按鈕的點擊事件中，如：

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

其他細節(jié)可參考微信官方文檔。

第二種：直接用微信的短鏈（URL Link）

這種一般適用于不需要額外開發(fā)H5頁面，直接生成鏈接，用戶通過打開鏈接即可跳轉(zhuǎn)指定的小程序頁面。

打開鏈接后，會有微信默認(rèn)的H5中轉(zhuǎn)頁（想要自定義H5中轉(zhuǎn)頁也是可以的），目前的版本已經(jīng)支持默認(rèn)自動跳轉(zhuǎn)小程序，不需要用戶確認(rèn)，這點很不錯。

獲取 URL Link 的方式

通過服務(wù)端接口可以獲取打開小程序任意頁面的 URL Link

具體細節(jié)可參考微信官方文檔。

踩坑記錄

• 調(diào)微信生成 URL Link 的接口中，參數(shù) path 只認(rèn)正式版，雖然有 env_version 這個環(huán)境變量，然而并沒有用（也就是說設(shè)定的 path 必須是正式版已經(jīng)存在的，否則會報：invalid weapp pagepath ）。

• 生成的 URL Link，也就是 https://wxaurl.cn/pFawq35qbfd 這種短鏈在微信環(huán)境中打開只會跳【正式版】，即使你的 env_version 設(shè)定了【體驗版】或【開發(fā)版】，需要在外部瀏覽器打開才能跳轉(zhuǎn)指定的版本，參考。

• 在某些OPPO自帶的瀏覽器中打開(如下圖)，提示“請在手機打開網(wǎng)頁鏈接”，兼容性還需努力啊……

第三種：在自定義H5頁面嵌入微信標(biāo)簽

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

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

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

openTagList（開放標(biāo)簽列表）目前支持配置：

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

HTML標(biāo)簽示例

<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>

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

注意要點

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

最后

好了，關(guān)于H5跳轉(zhuǎn)小程序的場景就聊到這里了，希望能給大家?guī)韼椭?，大家有遇到其他啥坑點也可以留言一起交流~

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

以上是聊聊從H5頁面跳轉(zhuǎn)到小程序的幾種實現(xiàn)方案（附常見坑點）的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！