按照官方文档上示例： <wx-open-subscribe template="TenXXXXXXjCp4XXXXXXXXXXXXXX" id="subscribe-btn"> <script type="text/wxtag-template" slot="style"> <style> .subscribe-btn { color: #fff; background-color: #07c160; } </style> </script> <script type="text/wxtag-template"> <button class="subscribe-btn"> 一次性模版消息订阅 </button> </script> </wx-open-subscribe> <script> var btn = document.getElementById('subscribe-btn'); btn.addEventListener('success', function (e) { console.log('success', e.detail); }); btn.addEventListener('error',function (e) { console.log('fail', e.detail); }); /** * 获取微信签名 */ function getSignature(){ $.ajax({ type:"post", url:"/*****/getSignature.do", data:{"path":window.location.href}, dataType:"json", async:false, success:function(res){ wx.config({ debug: true, appId: res.appId, // 必填，公众号的唯一标识 timestamp: res.timestamp, // 必填，生成签名的时间戳 nonceStr: res.noncestr, // 必填，生成签名的随机串 signature: res.signature,// 必填，签名 jsApiList: [],//必须要不调用小程序标签渲染不出来 openTagList: ['wx-open-subscribe']//可选，需要使用的开放标签列表，例如['wx-open-launch-app','wx-open-subscribe] }); wx.ready(function () { alert('ready');//调用成功的时候执行 包括 用户确认授权后执行。 console.log("ready"); }); wx.error(function (res) { // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中 alert("错误", res); console.log("res", res); }); } }) } </script> 场景1： 无订阅过的用户，首次触发 button 一次性模版消息订阅按钮，页面底部可以正常调起客户端服务号订阅通知界面，供用户选择是否允许订阅操作 场景2： 已经订阅过的用户，再次触发 button 一次性模版消息订阅按钮，页面底部无法正常调起客户端服务号订阅通知界面，供用户选择是否允许订阅操作， 且按钮操作返回 subscribeDetails 都有订阅状态信息 场景3： 已经服务通知里取消了订阅的用户，再次触发 button 一次性模版消息订阅按钮，页面底部无法正常调起客户端服务号订阅通知界面，供用户选择是否允许订阅操作， 且按钮操作返回 subscribeDetails 都有订阅状态信息