<wx-open-subscribe template='TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I' id='subscribe-btn'>
<script type="text/wxtag-template" slot="style">
<style>
.subscribe-btn {
color: #fff;
background-color: #07c160;
}
</style>
</script>
<script type="text/wxtag-template">
<button class="subscribe-btn">
一次性模版消息订阅
</button>
</script>
</wx-open-subscribe>
import wx from "weixin-js-sdk";
async mounted() {
const res = await config.WxConf({ uri: location.href });
//这里让用户订阅模板消息, 要到服务器上做才可以
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: res.appId , // 必填,公众号的唯一标识
timestamp:res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature,// 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-subscribe'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
await wx.ready(() => {});
}
插槽中模板的样式和页面是隔离的,所以不好做自适应布局,不太友好。我希望最终效果是:可以在需要添加订阅功能的组件上面添加透明蒙层(wx-open-subscribe),宽高刚好覆盖组件,这样就只需要单独给组件编写样式,而不用将样式写在 <script type="text/wxtag-template" slot="style">
最终代码:
Subscribe.vue
<template>
<div className='sub-Modal'>
<!--插槽中放需要添加订阅的组件 -->
<slot />
<wx-open-subscribe template='TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I' id='subscribe-btn'>
<script type='text/wxtag-template'>
<!-- div中必须有内容否则不生效 -->
<div>订阅</div>
</script>
</wx-open-subscribe>
</div>
</template>
<script>
export default {
async mounted() {
wx.config({
...
});
}
}
</script>
<style lang="scss" scoped>
.sub-Modal {
width: max-content;
height: max-content;
position: relative;
}
#subscribe-btn {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
</style>
给发送按钮添加订阅功能
<Subscribe>
<div className='w-14 h-8 bg-[#02C160] rounded text-white text-sm flex items-center justify-center'>
发送
</div>
</Subscribe>