微信公众号订阅通知wx-open-subscribe最近一个项目涉及到公众号订阅通知，第一次做，搞了两三天，遇到了一些坑

最近一个项目涉及到公众号订阅通知，第一次做，搞了两三天，遇到了一些坑，在此记录一下，希望对其它同学有所帮助。

背景：vue全家桶构建。

两种模式的开发是不一样的，一次性订阅消息需要前端授权，看文档来就行，就体验来说，订阅通知更好，自定义的字段也更丰富一些，而项目需求也是要采用订阅通知。

思路：采用微信的开放标签wx-open-subscribe，用户点击该标签，页面会弹起询问用户是否允许接收消息，【取消】【允许】，通过在标签上监听事件@success="handleSuccess"来监听用户是点击了取消还是允许，如果是允许，则调用后端接口，后端再去调用微信的接口，在活动开始前几分钟给用户发送消息，用户点击收到的消息，直接跳转到活动页。

1 如何判断用户是点击了取消还是允许

<wx-open-subscribe :template="templateId" id="subscribe-btn-one" @success="subscribeSuccess" @error="subscribeFail">
  <script type="text/wxtag-template" slot="style">
    <style>
      .subscribe-btn-one {
        height: 24px;
        line-height: 24px;
        text-align: center;
        padding: 0 6px;
        font-size: 12px;
        border: 2px solid #ff6e23;
        border-radius: 12px;
        color: #ff6e21;
        background: #fff;
      }
    </style>
  </script>
  <script type="text/wxtag-template">
    <div class="subscribe-btn-one">订阅秒杀通知</div>
  </script>
</wx-open-subscribe>

subscribeSuccess (e) {
  // 如果直接打印e，在控制台看到的是一个事件，看不到具体的信息
  // 直接打印e.detail就可以看到返回的信息了
  let subs = e.detail.subscribeDetails
  let subsStr = JSON.stringify(subs)
  if (subsStr.indexOf('accept') !== -1) {
    console.log('用户点击了允许，调用订阅接口')
    this.subscribeNotify()
  } else if (subsStr.indexOf('reject') !== -1) {
    console.log('用户点击了取消')
  }
}

2 如果页面上有多个订阅通知，只显示一个或者不显示一个订阅通知按钮用一个wx-open-subscribe标签，定义按钮名称的class名称不要相同

// 一个订阅按钮用一个标签
<wx-open-subscribe v-if="currItem.idBehalfActivity==(list[0]&&list[0].idBehalfActivity)" :template="templateId" id="subscribe-btn-one" @success="subscribeSuccess" @error="subscribeFail">
  <script type="text/wxtag-template" slot="style">
    <style>
      .subscribe-btn-one {
        自定义样式
      }
    </style>
  </script>
  <script type="text/wxtag-template">
    <div class="subscribe-btn-one">订阅秒杀通知</div>
  </script>
</wx-open-subscribe>
<wx-open-subscribe v-if="currItem.idBehalfActivity==(list[1]&&list[1].idBehalfActivity)" :template="templateId" id="subscribe-btn-two" @success="subscribeSuccess" @error="subscribeFail">
  <script type="text/wxtag-template" slot="style">
    <style>
      .subscribe-btn-two {
        自定义样式
      }
    </style>
  </script>
  <script type="text/wxtag-template">
    <div class="subscribe-btn-two">订阅秒杀通知</div>
  </script>
</wx-open-subscribe>

3 wx-open-subscribe无效因为没有做配置；首先需要引入微信的SDK，然后做配置，就像公众号分享给好友或朋友圈，需要做配置

// wxdata是调用后端的接口返回的数据
window.wx.config({
  debug: false,
  appId: wxdata.appId,
  timestamp: parseInt(wxdata.timestamp),
  nonceStr: wxdata.noncestr,
  signature: wxdata.signature,
  openTagList: [
    'wx-open-subscribe'
  ]
})