服务号订阅通知按钮:wx-open-subscribe
注意事项和参数说明等,这些直接看官网 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#23
在vue 环境下,需要js 动态创建wx-open-subscribe 这个标签,不能按照官网的直接在页面里面写,
首选在页面你需要展示的地方写个dom元素
<div id="sub">
这里是放订阅消息按钮的,标签id 会用到,通过找到这个元素,然后添加进来
</div>
然后就是js部分,在vue 的methods 方法里面写
// 创建订阅号
createSubscribeBut(){
let script = document.createElement('script')
script.type = 'text/wxtag-template'
script.text = `<p class="mask-sub-btn" style="width: 200px;text-align: center;margin: 15px 0px;color: #fff;background-color: #00C553;border-radius: 50px;height: 40px;line-height: 40px;font-size: 14px;">点击订阅</p>`
// 创建订阅标签,把标签里面自定义的script标签内容插进去
let html = `<wx-open-subscribe template="NIGIMccEyV8M,MrtYqlJgDyh2ARYTs" id="share-success-subscribe-btn">${script.outerHTML}</wx-open-launch-weapp>`
document.getElementById('share-success-sub-wrap').innerHTML = html;
var subBtn = document.getElementById('share-success-subscribe-btn');
this.watchSub(subBt);
},
// 监听订阅事件
watchSub(subBtn){
let templateIdArr = ['订阅消息的模板id','订阅消息的模板id'];
let _this = this;
subBtn.addEventListener('success', function (e) {
let tps = [];
// 这个订阅返回的参数不是正常的json 需要转
let subdetail = JSON.parse(e.detail.subscribeDetails);
if( subdetail[templateIdArr[0]].indexOf('accept') !=-1){
tps.push(templateIdArr[0])
}
if( subdetail[templateIdArr[1]].indexOf('accept') !=-1){
tps.push(templateIdArr[1])
}
// 用户点击订阅消息,但是取消订阅,这个时候直接不走后面代码
if(!tps.length) return;
// 用户订阅了,就把订阅的模块id用逗号拼接下,传给后端,我这边是这样处理的,你根据后端接口需求来处理
tps = tps.join();
// 发送ajax 请求 XXXXX
// 这里面可以写订阅成功的事件,把点击订阅得到的参数传给后台做记录
});
},
下面给个案例展示
结束:如有不了解的可以留言,相互学习。
生活不易,下面是我自己的小程序,看到的麻烦扫码打开给个支持啊,订阅通知,后面有福利活动会通知奥