基于vue2开发,一直报:VM1023:4 [WXTAG] [JSCORE] template can't be empty
<template>
<div class="app-container">
<wx-open-subscribe v-if="isWechatReady" id="wx-open-subscribe" template-id="Q_J-LrD3F4qW6fFmbNg3GMEnoWXdtCvzUsW6fnFdqYQ">
<script type="text/wxtag-template">
<div style="background: #287AED;width: 325px;height: 40px;border-radius: 20px;font-size: 16px;color: #FFFFFF;display:flex;align-items:center;justify-content:center;">
订阅
</div>
</script>
<!-- <template v-slot:default>
<button class="subscribe-btn">订阅消息</button>
</template> -->
</wx-open-subscribe>
</div>
</template>
<script>
import { jsapi } from "@/api/test/send";
export default {
name: "test",
data() {
return {
appId: 'wx470fbb322efc3e8a',
timestamp: '',
nonceStr: '',
signature: '',
isWechatReady: false,
};
},
mounted() {
let that = this;
this.$nextTick(() => {
that.getWxConfig();
});
},
methods: {
getWxConfig() {
let url = window.location.href.split('#')[0];
jsapi({url:url}).then(res=>{
console.log(JSON.stringify(res))
this.timestamp = res.data.timestamp;
this.nonceStr = res.data.nonceStr;
this.signature = res.data.signature;
this.initWxConfig();
});
},
initWxConfig() {
wx.config({
debug: false,
appId: this.appId,
timestamp: this.timestamp,
nonceStr: this.nonceStr,
signature: this.signature,
jsApiList: ['checkJsApi'],
openTagList: ['wx-open-subscribe','wx-open-subscribe-dialog']
});
wx.ready(() => {
console.log('微信 JS - SDK 初始化成功');
this.isWechatReady = true;
//this.bindSubscribeEvent();
});
wx.error((res) => {
console.error('微信 JS - SDK 初始化失败', res);
});
},
bindSubscribeEvent() {
const subscribeBtn = document.getElementById('wx-open-subscribe');
if (subscribeBtn) {
subscribeBtn.addEventListener('change', (event) => {
const { detail } = event;
if (detail.errMsg ==='subscribe:ok') {
console.log('订阅成功');
} else {
console.log('订阅失败', detail.errMsg);
}
});
}
},
subscribeSuccess(res) {
console.log('订阅成功', res);
// 可以在这里添加订阅成功后的逻辑,比如提示用户等
},
subscribeError(err) {
console.error('订阅失败', err);
// 可以在这里添加订阅失败后的逻辑,比如提示用户重试等
}
}
};
</script>
<style scoped>
.subscribe-btn {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.subscribe-btn:hover {
background-color: #0056b3;
}
</style>
组件需要 template 属性啊 你都注释了就报错了