需求: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上,这样就不用改到之前的样式了,排版也不会乱
需要部署到线上签名才能成功哦