在做到这块的时候真的踩了很多的坑，下面就讲讲一一的步骤，讲讲需要注意的地方
我是用原生html去实现的，没有用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协议的，而官方当时给的地址是http协议的，当时引入后就会报下面的错误，这个时候可以直接改成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出来，若要查看传入的参数，可以在pc端打开，参数信息会通过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信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
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信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});
},
error: (err) => {
console.log('err', err)
}
})
</script>
</body>
</html>
这里讲几个注意的点
1. 通过wx.config接口注入后才能获取到<wx-open-launch-weapp>开放标签，这也是当时我一直纳闷为啥不显示标签的原因
2. wx.config 配置查看官方文档就行
3. 遇到过一个签名失效的情况，这个原因呢就是获取后台签名信息的时候，请求接口的地址url参数传错了，这个就是涉及到签名算法的问题了
4. 其他参数
- username 跳转的小程序的原始id
- path 跳转的小程序的路径，可以携带参数
- wx.config中的appid，这里我取的是后台返回的微信公众号的appid
