vue3 H5跳转小程序

需求：H5里面有商城列表，点击之后跳转对应的小程序

微信jssdk有这个跳转小程序开发功能（仅限再微信浏览器中使用），简单查阅了一下文档和家人们的分享，似乎好像没啥难度，页面签名，点击的时候调用wx-open-launch-weapp这个开放标签，传入相应的值，就OK了！

首先，先看看文档先（jssdk文档：目录 | 微信开放文档）

再wx.config中一定要配置openTagList

 

 这是官网的示例，path路径要加.html（比如：pages/home/index.html?user=123&action=abc）

<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，所以关于vue3项目引入wx-open-launch-weapp的文章不多)

不过最终还是找到几篇解决办法的文章

将

<script type="text/wxtag-template"></script>

改成

<div v-is="'script'" type="text/wxtag-template"></div>

 然后就可以编译成功了

但是编译成功之后又报了警告

在main.js里面添加下面这一行就不会报警告了

 添加完之后本地还是会报警告，但是部署到测试上就不会有这个问题了

接着就是最折磨人的样式问题了

wx-open-launch-weapp里面写入样式很多都不生效

后来我决定给个空盒子，直接浮动在每一个item上，这样就不用改到之前的样式了，排版也不会乱

 需要部署到线上签名才能成功哦