微信开放标签 wx-open-subscribe（复数模板）

1. 以为wx-open-subscribe例子，先公众号设置-》功能设置绑定JS接口安全域名
   
2. 保证"weixin-js-sdk": “^1.6.0” 在1.6或以上和微信，安卓，iOS版本
3. html代码：（这里用的是vue，原生看看官网就行）

<wx-open-subscribe style="width: 40vw;" @success="success" @error="subError" :template="subTemplateId" id="subscribe-btn" >
    <script type="text/wxtag-template"> // 在vue框架里，根据官网提示用这种替换template
        <style>
            .btn2 {
      
                width: 100%;
                border: none;
                padding: 15px 0;
                background: #ff4444;
                color: #fff;
            }
        </style>
        <button class="btn2">立即参与</button>
    script>
wx-open-subscribe>

	data() {
        return {
            subTemplateId: ["wSbf3J8bIpB9bxxxxxxxv-CDOScilTaSU", "pMQDjl-xxxxF-bpfpSHl4rIBo9pbKs"]
        }
    },

4. js代码：（注：错误提示是指弹出订阅框的错误，而不是用户点击取消订阅, 注意看官方文档的解释）

// 错误提示
subError(e) 
    console.log(e.errMsg)
}

// 我这里判断是必须把复数模板全部订阅
success(e) {
     
    let attend = false;
    let subscribeDetails = JSON.parse(e.detail.subscribeDetails); // 全部的模板
    for(let i in this.subTemplateId) {
     
        let subKey = subscribeDetails[this.subTemplateId[i]]; // 获取每个模板的状态
        let status = JSON.parse(subKey);
        let type = false;
        switch(status.status){
     
            case "reject":
                this.$toast(`用户拒绝订阅全部消息`);
                type = false;
                break;
            case "cancel":
                this.$toast(`用户取消订阅全部消息`);
                type = false;
                break;
            case "filter":
                this.$toast(`第${
       i}条消息应该标题同名被后台过滤`);
                type = false;
                break;
            default:
                type = true;
                break;
        };
        if(!type) {
      // 如果其中有一个模板没有订阅，则全部不通过过
            attend = false;
            break;
        } else {
     
            attend = true;
        };
    };
    if(!attend) {
     
        this.$toast("订阅消息才能参与")
        console.log("订阅消息才能参与")
        return
    };
    console.log("参与成功")
}

5. 在开发工具中用微信开放标签还可能会报错说 标签 未定义，可以在main.js 里加入下面代码：Vue.config.ignoredElements = ["wx-open-subscribe"];

微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html