微信H5喚醒APP和小程序

概述

微信開放標簽是微信公眾平台面向網頁開發者提供的擴展標簽集合。通過使用微信開放標簽，網頁開發者可安全便捷地使用微信或系統的能力，為微信用戶提供更優質的網頁體驗。

此文檔面向網頁開發者，介紹微信開放標簽如何使用及相關注意事項。需要注意的是，微信開放標簽有最低的微信版本要求，以及最低的系統版本要求。

微信版本要求為：7.0.12及以上。 系統版本要求為：iOS 10.3及以上、Android 5.0及以上。

開放標簽使用步驟

微信開放標簽使用步驟與微信JS-SDK類似，也需要引入JS文件等步驟。如果是公眾號身份的網頁，需要綁定安全域名，如果是使用小程序雲開發靜態網站托管的小程序網頁，則不需綁定安全域名即可直接使用（即跳過下面"步驟一：綁定安全域名"）。

步驟一：綁定域名

登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
綁定域名

1. 使用說明
2. 關聯說明
3. 設置入口
4. 綁定域名和移動應用
5. 接入微信開放標簽

步驟二：引入JS文件

在需要調用JS接口的頁面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

如需進一步提升服務穩定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

備注：支持使用 AMD/CMD 標准模塊加載方法加載。

步驟三：通過config接口注入權限驗證配置並申請所需開放標簽

與使用JS-SDK配置方式相同，所有需要使用開放標簽的頁面必須先注入配置信息，並通過openTagList字段申請所需要的開放標簽，否則將無法使用（同一個url僅需調用一次）。開放標簽的申請和JS接口的申請相互獨立，因此是可以同時申請的。

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

簽名算法見JS-SDK說明文檔的附錄1，所有開放標簽列表見文末的附錄1。

步驟四：通過ready接口處理成功驗證

wx.ready(function () {
  // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中
});

步驟五：通過error接口處理失敗驗證

wx.error(function (res) {
  // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名
});

使用說明

所有開放標簽都能像普通的HTML標簽一樣在頁面中直接使用，不需要再進行額外的處理。

如果所使用的標簽允許提供插槽，由於插槽中模版的樣式是和頁面隔離的，因此需要注意在插槽中定義模版的樣式。插槽模版及樣式均需要通過``進行包裹。對於Vue等視圖框架，為了避免template標簽沖突的問題，可使用<script>進行代替，來包裹插槽模版和樣式。另外，對於具名插槽還需要通過slot屬性聲明插槽名稱，下文標簽插槽中的default插槽為默認插槽，可不聲明插槽名稱。

對於標簽事件，均可通過event.detail獲得詳細信息。如果無特殊說明，下文標簽事件說明中的返回值均指代event.detail中的內容。

另外，需要注意以下幾點：

1. 頁面中與布局和定位相關的樣式，如position: fixed; top -100;等，盡量不要寫在插槽模版的節點中，請聲明在標簽或其父節點上；
2. 對於有CSP要求的頁面，需要添加白名單frame-src https://*.qq.com webcompt:，才能在頁面中正常使用開放標簽。

開放標簽說明

小程序跳轉按鈕：

用於頁面中提供一個可跳轉指定小程序的按鈕。使用此標簽后，用戶需在網頁內點擊標簽按鈕方可跳轉小程序。H5 通過開放標簽打開小程序的場景值為 1167.

此功能的開放對象：

1. 已認證的服務號，服務號綁定“JS接口安全域名”下的網頁可使用此標簽跳轉任意合法合規的小程序。
2. 已認證的非個人主體的小程序，使用小程序雲開發的靜態網站托管綁定的域名下的網頁，可以使用此標簽跳轉任意合法合規的小程序。

錯誤提示

若跳轉時出現以下頁面，表示網頁綁定的服務號或小程序無權限，請檢查是否符合上述開放對象條件。

屬性

名稱	必填	默認值	備注
username	是		所需跳轉的小程序原始id，即小程序對應的以gh_開頭的id
path	否		所需跳轉的小程序內頁面路徑及參數

備注：對於path屬性，所聲明的頁面路徑必須添加.html后綴，如pages/home/index.html。

插槽

名稱	必填	默認值	備注
default	是		跳轉按鈕模版及樣式

事件

名稱	冒泡	返回值	備注
ready	否		標簽初始化完畢，可以進行點擊操作
launch	否		用戶點擊跳轉按鈕並對確認彈窗進行操作后觸發
error	否	{ errMsg: string }	用戶點擊跳轉按鈕后出現錯誤

備注：error事件返回值errMsg說明如下。

errMsg	說明
"launch:fail"	跳轉失敗

用例

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打開小程序</button>
  </template>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

App跳轉按鈕：

用於頁面中提供一個可跳轉指定App的按鈕。此功能僅開放給已認證的服務號，在使用該標簽之前，首先需要前往微信開放平台的管理中心-公眾賬號或小程序詳情-接口信息-網頁跳轉移動應用-關聯設置中綁定所需要跳轉的App。詳細配置規則參考文檔《微信內網頁跳轉APP功能》

屬性

名稱	必填	默認值	備注
appid	是		所需跳轉的AppID
extinfo	否		跳轉所需額外信息

備注：對於extinfo屬性，用於攜帶額外信息，格式自定義，由跳轉的App自⾏解析處理。對應iOS微信openSDK中的messageExt字段（LaunchFromWXReq.message.messageExt），或對應Android微信openSDK中的messageExt字段（ShowMessageFromWX.Req.message.messageExt），詳細參見文檔《App獲取開放標簽中的extinfo數據》。

插槽

名稱	必填	默認值	備注
default	是		跳轉按鈕模版及樣式

事件

名稱	冒泡	返回值	備注
ready	否		標簽初始化完畢，可以進行點擊操作
launch	否		用戶點擊跳轉按鈕並對確認彈窗進行操作后觸發
error	否	{ errMsg: string }	用戶點擊跳轉按鈕后出現錯誤

備注：error事件返回值errMsg說明如下。

errMsg	說明
"launch:fail"	調⽤失敗，或安卓上該應用未安裝，或iOS上用戶在彈窗上點擊確認但該應⽤未安裝
"launch:fail_check fail"	校驗App跳轉權限失敗，請確認是否正確綁定AppID

用例

<wx-open-launch-app
  id="launch-btn"
  appid="your-appid"
  extinfo="your-extinfo"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">App內查看</button>
  </template>
</wx-open-launch-app>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

uniApp

//在uniapp的app.vue的onLaunch里寫
this.checkArguments();
plus.globalEvent.addEventListener('newintent', e => {
　　this.checkArguments(); // 檢測啟動參數
　});

//在app.vue的methods中添加方法
checkArguments() {
            console.log('runtime.launcher: ' + plus.runtime.launcher);
            // 判斷APP打開方式 miniProgram為微信小程序打開
            if (plus.runtime.launcher == 'miniProgram') {
                // plus.runtime.argumrnts為打開時APP傳的值(<wx-open-launch-app>中的extinfo),可以傳字符串通過符號截取判斷類型
                console.log(plus.runtime.arguments);
                if (plus.runtime.arguments) {
　　　　　　　　　　　　//我截取了字符串,判斷是商品並且根據ID跳轉到商品詳情頁
                    var str = plus.runtime.arguments;
                    var arr = str.split('/');
                    var id = arr[1];
                    if (arr[0] == 'goods') {
　　　　　　　　　　　　　　//跳轉到商品詳情頁,注意pages前面的"/"不要忘記,否則會造成無法跳轉。使用navigateTo跳轉到頁面會有返回按鈕,點擊返回到首頁
                        uni.navigateTo({
                            url: '/pages/goods/goods?id=' + id
                        });
                    }
                }
            } 
        }