SpringBoot实现微信订阅消息推送

前言

最近公司业务需求，需要实现微信小程序订阅消息推送；因为之前也没接触过，所以也花费了一些时间才完成，所以

在这里我会详细叙述每个步骤，尽量把我所踩的坑体现出来；

其实我做完总结了一下主要就是以下几个步骤，如果不出意外按照下面的步骤就可以实现小程序的订阅消息推送。

一、创建小程序订阅消息模板

消息模板就是我们发送微信服务通知的消息模板，就像下图这个，这个需要我们自己去选择；

微信公众平台官网：https://mp.weixin.qq.com/

而创建消息模板需要去微信公众平台上创建，打开连接会出现如下界面；

一般依托微信平台的服务都是在这个平台申请和管理，例如公众号、订阅号、小程序…

一般一个邮箱只能申请一个小程序，如果你是个人开发可以先申请一个小程序进行开发测试，这里就不详细介绍如何

申请；如果你没有接触过小程序，是公司或者客户的小程序，那么就需要用客户的微信账号进行登录，一般申请人就

是管理员，还需要他将你添加到项目成员中；至此，你就可以开始进行开发了。

我们可以在 功能->订阅消息->我的模板中选用模板

选择需要的模板，这里有一点需要注意的，消息模板的有效性 分为一次性订阅和 长期订阅。

长期订阅：只需要用户授权一次即可长期推送订阅消息。

一次性订阅：需要用户先授权一次之后才能收到订阅消息，而且只能收到一次。下次则需要用户继续授权。

但是一般的账号主题只能申请一次性订阅，只有公共服务类账号才可以申请长期订阅；

选用模板时如果没有我们需要的关键词我们也可以申请，不过需要审核，大概一两天的时间；

OK，到这里我们已经搞定了小程序订阅消息的模板；

二、发送订阅消息

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html

设置好了模板消息接下来我们就需要考虑如何将我们准备的消息内容填到我们的准备好的模板参数中然后发送给指定的用

户，我们还需要获取几个发送订阅消息的必填参数；

1、 获取接口调用凭证(auth.getAccessToken)

官方文档连接：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html

我们需要注意的调用此接口返回的参数access_token，它是小程序全局唯一后台接口调用凭据，调用绝大多数后台接

口时都需使用 access_token。

但是它的有效期是2小时，所以最好写一个定时任务比如每隔100分钟更新一次access_token，避免每次调用小程序后台接

口都的生成一个access_token，需要注意的是新的access_token会覆盖旧的access_token。

注意：

也就是说最后我们要发送订阅消息到指定用户调用sendSubscribeMsg方法是需要携带这个access_token的，所以我们

必须要先获取它，我们当然可以自己后端写个接口，然后前端拿appId和secret去请求这个接口然后返回

access_token，但是这个步骤在小程序已经在微信模版消息推送三方sdk中已帮我们封装好了，他会帮我们在获取微信

用户openid时调用这个接口然后发送消息时把access_token拼接上去；这个我们待会会说,所以我们暂时不需要考虑这

步。

这里说一下appId和AppSecret是什么？

1.1、appId和AppSecret

appid它相当于你的小程序在微信中的 ‘身份证’ ，有了它，微信客户端才能确定你的 ‘小程序’ 的身份，并使用微信提

供的高级接口；也就是说每一个小程序或者公众号对应一个appid；appid就像门牌，AppSecret就像钥匙。

appid可以公开，但是AppSecret必须保密。而且微信官方文档反复强调AppSecret的安全级别很高，也就是说如果泄露出

去安全风险很大，要小心保管。你可以重新生成AppSecret，但是切记重新生成AppSecret前，程序里如果有用AppSecret

的地方，要同步修改，否则程序会报错。

可以在微信公众平台开发-开发管理中-开发设置中获取APPID(小程序ID)和AppSecret：

2、 获取微信用户openid(auth.code2Session)

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html

这里需要注意的一点是 请求参数js_code：登录凭证校验；通过 wx.login 接口获得临时登录凭证 code 后传到开发者服

务器调用此接口完成登录流程然后返回openid，即用户唯一标识；

也就说我们要先在小程序前端调用 wx.login( )返回登录凭证code，然后我们拿这个code加上appid和secret再去后台访

问上面的链接就可以返回openid了；

ok，接下就可以开始写代码了，先看下前端是怎么写的：

2.1、前端代码

login.vue

export default {
   
		data() {
   
			return {
   
				openId: '',
			};
		},
		onShow() {
   },
		onLoad() {
   
            //调用wx.login()返回登录凭证code
            this.getCode()
        },
		methods: {
   
			async getCode(){
   
				let that = this;
				wx.login({
   
					provider: 'weixin',
					success: function(res) {
   
						console.log('code', res.code);
                        //调用接口返回openid
						that.getopenId(res.code);
					}
				})
			},
			async getopenId(code) {
   
				let params = {
   
					code: code,
				}
				const res = await this.$u.api.getOpenId(params);
				if(res.success) {
   
					console.log('openId', res.data.data.openId);
					this.openId = res.data.data.openId;
				}
			},
            async startLogin(formData) {
   
				//这里登陆接口密码的加密模式省略、、、
				let params = {
   
					username: formData.phone,
					password: password,
					secretKey: this.secretKey,
					openId: this.openId,
				};
				// 登录请求
				const res = await this.$u.api.userLogin(params);
				if (res.success) {
   
					uni.showToast({
   
					    title: '登录成功',
					    duration: 1000
					});
					setTimeout(()=>{
   
						this.$u.route({
   
							type: 'reLaunch',
							url: '/pages/orderList/orderList'
						});
					}, 1200)
					// 调起消息订阅界面
					await this.$u.api.subscribe();
				} else {
   
					this.$msg(res.msg)
				}
			},
        }
}

http.api.js

// api集中管理api
const install = (Vue, vm) => {
   
    let subscribe = () =>{
   
		wx.requestSubscribeMessage({
      // 调起消息订阅界面
		  tmplIds: ['mTJ6Tdr42nOxVVoFn-zi3xGsQqUPRnyExIXpTNwHjWg'],
		  success (res) {
    
		    console.log('订阅消息 成功 ');
		    console.log(res);
		  },
		  fail (er){
   
		    console.log("订阅消息 失败 ");
		    console.log(er);
		  }
		})
	};
    
    //通过coed获取openId
	let getOpenId = (params = {
    }) => vm.$u.post('/app/api/driver/getOpenId', params);
    // 用户登录请求,需要传递params{手机号码,密码  }
	let userLogin = (params = {
    }) => vm.$u.post('/api/Applet/login/login', params);
    、、、
    、、、
}

http.interceptor.js

const install = (Vue, vm) => {
   
	// 请求拦截，配置Token等参数处理登录
	Vue.prototype.$u.http.interceptor.request = (config) => {
   
		config.header._sid = vm.vuex_token;
        //这里为了方便后续接口请求，我将appid放到了请求头中
		config.header.appId = 'wx2e5937bfdcc66ecf';
		return config;
	}
}
</