微信官方文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/
一、 添加js安全域名（公众号必须为已认证的服务号）
将页面域名添加到JS接口安全域名中
在微信公众号后台->设置与开发->公众号设置->功能设置->JS接口安全域名
下载校验文件，将文件上传至填写域名或路径指向的web服务器（或虚拟主机）的目录（若填写域名，将文件放置在域名根目录下，例如wx.qq.com/****.txt；若填写路径，将文件放置在路径目录下，例如wx.qq.com/mp/****.txt），并确保可以访问，然后提交添加安全域名。
二、使用开放标签wx-open-launch-weapp（具体以微信官方文档为准）
1、引入 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）
2、生成签名
①、获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）
②、用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）
③、生成 JS-SDK 权限验证的签名
wx.config({
debug: false, //开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
appId: **, // 必填，公众号的唯一标识
timestamp:**, //必填，生成签名的时间戳
nonceStr: **, //必填，生成签名的随机串
signature:**, //必填，签名
jsApiList: ['updateAppMessageShareData'], // 必填，需要使用的 JS 接口列表
openTagList: ['wx-open-launch-weapp'], //选填，需要使用的开放标签
})
3、调试
可以使用微信开发者工具调试，如果控制台出现wx.config end中errmsg为cionfig:ok说明签名成功。
此时就可以使用微信开放标签：wx-open-launch-weapp跳转指定小程序（已认证的非个人主体的小程序）。
注意：只能用户主动点击该标签才生效。
4、wx-open-launch-weapp标签的用法（vue3）
在vue3里，script是不可以直接植入template里面的，会报错 VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates. 。解决办法是通过 v-is 进行绕过：使用 <div v-is="'script'" type="text/wxtag-template">以替代<script>。
<div class="btn_content">
<div class="normal_btn buy_info">打开小程序</div>
<div class="buy_info" v-if="isReady">
<wx-open-launch-weapp
ref="launch_btn"
username="gh_****"//必填，小程序原始id
path="**"//选填，要打开的小程序的地址，默认为首页
style="position:absolute;left:0;top:0;width:100%;height:100%;"
@ready=“onReady”//当标签可用时的回调
>
<div v-is="'script'" type="text/wxtag-template">
<div style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
</div>
</wx-open-launch-weapp>
</div>
</div>
<script setup>
const isReady=ref(false)
function onReady(){
isReady.value=true
}
</script>
.btn_content {
position: relative;
width: 286px;
height: 74px;
margin: 0 auto;
overflow: hidden;
}
.buy_info {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 40px;
font-weight: normal;
margin-bottom: 20px;
}
点击按钮出现即将打开小程序的提示弹窗，说明接入成功
三、扩展
1、H5页面直接打开小程序的其他方式
2、微信分享
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})});
注意：只有从公众号菜单中打开的页面才能正常使用分享功能，如果是直接访问连接的形式，分享出来的还是连接的形式。
