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

背景
“服务号订阅通知灰度测试期自2021年1月27日0:00至4月30日24:00，期间服务号模板消息可正常使用；灰度测试期结束后服务号订阅通知的策略将另行公布，届时以官方信息为准”
参考链接：https://developers.weixin.qq.com/community/develop/doc/000a4e1df800d82acb9b7fb5e5b001?page=4#comment-list
订阅消息开始灰度测试
为了在服务号模板消息发生不可预知的改变之后能迅速切换到订阅消息，最大限度降低对现有系统的影响，先提前熟悉下对接订阅消息。
订阅通知介绍:https://developers.weixin.qq.com/doc/offiaccount/Subscription_Messages/intro.html
开放标签：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E6%9C%8D%E5%8A%A1%E5%8F%B7%E8%AE%A2%E9%98%85%E9%80%9A%E7%9F%A5%E6%8C%89%E9%92%AE-wx-open-subscribe
步骤
1、开通订阅通知，新增订阅消息模板
2、H5页面添加订阅消息按钮，进行订阅
3、H5页面必须在服务号js接口安全域名下，并通过config接口注入权限验证配置并申请所需开放标签。
openTagList要注意不能为空，否则不会有报错，但是无法渲染出订阅按钮。

 wx.config({
                        debug: true,
                        appId: data.appId,
                        timestamp: data.timestamp,
                        nonceStr: data.nonceStr,
                        signature: data.signature,
                        jsApiList: [
                            'checkJsApi'
                        ],
						openTagList: ['wx-open-subscribe']
                    });

4、随便写写一个demo页面，具体样式美化交给前端。

<div id="wxsub">
div>
var dom1 = document.getElementById('wxsub')
    dom1.innerHTML =
        '<wx-open-subscribe id="subscribet" template="你的模板id" ><template><style>  .subscribe-btn {   color: #000000; width: 100%; height:100%; display: block; text-aligin:center; }style><button class="subscribe-btn">测一次性模版消息订阅button>template>wx-open-subscribe>';
    var subscribet = document.getElementById('subscribet')
   subscribet.addEventListener('success', function (e) {
      console.log('s-success',e);
      console.log('success',e.detail);
   })
   subscribet.addEventListener('error', function (e) {
      console.log('s-error',e);
      console.log('error',e.detail);
   })

5、点击按钮可以跳出订阅弹窗

6、接收订阅消息状态推送

<xml><ToUserName>ToUserName>
<FromUserName>FromUserName>
<CreateTime>1615984496CreateTime>
<MsgType>MsgType>
<Event>Event>
<SubscribeMsgPopupEvent>
<List>
<TemplateId>TemplateId>
<SubscribeStatusString>SubscribeStatusString>
<PopupScene>1PopupScene>
List>
SubscribeMsgPopupEvent>xml>

7、根据用户订阅状态，确定是否对其下发订阅消息。
8、目前来说一次性订阅消息缺失很难切合业务逻辑，希望模板消息不会下架、或者开放长期订阅消息模板申请。