1. 样式
跳转小程序的开放标签：wx-open-launch-weapp分两个部分
- 开放标签
开放标签都能像普通的HTML标签一样在页面中直接使用，我们可以为其添加class、id等全局属性节点，并且可以设置其样式。但是需要特别注意的是开放标签不是插槽模版中节点的包含块。
例如：
<wx-open-launch-weapp
id="launch-btn"
username="原始ID"
path="pages/index/index"
>
<script type="text/wxtag-template">
<style>.btn { width: 100%; height: 100% }</style>
<div class="btn">test2</div>
</script>
</wx-open-launch-weapp>
#launch-btn {
width: 100px;
height: 100px
}
结果：插槽模版中.btn节点宽高设置100%无效
另外，用户无法只通过点击开放标签来跳转小程序，需要点击插槽模版中节点。
- 插槽模版中节点
插槽中模版的样式是和页面隔离的，也就是说无法在挂载dom元素后动态修改其样式。这就造成插槽模版中节点无法自适应屏幕。
不过我们可以通过在开放标签中设置overflow: hidden;，然后给插槽模版中节点适当增加大小来实现布局要求，例如
<div class="box">
<wx-open-launch-weapp
id="launch-btn"
username="原始ID"
path="views/index/service-center/service-center"
>
<script type="text/wxtag-template">
<style>.btn { width: 1000px; height: 1000px }</style>
<div class="btn">test2</div>
</script>
</wx-open-launch-weapp>
</div>
.box {
position: relative;
width: 100px;
height: 100px;
}
#launch-btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
overflow: hidden;
}
2. 引入 JS-SDK
Jssdk 的使用，点击微信网页开发文档
3. 细节
文档看完，大家可能有点懵，具体到代码中，就是开放标签不显示，你可以排查下下面几个问题：
是否配置安全域名
是否是服务号
通过config接口注入权限验证配置时，url是否正确、jsApiList必填，即便是没有也要写成
sApiList: ['']小心 iOS !!!
4. vue中使用技巧
不管是hash模式还是history模式，你仅仅需要这么做：
// main.js
import wx from 'weixin-js-sdk';
import axios from 'axios';
(async function() {
// 接口中入参有一个url，直接取location.href.split('#')[0]
const { data: wxData } = await axios.post('你们后端提供的接口');
wx.config({
appId: wxData.appid, // 必填，公众号的唯一标识
timestamp: wxData.timestamp, // 必填，生成签名的时间戳
nonceStr: wxData.nonce, // 必填，生成签名的随机串
signature: wxData.signature,// 必填，签名
jsApiList: [''],
openTagList: ['wx-open-launch-weapp']
});
})();
然后就可以在每个单文件组件中使用了，对，就是这么神奇！！！！
5. vue3
在vue3中，不能在 <template></template> 中写 <script></script> <style></style> ，然后你需要用到特殊attribute is ，但是vue-eslint-plugin会报错，需要用vue3.0新增指令 v-is ，但是 vue3.1弃用了，这就矛盾了，但是试了 v-is 还是可以的：
<wx-open-launch-weapp username="原始ID" path="pages/index/index">
<div v-is="'script'" type='text/wxtag-template'>
<div v-is="'style'">
.btn {
color: red;
}
</div>
<button class="btn">打开小程序</button>
</div>
</wx-open-launch-weapp>
