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

最近負責的一個需求涉及到H5頁面跳轉小程式的場景，具體應用場景是：

##運營通過簡訊發(fā)送鏈接觸達用戶=> 用戶點開連結=> 跳轉至小程式指定的某個頁面

下面我們來看看H5跳轉小程式目前有哪些實作方案~

實作方案

實作H5跳轉小程式的方案目前有多種，可以根據(jù)自己的實際場景選擇，而上述的場景採用第二種較為合適，我們先來一個個看。 【相關學習推薦：

小程式開發(fā)教學】

第一種：透過URL Scheme

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

小程式的

URL Scheme 如果借助於雲(yún)端開發(fā)的話，是免鑑權，直接調(diào)用即可獲取，這裡不過多贅述，感興趣的童鞋自己查文檔吧~

那要如何取得小程式的URL Scheme 呢？可透過

服務端介面或在小程式管理後臺「工具」-「產(chǎn)生 URL Scheme」入口可以取得開啟小程式任意頁面的 URL Scheme。

使用範例

下圖是透過：【小程式管理後臺- 工具- 產(chǎn)生URL Scheme 】的頁面

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

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

其他細節(jié)可參考

微信官方文件

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

這種一般適用於不需要額外開發(fā)H5頁面，直接產(chǎn)生鏈接，用戶透過開啟連結即可跳轉指定的小程式頁面。

打開連結後，會有微信預設的H5中轉頁（想要自訂H5中轉頁也是可以的），目前的版本已經(jīng)支援預設自動跳轉小程序，不需要用戶確認，這點很不錯。

取得

URL Link

的方式

透過

服務端介面

可以取得開啟小程式任意頁面的URL Link

具體細節(jié)可參考

微信官方文件

。 踩坑記錄

調(diào)微信產(chǎn)生URL Link 的
• 介面

  中，參數(shù)path 只認正式版，雖然有env_version 這個環(huán)境變量，然而並沒有用（也就是說設定的path 必須是正式版已經(jīng)存在的，否則會報：invalid weapp pagepath ）。

產(chǎn)生的URL Link，也就是
• https://wxaurl.cn/pFawq35qbfd

  這種短鏈在微信環(huán)境中打開隻會跳【正式版】，即使你的env_version 設定了【體驗版】或【開發(fā)版】，需要在外部瀏覽器打開才能跳轉指定的版本，參考。

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

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

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

• 需要 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跳轉小程序
• wx-open-launch-app - 指H5跳轉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，有毒。

最后

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

更多編程相關知識，請訪問：編程視頻?。?/p>

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