1、开通订阅通知

根据api开通 https://developers.weixin.qq.com/doc/offiaccount/Subscription_Messages/intro.html

2、设置订阅通知组件

根据api设置服务号订阅通知按钮

参考微信订阅消息接入 使用开放标签 在 H5网页设置订阅通知组件

3、通知

根据api设置send发送订阅通知

4、坑

4.1、错误代码：43101, 错误信息：user refuse to accept the msg rid: 636e06c6-372a03a5-52793c6d，微信原始报文：{"errcode":43101,"errmsg":"user refuse to accept the msg rid: 636e06c6-372a03a5-52793c6d"}

43101 用户拒绝接受消息，如果用户之前曾经订阅过，则表示用户取消了订阅关系

需要注意先设置订阅通知组件，api中步骤四：可以在图文消息、网页设置订阅通知组件已说明

代码部分

html

<wx-open-subscribe template="" id="subscribe-btn" appid="appid" >
 <script type="text/wxtag-template" slot="style">
 <style>
  .subscribe-btn {
   border-radius: 3px;
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   background-color: #21b9bb;
   border-color: #21b9bb;
   color: #fff;
   display: inline-block;
   margin-bottom: 0;
   font-weight: 400;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
  }
 </style>
 </script>
 <script type="text/wxtag-template">
  <button class="subscribe-btn">
   一次性模版消息订阅
  </button>
 </script>
</wx-open-subscribe>

html对应js

<script>
wx.config({
 debug: false,
 appId: data.appId,
 timestamp: data.timestamp,
 nonceStr: data.nonceStr,
 signature: data.signature,
 jsApiList: ["必填", ], // 必填，需要使用的JS接口列表
 openTagList: ["wx-open-subscribe"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});


var btn = document.getElementById('subscribe-btn');
 btn.addEventListener('success', function (e) {
  layer.msg('订阅成功');
  alert('订阅按钮调用成功');
            
 });
 btn.addEventListener('error',function (e) {
  alert('订阅按钮调用失败');
 })

</script>