- 以为wx-open-subscribe例子,先公众号设置-》功能设置绑定JS接口安全域名
- 保证"weixin-js-sdk": “^1.6.0” 在1.6或以上和微信,安卓,iOS版本
- 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"]
}
},
- 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
- 效果图: