本篇內(nèi)容主要講解“從H5頁面跳轉(zhuǎn)到小程序的實現(xiàn)方案有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“從H5頁面跳轉(zhuǎn)到小程序的實現(xiàn)方案有哪些”吧!

成都創(chuàng)新互聯(lián)公司擁有十載成都網(wǎng)站建設(shè)工作經(jīng)驗,為各大企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作服務(wù)，對于網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、成都app軟件開發(fā)、wap網(wǎng)站建設(shè)（手機版網(wǎng)站建設(shè)）、程序開發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、主機域名等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等網(wǎng)站化運作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項目的能力。

實現(xiàn)方案

實現(xiàn)H5跳轉(zhuǎn)小程序的方案目前有多種，可以根據(jù)自己的實際場景選擇，上面提到的場景采用第二種更合適，我們先來一個個看。

第一種：通過 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)指定的小程序頁面。

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

獲取 URL Link 的方式

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

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

踩坑記錄

• 調(diào)微信生成 URL Link 的接口中，參數(shù) path 只認正式版，雖然有 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頁面嵌入微信標簽

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

• 需要 js-sdk-1.6.0 以上才支持 

• 在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 - 服務(wù)號訂閱通知按鈕

• wx-open-audio - 音頻播放

HTML標簽示例

    
        ...