收藏
回答

wx-open-subscribe组件一直报的template can't be empty的问题?

基于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>
回答关注问题邀请回答
收藏

3 个回答

  • optimistic
    optimistic
    04-25

    组件需要 template 属性啊 你都注释了就报错了

    04-25
    有用
    回复
  • Mr.Zhao
    Mr.Zhao
    发表于移动端
    04-25
    你把button注释掉干啥
    04-25
    有用
    回复 2
  • 夏
    04-25

    04-25
    有用
    回复
登录 后发表内容