基于Vue框架，在微信H5页面创建订阅消息功能

服务号订阅通知按钮：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
		            // 这里面可以写订阅成功的事件，把点击订阅得到的参数传给后台做记录
				
				});   
    	},

 下面给个案例展示

结束：如有不了解的可以留言，相互学习。

 生活不易，下面是我自己的小程序，看到的麻烦扫码打开给个支持啊，订阅通知，后面有福利活动会通知奥