小程序订阅消息

官方文档：

注意点：

用户发生点击行为或者发起支付回调后，才可以调起订阅消息界面

点击弹起订阅弹窗及数据处理

const miniAuth = async (value, callback) => {
  if (__TARO_ENV !== 'h5' && WMkit.isLogin()) {
    let openId = getGlobalData('openId');
    let {context} = await sdk.get(`/minimsg/${value}/1`, {});
    const {pullFlag, templateIds} = context;
    if (pullFlag) {
      Taro.requestSubscribeMessage({
        tmplIds: templateIds,
        async complete(res) {
          const templateIds = [];
          for (let key in res) {
            if (res[key] === 'accept') {
              templateIds.push(key);
            }
          }
          if (templateIds.length > 0) {
            await sdk.post('/minimsg/add', {
              templateType:1,
              openId: openId,
              templateIds: templateIds,
            });
          }
          callback();
        },
      });
    } else {
      callback();
    }
  } else {
    callback();
  }
};

h5公众号订阅消息

依赖于微信开放标签，引入jssdk

先看官网文档

以Taro为例如下：

1. 在index.html中引入sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2. 入口初始化配置

wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: appId, // 必填，公众号的唯一标识
      timestamp: timestamp, // 必填，生成签名的时间戳
      nonceStr: nonceStr, // 必填，生成签名的随机串
      signature: signature, // 必填，签名
      jsApiList: [
        'updateAppMessageShareData',
        'updateTimelineShareData',
        'onMenuShareAppMessage',
        'onMenuShareTimeline',
        'scanQRCode',
        'checkJsApi',
      ], // 必填，需要使用的JS接口列表
      openTagList: ['wx-open-launch-weapp','wx-open-subscribe'],
});

3. 使用wx-open-subscribe渲染按钮，样式就参考这样写，template支持多个以","隔开。

<wx-open-subscribe id="subscribe-btn" template={templateIds.join(',')}>
    <script type="text/wxtag-template">
                  <button
                    style={{
                      fontSize: '14px',
                      width: '88px',
                      height: '36px',
                      textAlign: 'center',
                      color: '#fff',
                      lineHeight: '36px',
                      borderRadius: '18px',
                      background:loaded ?'linear-gradient(90deg, #f80 0, #ff4d00 100%)':'linear-gradient(90deg, rgba(230, 230, 230, 1) 0%, rgba(204, 204, 204, 1) 100%)',
                      border: 'none',
                      outline: 'none',
                    }}
                  >
                    提交订单
                  </button>
    </script>
</wx-open-subscribe>

4. 监听按钮点击事件，注意弹窗弹出就是success，和是否点击允许无关

const btn = document.getElementById('subscribe-btn')
  btn.addEventListener('success', this.handleSubscribeSuccess);
}
handleSubscribeSuccess = (e: any) => {
    let res = JSON.parse(e.detail.subscribeDetails)
    h5Auth(res, () => {
      this._submit()  // 现在 this 指向组件实例
    })
}

5. 数据处理，获取已同意的模版

const h5Auth = async (data, callback) => {
  console.log('data', data)
  if (_.isWeixin() && WMkit.isLogin()) {
    let openId = WMkit.wechatOpenIdByH5();
    const templateIds = [];
    for (let key in data) {
      // 注意这里还需要parse一下
      const item = JSON.parse(data[key]);
      if (item.status === 'accept') {
        templateIds.push(key);  
      }
    }
    console.log('templateIds', templateIds)
    if (templateIds.length > 0) {
      await sdk.post('/minimsg/add', {
        templateType:2,
        openId: openId,
        templateIds: templateIds,
      });
    }
    callback();
  } else {
    callback();
  }
};

两端总结

1. “总是保持以上选择，不再询问”，勾选后，后续不会在弹出弹窗。

2. h5标签的template属性动态设置我尝试是不可以的，即标签初始化展示的时候就要有值，否则报错template can't be empty

 btn.setAttribute('template', templateIds.join(',')) ❌不可以

// 这样OK
flag?(<wx-open-subscribe>xxx</<wx-open-subscribe>>):null

3. 小程序嵌入webview的h5不支持开放标签

4. 配置正确情况下，标签不展示，把debug打开，看是不是签名不正确。