uniapp微信小程序订阅消息发送服务通知超详细教程

作者:阿沐时间:2026-10-30 20:54:53浏览:325

本文详解基于uniapp开发微信小程序订阅消息的完整流程。涵盖一次性与长期订阅消息的区别,从微信公众平台配置模板ID、前端调用[[wp:a5]]获取用户授权,到后端通过API发送服务通知的关键步骤。重点解析access_token获取、openid提取及data参数构造,提供前后端分离的实现思路与代码示例,帮助开发者规避常见坑点。

前言

因公司业务需求,刚接触小程序开发的作者需实现直播通知功能。基于Vue技术栈背景,最终选定使用进行开发,尽管原生微信语法已生疏。在编码过程中遭遇诸多问题,本文旨在分享整体实现思路及常见陷阱。文章将按步骤梳理完整流程,指导读者编写自定义请求逻辑,跟随操作即可达成预期效果。

实现思路:

解决该需求的首要途径是查阅微信官方文档中的相关API说明。在微信官方文档中检索“订阅消息”,即可获取关于小程序订阅消息的详细介绍与规范。

前言

订阅消息主要分为以下几类:

1. 一次性订阅消息

此类消息旨在解决用户完成小程序操作后,后续服务环节的通知需求。用户自主订阅后,开发者可在不限时间内下发一条对应的服务消息;每条消息支持单独订阅或退订。

2. 长期订阅消息

虽然一次性订阅能满足多数场景,但线下公共服务领域(如航班延误提醒,需根据实时动态多次发送)存在其无法满足的情况。为此,平台提供了长期性订阅消息,用户仅需订阅一次,开发者即可长期下发多条消息。

目前,长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务领域开放,未来将逐步扩展至其他线下公共服务业务。

3. 设备订阅消息

设备订阅消息属于长期订阅消息的特殊类型,使用前必须完成「设备接入」流程。

该消息类型用于在设备触发需人工介入的事件(如设备故障、耗材不足等)时,向用户发送通知。具体细节可参考设备订阅消息文档。

开发者可根据实际需求选择相应类型,通常使用一次性订阅消息即可。针对官网文档中的细节,此处做进一步补充说明。

实现步骤:

1. 获取模板ID

需在微信公众平台手动配置以获取模板ID:

登录 https://mp.weixin.qq.com,进入功能模块中的“订阅消息”,在“我的模板”中点击“选用”以选择所需模板。

若无合适模板,可申请添加新模板,审核通过后方可使用。

可选择基础模板进行试用,申请完成后,在“我的模板”中查看已申请的模板。点击“详情”即可进入模板详情页面查看具体配置。

前言

点击“选用”进入公共模板库,搜索模板如“活动开始提醒”,点击“选用”进入模板选择界面。最多可选5条通知内容,均为非个性化设置,需按提供的字段配置。若需个性化设计,可点击“申请”进行申请。选择完毕后点击提交即可。

前言

在“我的模板”中,点击刚申请模板右侧的“详情”进入配置页。请注意图中高亮部分,这将是后续设置参数时的重要Key值。

前言

2. 获取下发权限

前述微信官方文档中的步骤与本文一致,可在详情页查看详细步骤及接口回调参数信息。示例代码为wx原生代码,此处以为例进行说明。文档中发起弹窗请求的方法为wx.requestSubscribeMessage(Object object),在uni中搜索该方法名为:uni.requestSubscribeMessage(Object object),两者功能完全一致,仅调用顶层对象不同。

methods:{
	Subscribe(){
		uni.requestSubscribeMessage({
			//此处填写刚才申请模板的模板ID
		  	tmplIds: ['ZcsAH2vJKgKocfQw8e2Phhz-8FzPQgfT_5ehxwic4ck'],
		  	success (res) {
		  		console.log(res)
		  	}
		})
	}
}

在methods中定义此方法,可通过点击事件绑定该方法作为测试。

需注意,开发者工具与真机调试的效果存在差异,必须进行真机调试以验证实际效果。

打印res对象可见,accept表示用户同意,reject表示拒绝。

3. 调用接口发订阅消息

第二步旨在获取用户授权订阅,只有获得授权才允许向用户发送订阅消息。第三步则是向微信服务器发送请求,通过微信发送服务通知给特定用户。详细请求参数请参考微信官方文档,此处以为例进行说明。

请求地址:POST https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=ACCESS_TOKEN

查阅文档可知,必须填写4个参数,需仔细核对。文档仅告知需填这四个,具体获取方式需逐步推导。

前言

3.1、access_token:

此处需向微信的一个接口发送请求,需传入appid和secret,此步骤用于获取access_token,有效期为2小时。

get_wx_access_token() {
	   return uni.request({
	       method: 'get',
	       // appip和secret需要去小程序管理界面查看
	       url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
	       dataType: 'json',
	       timeout: 30000
	   }).then(res => {
	       let [err, success] = res
	       if (success.statusCode == 200) {
	           return success.data.access_token
	       }
	   })
}

若忘记小程序密钥,可点击重置,并务必保存新密钥。

前言

PS:建议将获取token的请求放置在后端执行,若将secret暴露在前端,上线提交审核时会被标记风险并驳回。

3.2 touser

touser参数为接收订阅消息的用户ID。获取用户ID需先登录获取用户的code,再利用code获取用户ID。

// 先让用户登录,此user_login方法可以放到onLoad()生命周期中去执行
// 此处async和await异步操作不懂可以先百度,问题不大
async user_login() {
		let self = this
		await uni.login({
			success(res) {
				if (res.code) {
					self.code = res.code
				} else {
					console.log('获取失败!' + res.errMsg)
				}
			}
		})
},

获取用户登录信息后,res.code即为用户的code。随后向微信后端发送请求以获取openid,此处获取openid的请求同样需使用secret,因此建议该请求也置于后端执行。附上使用获取的代码示例。

// wxappid wxsecret为小程序的appId和secretKey,登录小程序后台可查看,code就是user_login的那个code
uni.request({
	url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wxappid}&secret=${wxsecret}&js_code=$[code]&grant_type=authorization_code`,
	success(data) {
		self.useropenId = data.data.openid
	}
})

文档:

前言

此时已获取useropenId,该值需传入touser参数。

3.3、template_id

该值为模板ID,直接以字符串形式传入,下文将展示传值代码。

3.4、data

data传值需引用申请模板时高亮的那部分字段。若申请其他模板,需注意传入Key的顺序需保持一致,传入格式为Json数据,每条Json的Key对应模板中的Key。

最后一步即为发送订阅消息。

notice() {
		let self = this
		//下方的thing1,thing2和其他,对应的是你选取模板的模板详情中的字段名称(可在小程序后台模板查看对应的字段,要和上面的字段一样),需要更改成你自己的
		const pushmsg = {
			"touser": self.useropenId,
			"template_id": "ZcsAH2vJKgKocfQw8e2Phhz-8FzPQgfT_5ehxwic4ck",
			"data": {
				"thing1": {
					"value": "今天记得写代码"
				},
				"date2": {
					"value": "19:00"
				},
				"time3": {
					"value": "20:00"
				},
				"thing4": {
					"value": "今天写堆排序把"
				},
				"time7": {
					"value": "18:50"
				}
			}
		}
		uni.request({
			// 此处的mytoken
			url: 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=' + this.get_wx_access_token(),
			data: JSON.stringify(pushmsg),
			method: 'POST',
			success: function(res) {
				// console.log('success');
			}
		})
},

以上即为微信小程序发送服务通知的全部流程。最后附上:方法是死的,人是活的,核心步骤即微信官方文档提到的三步,但每一步均涉及其他文档未明确说明的知识点,需自行发掘。若有相关经验,查阅文档实现此需求将相对容易,本文对初学者或许更为友好。每个单独步骤和请求均可拆分为独立方法,如同积木,核心组件已告知,最终组合方式由你决定。前提是需先获得openid,用户点击弹窗授权统一,然后获得token,最后结合各项数据发送请求以实现模板订阅。因实现过程涉及多个知识点组合,建议逐一测试并打印返回值,以理解每个操作的意义,最后将关键部分放置于后端即可。

我的实现思路是:

前端:

在onLoad()阶段执行user_login以获取user的code。

点击预约按钮触发弹窗uni.requestSubscribeMessage。

弹窗成功后判断返回值,若为accept表示同意,则向后端发送请求,附带user的code。

后端:

发送请求以获取openid。

发送请求以获取token。

最后利用openid、token、写死的template_id和data发送服务通知。

总结

到此这篇关于微信小程序订阅消息发送服务通知的文章就介绍到这了,更多相关小程序订阅消息发送服务通知内容请搜索本站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持本站!

作者最新文章