微信开放标签 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() { //这里是vue里面的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-1. 在 Vue 中使用，在开发工具中用微信开放标签还可能会报错说 标签 未定义，可以在main.js 里加入下面代码：Vue.config.ignoredElements = ["wx-open-subscribe"]; （本文是vue环境）;

5-2.在 React 中使用，因为不兼容合成事件，所以需要绑定原生事件。

function Audio() {
  const audio = useRef(null);
  useEffect(() => {
    const canplay = () => {};
    const pause = () => {};
    const seeked = () => {};
    audio.current.addEventListener('canplay', canplay);
    audio.current.addEventListener('pause', pause);
    audio.current.addEventListener('seeked', seeked);
    return () => {
      audio.current.removeEventListener('canplay', canplay);
      audio.current.removeEventListener('pause', pause);
      audio.current.removeEventListener('seeked', seeked);
    };
  }, []);
  return (
    <wx-open-audio
      ref={audio}
      title="别找我麻烦"
      src="http://xxx.xxx.com/.mp3"
    >
      <script type="text/wxtags-template">
        <button>播放</button>
      </script>
    </wx-open-audio>
  );
}

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

6. 效果图：