微信登录 + 小程序订阅 + 公众号订阅

微信登陆，微信小程序订阅，微信公众号订阅

    <!-- 微信登陆 -->
    <script>
    /**
     * 调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，
     * 包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，
     * 若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）等。
     * 用户数据的加解密通讯需要依赖会话密钥完成。
     * 
     * */ 
    let wx_token = wx.getStorageSync('wx_token')
    if(!wx_token){
        wx.login({
            success: (res)=>{
                // res.code 有效期为5分钟
                MyAjax({
                    data: {code: res.code},
                    url: 'url',
                    success: (data)=>{
                        wx.setStorageSync('wx_token', data.token)
                        wx.setStorageSync('openid', data.openid)
                        wx.setStorageSync('user_id', data.user_id)
                        // ...
                    }
                })
            },
            fail: (err)=>{}
        })
    }
</script>


<!-- 微信小程序订阅 -->
<script>
    wx.requestSubscribeMessage({
      tmplIds: ['模板id'],
      success(res) {
        // 申请订阅成功
        if (res.errMsg === 'requestSubscribeMessage:ok') {
            /** 
             * 点击允许  accept-订阅  reject-拒绝 
             * res['模板id'] == accept -订阅
             * res['模板id'] == reject -拒绝 
             * */ 
        }
      },
      fail(err) {
        console.log('订阅操作失败：',err)
        if(err.errCode==20004){
            openConfirm('检测到您没打开推送权限，是否去设置打开？')
        }
      }
    })
    //打开设置
    function openConfirm(message) {
        wx.openSetting({
            success: (res) => {
                console.log(res.authSetting)
            },
            fail: (error) => {
                console.log(error)
            }
        })
    }

</script>

微信小程序 -- 订阅流程图

• 微信公众号与微信小程序在订阅功能的区别：

1. 微信小程序通过api拉起订阅面板；微信公众号通过SDK文件注册【开放标签】实现拉起订阅
2. 微信小程序官方提供拉起 【设置面板】 api ， wx.openSetting()；而微信公众号没有提供
3. 开放标签不能监听官方提供的【success】【error】之外的任何事件(点击，划入划出等)

微信公众号订阅功能

• 开放标签不能监听官方提供的【success】【error】之外的任何事件(点击，划入划出等)
• 订阅或者取消均是【success】事件，通过【accept】【reject】判断该消息是否订阅

e.detail.subscribeDetails['模板id'] == 'accept'  允许订阅
e.detail.subscribeDetails['模板id'] == 'reject'  拒绝订阅

• 开放标签不能监听【success】【error】之外的事件
• SDK没有提供唤起【设置面板】的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 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>
<script>
var btn = document.getElementById('subscribe-btn');
btn.addEventListener('success', function (e) {            
  console.log('success', e.detail);
  let subscribeDetails = JSON.parse(e.detail.subscribeDetails)
  for (const key in subscribeDetails) {
    if(JSON.parse(subscribeDetails[key]).status == 'accept'){
      console.log('允许订阅-yes')
    } else {
      console.log('拒绝订阅-no')
    }
  }
});   
btn.addEventListener('error',function (e) {             
  console.log('fail', e.detail);
});
</script>

微信公众号 -- 订阅流程图