前言：
最近公司有一個這樣的需要，需要從我們在現有的公眾號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>
實現效果：
