微信小程序实现订阅信息功能

「爱情、让人受尽委屈。」 2023-07-14 05:28 2阅读 0赞

**目录**

前言

流程分析

实现过程

--------------------

### 前言 ###

本文介绍使用订阅信息API，来实现微信小程序的订阅信息功能，集成在支付完成步骤上。

### 流程分析 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70][]

上图是从网上找到的最详细的流程图，从图中可以分析出大概以下几个流程：

1.用户进入“设置--消息订阅”，设置不接收消息时，则支付完成后直接跳转页面；

2.微信版本不支持订阅信息方法时，则在支付完成后，输出错误信息并跳转页面；

3.下发权限窗口中，不勾选“总是保持以上选择，不再询问”且点击“允许”时，则支付完成后调用后台接口下发订阅消息；如果是多模板情况（最多三个模板），要根据各模板是否勾选判断那个模板可以下发（模板未勾选时，虽然点击了允许，但返回信息是“reject”））并跳转页面；

4.下发权限窗口中，不勾选“总是保持以上选择，不再询问”且点击“取消”时，则支付完成后直接跳转页面，不下发订阅信息；

5.下发权限窗口中，勾选“总是保持以上选择，不再询问”且点击“允许”时，则支付完成后调用后台接口下发订阅消息；如果是多模板情况（最多三个模板），要根据各模板是否勾选判断那个模板可以下发（模板未勾选时，虽然点击了允许，但返回信息是“reject”））并跳转页面；而第二次支付完成后，不会弹出下发权限窗口，而是根据上次模板的信息进行下发（如想弹出窗口，可使用开发工具“清除缓存”）；

6.下发权限窗口中，勾选“总是保持以上选择，不再询问”且点击“取消”时，则支付完成后直接跳转页面，不调用下发订阅信息接口；而第二次支付完成后，不会弹出下发权限窗口，而是根据上次模板的信息不下发（如想弹出窗口，可使用开发工具“清除缓存”）；

### 实现过程 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1][]

上图为各种情况的返回数据情况，分析上面的数据，有利于理解实现代码的原理：

1.增加公共函数，用来调用订阅信息的下发权限；

注释：

1）[wx.requestSubscribeMessage][]为小程序提供的API，可点击查看详细说明；

2）that.data.subscriptionData.subscribe\_templates存放模板的信息（1-3个），然后传参给后台接口config.sendTemplateMsg，config.sendTemplateMsg该后台接口使用下发方法[subscribeMessage.send][]（点击查看详细说明）；

3）在支付完成后，如果使用“wx.reLaunch”进行跳转，会出现无法跳转的问题，这是因为跳转到支付页面后，导致原来的页面找不到，所以这里使用“wx.redirectTo”跳转。

Tips：对于多模板，部分模板不是即时下发订阅信息，可在调用config.sendTemplateMsg接口时 ，后台先缓存必要的信息（oppid、订单号、模板信息等），然后在小程序点击相应场景再调用后台接口下发相应的订阅信息。

// 订阅信息的下发授权
      subscribeMessage: function(templateId) {
        let that = this;
        try {
          wx.requestSubscribeMessage({
            tmplIds: templateId,
            success(res) {
              for (let key in res) {
                if (key !== "errMsg" && key !== "errorCode") {
                  let obj = {
                    template_id: key,
                    status: res[key]
                  };
                  that.data.subscriptionData.subscribe_templates.push(obj);
                }
              }
              console.log(that.data.subscriptionData);
              // 订阅信息接口
              util.requestUrl(config.sendTemplateMsg, that.data.subscriptionData).then((res) => {
                console.log('调用订阅信息接口！');
              }).catch((errMsg) => {
                console.log(errMsg); //错误提示信息
              });
              wx.redirectTo({
                url: '../../pages/index/index'
              });
            },
            fail(res) {
              console.log(res);
            }
          })
        } catch (err) { // 当前微信版本不支持订阅信息
          console.error("subscribeMessage-err", err);
        }
      }

2.支付完成后的操作 （只截取下发权限部分的代码）；

注释：

1）templateId数组的数据为模板ID，可在微信公众平台手动配置获取模板 ID；

Tips：templateId可调用后台接口获取，这样就不用每次有改动就重新修改小程序进行审核。

// 获取下发权限
    const templateId = ['xxx', 'xxx', 'xxx'];
    let subscribeMessage = that.data.settingMsg.authSetting['scope.subscribeMessage']; // 用于判断是否禁止接收订阅信息
    if (subscribeMessage) {
      that.data.subscriptionData = {
        access_token: app.globalData.accessToken,
        openId: app.globalData.openId,
        subscribe_templates: []
      };
      // 包含总是允许、总是取消、点击允许、点击取消情况
      that.subscribeMessage(templateId);  
    } else { // 小程序设置--不允许接收订阅信息情况
      wx.redirectTo({
        url: '../../pages/index/index'
      });
    };

## ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70]: /images/20230529/d59dd79cb3194104a8c0de434f8d8198.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1]: /images/20230529/174fa18b9f0b4ffda724eb6302a9e10a.png
[wx.requestSubscribeMessage]: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html
[subscribeMessage.send]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/subscribe-message/subscribeMessage.send.html