前言：
最近公司有一個這樣的需要，需要從我們在現有的公衆號H5頁面中加一個跳轉到第三方小程序的按鈕。之前只知道小程序之間是可以相互跳轉的，今天查閱了下微信開發文檔原來現在H5網頁也支持小程序之間的跳轉了，下面就簡單描述一下對接的流程。
微信公衆號詳細對接文檔：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
公衆號關聯小程序：
注意：在對接跳轉之前我們需要在需要跳轉的小程序關聯到我們的公衆號中。公衆號可以關聯同一主體的小程序10個，不同主體的3個。
1、進入公衆號後臺，路徑：廣告與服務——小程序—小程序管理—添加
2、關聯小程序—管理員微信掃碼確認
3、搜索小程序名稱或APPID綁定
4、綁定成功等待小程序管理者同意
查看小程序原始id：
小程序原始id，即小程序對應的以
gh_開頭的id
找到關聯成功的小程序，鼠標放入其中找到詳情查看小程序原始id
綁定JS接口安全域名：
登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。
微信JS-SDK的使用步驟，配置信息生成詳細說明（.NET版）：
跳轉標籤、前提條件和屬性說明：
跳轉小程序：wx-open-launch-weapp
用於頁面中提供一個可跳轉指定小程序的按鈕。使用此標籤後，用戶需在網頁內點擊標籤按鈕方可跳轉小程序。H5通過開放標籤打開小程序的場景值爲1167。
開放對象
- 已認證的服務號，服務號綁定“JS接口安全域名”下的網頁可使用此標籤跳轉任意合法合規的小程序。
- 已認證的非個人主體的小程序，使用小程序雲開發的靜態網站託管綁定的域名下的網頁，可以使用此標籤跳轉任意合法合規的小程序。
錯誤提示
若跳轉時出現以下頁面，表示網頁綁定的服務號或小程序無權限，請檢查是否符合上述開放對象條件。
屬性
| 名稱 | 必填 | 默認值 | 備註 |
|---|---|---|---|
| username | 是 | 所需跳轉的小程序原始id，即小程序對應的以gh_開頭的id |
|
| path | 否 | 所需跳轉的小程序內頁面路徑及參數（不填寫的話默認跳轉小程序首頁） |
代碼實現：
注意：使用瀏覽器或者微信開發工具調試wx-open-launch-weapp開發標籤都不會顯示，只有在真機中才會有效果（前提還是config接口注入權限驗證配置通過）。
<html> <head> <title>H5打開小程序</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> </head> <body> <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> <!-- 公衆號 JSSDK --> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!--js代碼--> <script type="text/javascript"> var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { console.log('fail', e.detail); }); wx.ready(function () { var ua = navigator.userAgent.toLowerCase() var isWXWork = ua.match(/wxwork/i) == 'wxwork' var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger' if (isWeixin) { wx.config({ //debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印 appId: 'ccccxxxx4354353453', // 必填，公衆號的唯一標識 timestamp: 0123456, // 必填，生成簽名的時間戳 nonceStr: 'nonceStr', // 必填，填任意非空字符串即可 signature: 'signature', // 必填，填任意非空字符串即可 jsApiList: ['showOptionMenu', 'chooseImage', 'previewImage'], // 必填，隨意一個接口即可 openTagList: ['wx-open-launch-weapp'], // 填入打開小程序的開放標籤名 }) } else { alert("請在微信中打開"); } }) </script> </body> </html>
實現效果：
