uni-app.11.开发微信小程序实现消息订阅

- 日理万妓 2022-10-11 13:43 239阅读 0赞

### 开发微信小程序实现消息订阅 ###

*   *  使用场景
     *  订阅消息
     *   *  一次性订阅消息
         *  长期订阅消息
     *  实现步骤
     *   *  1.获取模板ID
         *  2.uni.requestSubscribeMessage
         *  3.subscribeMessage.send
         *  4.测试

## 使用场景 ##

在我们开发的小程序中司机首次登录需要先认证从业资质和车辆。司机在小程序端提交资料后，后台需要审核相关资料。审核结束后需要向司机推送相关的审核结果，这里就需要实现微信小程序的消息订阅

## 订阅消息 ##

订阅消息包括两种：**一次性订阅消息**与**长期订阅消息**

### 一次性订阅消息 ###

一次性订阅消息用于解决用户使用小程序后，后续服务环节的通知问题。用户自主订阅后，开发者可**不限时间**地下发**一条对应的服务消息**；每条消息可单独订阅或退订。

### 长期订阅消息 ###

一次性订阅消息可满足小程序的大部分服务场景需求，但线下公共服务领域存在一次性订阅无法满足的场景，如航班延误，需根据航班实时动态来多次发送消息提醒。为便于服务，我们提供了长期性订阅消息，用户订阅一次后，开发者可长期下发多条消息。

目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务。

## 实现步骤 ##

### 1.获取模板ID ###

在微信公众平台手动配置获取模板 ID：登录[https://mp.weixin.qq.com][https_mp.weixin.qq.com] 获取模板，如果没有合适的模板，可以申请添加新模板，审核通过后可使用。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70]

我们可以通过关键字搜索找到符合我们使用场景的模板，点击选用即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 1]

如上图所示，每个应用最多同时只能使用50个模板。上面我们也说了可以自定义模板，待系统审核通过后才可以使用，自定义模板的按钮在**公共模板库**的最后一页（就是这么神奇O(∩\_∩)O哈哈~）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 2]

### 2.uni.requestSubscribeMessage ###

我们的小程序是使用uni-app开发的，uni-app官方也给我们提供了相应的api即**uni.requestSubscribeMessage**，具体的介绍如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 3]

需要注意的是这个需要用户的点击行为才能触发，而且是一次性订阅消息，所以需要在用户指定的需要接收订阅消息的页面由用户的点击操作来触发。

在本小程序中，用户的**从业资质认证**和**车辆认证**页面都需要订阅审核消息，而且在后台审核不通过后重新提交认证资料后仍需要订阅下一次的审核消息，所以我们采取的策略是在用户提交认证资料之前先订阅消息，然后再保存数据

saveVehicleData: function() { 
        var checkRes = graceChecker.check(_self.formData, rule);
        if(checkRes){ 
            uni.requestSubscribeMessage({ 
                provider: 'weixin',
                tmplIds: ['您的模板ID'],
                success: function(res) { 
                console.log(JSON.stringify(res));
                },
                fail: function() { 
    
                },
                complete: function() { 
                    // 保存认证信息数据
                    _self.submitVehicleAuth();
                }
            });
        } else { 
            _self.message = graceChecker.error;
            _self.$refs.toast.show();
            return;
        }
    },

### 3.subscribeMessage.send ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 4]

通过官方的api我们可以看到该接口需要以HTTPS调用，对于该接口的使用我们先定义一个方法

public static JSONObject sendSubscribeMessage(String accessToken, SubscribeMessageVO subscribeMessageVO) { 
            String requestUrl = " https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=" + accessToken;
            JSONObject data = JSONObject.parseObject(JSONObject.toJSONString(subscribeMessageVO));
            return JSONObject.parseObject(HttpClientUtils.httpClientPostJSON(requestUrl,
                    data));
        }

至于参数**accessToken**的获取，我们可以看微信小程序的官方文档，如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 5]

对于accessToken的获取，我们定义如下方法

public static String getAccessToken(RedisUtils redisUtils, String appId, String appSecret) { 
    		return Optional.ofNullable(redisUtils.get("accessToken_" + appId)).orElseGet(() -> { 
    				String requestUrl = "https://api.weixin.qq" +
                        ".com/cgi-bin/token?grant_type=client_credential&appid=" + appId + "&secret=" + appSecret;
    				JSONObject jsonObject = JSONObject.parseObject(HttpClientUtils.httpClientGet(requestUrl));
    				if (jsonObject.getIntValue("errcode") != 0) { 
    						// 获取token失败
                log.error("获取token失败 errcode:{} errmsg:{}", jsonObject.getIntValue("errcode"),jsonObject.getString("errmsg"));
                throw new RuntimeException(jsonObject.getString("errmsg"));
            }
            redisUtils.set("accessToken_" + appId, jsonObject.getString("access_token"),jsonObject.getLongValue("expires_in"));
                return jsonObject.getString("access_token");
            }).toString();
    }

这里我们首先从redis里面获取accessToken，redis里面没有我们再调用接口获取，将获取到的accessToken保存到redis中

最后我们就可以在需要下发订阅消息的方法中直接调用上面定义的方法`sendSubscribeMessage`即可。

### 4.测试 ###

我们在小程序的车辆认证页面订阅了审核消息，当提交认证资料的时候会弹出订阅消息提示框，如下图我们选择“允许”

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 6]

之后我们在后台的车辆审核里面点击审核不通过，如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 7]

随后我们在微信中就会收到系统推送的订阅消息，如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 8]

uni-app开发微信小程序实现消息订阅就到这里了，老铁们给个赞啊(\#.\#)

[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70]: /images/20221005/509f68303c5e4358bea33449126d9926.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 1]: /images/20221005/33974a7444a04482b41d9466892ac53c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 2]: /images/20221005/5f70bd1dcfd24d718cf5bbf62622171a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 3]: /images/20221005/6018fae2d1b54fe5912886a3316b7c07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 4]: /images/20221005/c4cd33ecc9364131a22fcf733c061739.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 5]: /images/20221005/5e8cf26feeff433f83cebe773737cb67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 6]: /images/20221005/2921e07295464b628608891604e39c76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 7]: /images/20221005/8b50fee62efd4721af18632f2422eed7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 8]: /images/20221005/927f6fa30bef4042890c28425567f6b3.png