在做到這塊的時候真的踩了很多的坑，下面就講講一一的步驟，講講需要注意的地方
我是用原生html去實現(xiàn)的，沒有用vue框架
下面是相關參看網址：
- 微信JS-SDK說明文檔（http://caibaojian.com/wxwiki/0030551f015f01ecaa56d20b88ee3c6cb32503bf.html#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E7.BB.91.E5.AE.9A.E5.9F.9F.E5.90.8D）
- 微信公眾平臺官方跳轉步驟文檔（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21）
- 輔助參看文檔（https://developers.weixin.qq.com/community/develop/article/doc/0002ac222dcbf8b5e24bbbe445ac13）
一、 綁定域名
使用js-jdk需要去綁定域名，就是在公眾號后臺去綁定你的h5域名（或者將你的代碼部署到某個服務器域名下），這也是很重要的，當時我都不知道，很懵逼，并且你的公眾號是需要認證的，如果沒有綁定的話，本地代碼測是沒有作用的
二、引入JS文件 （注意必須是1.6.0版本以上）
這也是踩坑的一步，因為我綁定的域名是https協(xié)議的，而官方當時給的地址是http協(xié)議的，當時引入后就會報下面的錯誤，這個時候可以直接改成https（當然，如果是用vue狂下，也沒有這個步驟，直接安裝weixin-js-sdk插件就行）
后面附上官方地址和截圖
三、做好上面兩個步驟后，就可以敲代碼了
直接貼上全部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>doem2</title>
</head>
<body>
<wx-open-launch-weapp
id="launch-btn"
username="gh_*****"
path="/pages/bind/index.html"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打開小程序</button>
</script>
</wx-open-launch-weapp>
<script src="./js/jquery-3.5.1.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
$.ajax({
url: 'https://*****?url=https:****', // 獲取微信簽名登配置的請求地址
headers: {}, // 請求頭信息
success: (res) => {
console.log('res', res)
wx.config({
beta: true,
appId: res.data.appId, // 必填，公眾號的唯一標識
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印
timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
signature: res.data.paySign, // 必填，簽名
jsApiList: [
'scanQRCode',
'onMenuShareQZone',
'onMenuShareWeibo',
'onMenuShareQQ',
],
openTagList: ['wx-open-launch-weapp'] // 獲取開放標簽權限
})
wx.ready(function () {
// config信息驗證后會執(zhí)行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數(shù)中調用來確保正確執(zhí)行。對于用戶觸發(fā)時才調用的接口，則可以直接調用，不需要放在ready函數(shù)中
console.log('ready')
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.error(function (err) {
console.log('失敗err', err);
// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名
});
},
error: (err) => {
console.log('err', err)
}
})
</script>
</body>
</html>
這里講幾個注意的點
1. 通過wx.config接口注入后才能獲取到<wx-open-launch-weapp>開放標簽，這也是當時我一直納悶為啥不顯示標簽的原因
2. wx.config 配置查看官方文檔就行
3. 遇到過一個簽名失效的情況，這個原因呢就是獲取后臺簽名信息的時候，請求接口的地址url參數(shù)傳錯了，這個就是涉及到簽名算法的問題了
4. 其他參數(shù)
- username 跳轉的小程序的原始id
- path 跳轉的小程序的路徑，可以攜帶參數(shù)
- wx.config中的appid，這里我取的是后臺返回的微信公眾號的appid
