记录vue3（vue2 也通用）在微信公众号网页开发中，跳转微信小程序的踩坑：
步骤一：使用微信JSSDK
微信JSSDK官方说明，估计找到这篇文章的都看了文档。
不多说，在这个步骤中，后端和前端都有各自的事情做，我分别讲解各自的责任：
前端责任
引入js文件，直接在 index.html 中引用就成：
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
引入过后，你当前的浏览器环境会有一个全局变量wx（直接wx访问，或者window.wx、globalThis.wx都是可以的），但是这个变量不能马上用，必须你将当前网页的路径（不包括#号以及后面的路径，包括#号前面的那个斜杠 / ）传给后端，后端根据你传的路径返回给你 appId、timestamp、nonceStr、signature，然后根据这些参数调用 wx.config，进行wx的初始化：
wx.config({
debug: true, // 调试的时候打开
appId: '', // 后端的事情
timestamp: '', // 后端的事情
nonceStr: '', // 后端的事情
signature: '',// 后端的事情
jsApiList: [] ,// 需要的能力，比如拍照、获取信息等等，跳转小程序不需要
openTagList:[] // 能够使用的标签，也就是HTML标签，只不过是微信自定义的。
});
有哪些标签，看这里。
由于跳转小程序需要一个微信自定义的标签wx-open-launch-weapp，所以上面的配置中的 openTagList 我是这样的：
openTagList:[`wx-open-launch-weapp`]
配置后，就可以在微信中网页中使用了
后端责任
我简单讲解：
保证微信开发是服务号，而不是订阅号，因为只有服务号才能小程序跳转。
首先得后端绑定域名，向微信平台获取访问凭证access_token，根据这个凭证再次访问微信平台得到jsapi_ticket。
然后，根据前端传来的路径基于jsapi_ticket进行加密，加密请看微信JSSDK官方说明。
注意，vue开发的网页，基本都是单页面应用，比如 http://aa.baidu.com/#/aa，那么后端需要的路径就是：http://aa.baidu.com/，注意需要最后的/是需要的，这是我踩的坑，不然前端配置初始化会失败。所以，单页面应用写死路径也可以。
还有路径写死的话，前端就不能在本地开发了，比如以http://localhost:8080/#/home这种，那前端也会失败。所以可以内网穿透，并代理前端的内网地址，将代理的域名添加白名单，然后以域名的形式访问进行调试，就可以了。
步骤二、跳转小程序
wx配置后，就可以使用微信内置的HTML标签了，官方的示例是这样的：
<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>
在vue2中可以用v-html渲染。但是在vue3中会编译出错，因为在 vue 的 template 中，不允许 script 和 style 出现。而 wx-open-launch-weapp 会有警告，但是可以渲染。
我们需要vue跳过对内部 script 和 style 的渲染：
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<div v-is="script" type="text/wxtag-template" style="display: block">
<div v-is="style" style="display: block">.btn { padding: 12px }</div>
<button class="btn">打开小程序</button>
</div>
</wx-open-launch-weapp>
v-is 会将其渲染成指定标签,但是vue 3.1.0版本已经废弃，将 v-is 替换成 is 就可以了,比如上面的样式在高版本的vue3中可以这么写：
<div is="style">.btn { padding: 12px }</div>
常见问题：
- 样式不出现，设定的div或者按钮不出现，注意上面的设置
style="display: block"，这个是必须的，不然其渲染生成的会默认display: none - 按钮点击没有反应，注意
wx.config后会在控制台输出信息：
，注意到只有 jsApiList，而没有 openTagList ，或者只是一个空数组，没有["wx-open-launch-weapp"]。注意这个功能只有服务号才有，订阅号是没有的。或者，不能用测试号小程序id，必须已经发布的小程序id