uniapp公众号一次性订阅消息（含前后端代码）

前要：在使用uniapp做公众号一次性订阅消息时，首先想到的就是查看微信开放文档（https://developers.weixin.qq.com/doc/offiaccount/Message_Management/One-time_subscription_info.html），然后在网上搜索相关资料，奈何觉得一个简单的小功能，却做了2 3天，本人是前后端都有做，所以记录一下以便网友参考，文章中有个人过程中遇到的一些坑，真是太坑人了。

应用场景

开发者可以通过一次性订阅消息授权让微信用户授权第三方移动应用（接入说明）或公众号，获得发送一次订阅消息给到授权微信用户的机会。授权微信用户可以不需要关注公众号。微信用户每授权一次，开发者可获得一次下发消息的权限。（注意：同一用户在同一 scene 场景值下的多次授权不累积下发权限，只能下发一条。若要订阅多条，需要不同 scene 场景值）

消息下发位置说明：对于已关注公众号的，消息将下发到公众号会话里；未关注公众号的，将下发到服务通知。

公众号或网页使用一次性订阅消息流程分为两部分：

用户授权（前端）
下发消息（后端）

实际操作 and 代码

在确保微信公众帐号拥有订阅消息授权的权限的前提下（已认证的公众号即有权限，可登录公众平台在接口权限列表处查看），引导用户在微信客户端打开如下链接：

https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=wxaba38c7f163da69b&scene=1000&template_id=1uDxHNXwYQfBmXOfPJcjAS3FynHArD8aWMEFNRGSbCc&redirect_url=http%3a%2f%2fsupport.qq.com&reserved=test#wechat_redirect

首先来看前端代码吧。

auth() {
    
    
				let redirect_url = encodeURIComponent("用户同意接收后跳转的地址，注意需要加到公众号后台业务域名里边");
				let appId = 'appId自己替换哦';
				let scene = 1000（可以自己随便定义）;
				let template_id = '申请的订阅消息模板id，也需要注意不是在订阅通知里看模板id，是在接口权限里的一次性订阅消息那看模板id';
				window.location.href =
					`https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=${
    
    appId}&scene=${
    
    scene}&template_id=${
    
    template_id}&redirect_url=${
    
    redirect_url}#wechat_redirect`;
			},

然后在跳转的页面接收参数，参数大概就是这些了。openid=OPENID&template_id=TEMPLATE_ID&action=ACTION&scene=SCENE
这里可以获取到参数，存到后台，适用于多种模板的订阅消息。

if (options) {
    
    
            const {
    
    
                openid,
                action,
                scene
            } = options;
			this.$request(this.$api.Weike.subscribe, {
    
    
               openid: openid,
               action:action,
               scene:scene
             }).then(res => {
    
    
                //授权成功的处理
                 uni.showToast({
    
    
                    title: res.data.msg,
                    icon: 'none'
                 });
             });
        }

后台代码如下：
WeChatMsgParam是自己写的实体类，方便管理。

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class WeChatMsgParam {
    
    
    private String userId;
    private String pubopenId;	//	用户的openid
    private Integer bidTotal; //发送消息的参数，根据需求自己改
    private Integer callTotal;//发送消息的参数，根据需求自己改
}

接下来就发送消息了

public void sendWxMpTemplateMessage(WeChatMsgParam weChatMsgParam) {
    
    
        RestTemplate restTemplate = new RestTemplate();
        String url = "https://api.weixin.qq.com/cgi-bin/message/template/subscribe?access_token=" + redisUtil.get("access_token");
        String templateId = "xxx";
        com.alibaba.fastjson.JSONObject jsonObject = new com.alibaba.fastjson.JSONObject();
        jsonObject.put("touser", weChatMsgParam.getPubopenId());
        jsonObject.put("template_id", templateId);
        jsonObject.put("title", "xxx");
        jsonObject.put("scene", "1000");

        Map<String, Map> data = new HashMap<>();
        Map<String, String> first = new HashMap<>();
        first.put("value", "信息："+weChatMsgParam.getBidTotal()+"条\n"+"信息："+weChatMsgParam.getCallTotal()+"条");
        first.put("color", "#000000");
        data.put("content", first);
        jsonObject.put("data", data);

        ResponseEntity<String> responseEntity =
                restTemplate.postForEntity(url, jsonObject, String.class);
        System.out.println(responseEntity.getBody());
    }

大坑

至此就结束了，下面总结一下。

前端关于重定向地址也就是redirect_url参数，使用文档所说的UrlEncode 会报错，应使用encodeURIComponent，防止组合的url才不会被#等特殊字符截断，报错原因可能是因为vue不支持该方法或者是版本不兼容
redirect_url一定要加到后台的业务域名里去，不要带路径
还有一个折磨了我一天的大坑就是，前端注意hash模式，他会拼接参数错误，识别不到你的参数，你可以处理一下转发的url获取相应参数，或者就没有什么要求就使用history模式就好了
后台发消息时返回43101时，有可能时用户没有订阅消息，也有可能是你发送的参数有问题，去仔细检查一下吧！最后补充一句，如果模板消息给我审核通过的话，我是不想用公众号订阅消息的

运行效果

在这里插入图片描述