直接代码 ,得在正式环境测试,本地没效果
引入js <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js "></script>
根据情况先配置:
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: [ 'wx-open-subscribe'] // 引入公开组件
});
vue文件:
<template>
<wx-open-subscribe
template="一次性订阅的模板id"
id="subscribe-btn"
>
<component :is="'script'" type="text/wxtag-template">
<button style="border: none; width: 200px; height: 50px">
一次性模版消息订阅
</button>
</component>
</wx-open-subscribe>
</template>
<script>
import { onMounted, ref } from 'vue';
import { isWechat } from '@/utils';
export default {
name: 'wxtest',
setup() {
onMounted(() => {
if (isWechat()) {
// 因为在vue里面直接用wx-open-subscribe识别不出来,得真实微信下才行
var btn = document.getElementById('subscribe-btn');
btn.addEventListener('success', function (e) {
console.log('success', e.detail);
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
}
});
return {};
},
components: {}
};
</script>