vue 微信公众号网页开发 跳转小程序 踩坑

记录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