h5网页中调用微信消息订阅wx-open-subscribe

在h5网页上调用微信api的文档如下：
官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

服务号订阅通知按钮：`wx-open-subscribe`

第一步：

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

第二步：

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
备注：<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>，如果是vue或者react开发的单页面，则直接在index.html页面头部引入即可

第三步：

如下一些参数，是服务端调取微信的api,然后我们前端调取服务端的接口获取的，完成注册
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: ['wx-open-subscribe'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app','wx-open-subscribe]
});

第四步：

在html中：

<wx-open-subscribe template="TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I" 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>

第五步：

在JS中：

<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);
  });
</script>

如果你完成以上步骤，正常情况来说点击订阅按钮是会弹出如下图1所示的：

图1.png

以上就是官网写的一些，代码和图片我搬过来的，看着挺简单的对不对，但是在实际项目中，消息订阅还是有很多值得注意的点和坑要注意哦，以下是我对一些问题的解决办法，仅供参考：

问题1：点击消息订阅按钮，弹窗没弹出来

可能原因：
1、wx.config里需要把你要用的开放标签写到openTagList中去，同时要保证服务端传过来的signature等参数是正确的，同时可以写个微信监听，监听微信的一些api是否注册成功

window.wx.config({
  debug: true, 
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: ['wx-open-subscribe'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app','wx-open-subscribe]
}）

  window.wx.ready(function () {
          console.log("注册api成功-")
          success && success();
 });
   window.wx.error(function (res) {
        console.log("注册api失败-： ",res)
        error && error(res);
  });

2、本地运行的是localhost,而微信开放标签可能要微信公众平台中填写的域名下的项目才能弹出，所以你可以先发布到测试环境下看看

问题2：如何监听用户点击订阅按钮，点击的是确定还是取消

之前我以为只要用户点击消息订阅弹窗中的确定，就会触发sucess,点击取消，触发error,结果发现无论用户点击确定还是取消，success都会触发，后来发现success监听的是你这个弹窗能否成功弹起，所以只要弹起来，无论你点击确定还是取消，都会执行sucess
如果你想知道用户点击消息订阅中的确定还是取消，就需要仔细看文档了

1640315986(1).png

所以我们这样处理

  btn.addEventListener('success', function (e) {            
     let flag = false
     let data = JSON.parse(e.detail.subscribeDetails)
     for(let a in data){
     let status = JSON.parse(data[a]).status
     if(status == 'accept'){
          flag = true
       }
      }
      if(flag){
          console.log('用户点击确定')
      }else{
          console.log('用户点击取消')
      }
  });   
注意：在微信开发者工具上，无论你点击消息订阅的确定还是取消，得到的subscribeDetails都是accept,但是在真机上是正常的值哦

问题3：项目是vue/react开发的history模式，在ios上，微信的api注册失败导致无法使用

这是因为在IOS上，无论路由切换到哪个页面，实际真正有效的的签名URL是【第一次进入应用时的URL】。
比如进入应用首页是: https://m.baidu.com，需要使用JSSDK的页面A是：https://m.baidu.com/product/index，无论从首页进入到A页面之前，中间跳转过多少次路由，最终签名有效的URL还是首页URL: https://m.baidu.com

解决办法：

在进入需要使用JSSDK页面(B)的前一个页面(A)，即 A > B，直接使用 window.location.href 或 window.open 打开B页面，此时因为B页面是直接刷新方式进入，所以当前B页面URL无论IOS或Android都是可以直接拿来用。
这只是其中之一的解决办法，当然你也可以选择其他好的办法解决，在这里我就不多介绍了。

感谢观看，如有意见或建议，欢迎评论下方指出......