uni-app中实现微信小程序/公众号订阅消息推送功能

👨🏻‍💻 热爱摄影的程序员
👨🏻‍🎨 喜欢编码的设计师
🧕🏻 擅长设计的剪辑师
🧑🏻‍🏫 一位高冷无情的编码爱好者
大家好，我是全栈 IT 工程师摘星人
欢迎分享 / 收藏 / 赞 / 在看！

开发业务时时常遇到需要向用户发送一些通知，如欠费通知、会员到期通知等等。
这里使用官方提供的 uni-subscribemsg 公共模块实现推送功能
uni-subscribemsg 公共模块可以方便开发者快速接入小程序订阅消息和微信公众号模板消息。

目前 uni-subscribemsg 支持：

• 微信公众号模板消息
• 微信小程序订阅消息

uni-subscribemsg 公共模块仅能在云函数/云对象内使用。
uni-subscribemsg 插件市场地址

获取订阅模板

如何申请微信小程序订阅消息

如果觉得模板不好用，可以自己添加提交审核成功后就可以使用。

进入 微信小程序后台 - 点击【订阅消息】- 点击【公共模板库】- 点击【选用】。

这里的【模板ID】后面会使用到。

点击详情来到模板详情页面，注意这里的字段对应关系，后面会进行赋值操作。

获取微信公众号模板消息

进入 微信公众号后台 - 点击【模板消息】- 点击【从历史模板库中添加】。

配置

uni-subscribemsg 自身没有配置文件，其依赖 uni-open-bridge 的配置。
这里简单列出如何配置使用的步骤，详细内容请点击：官网 uni-open-bridge

下载插件 uni-open-bridge 到项目中

uni-open-bridge 插件市场地址

uni-config-center 的 uni-id 下配置固定凭据

如果没有appid 和 secret ，需要先向微信申请

• 微信小程序或微信公众号，向微信的公众平台申请 appid 和 secret 固定凭据。
• 微信 App 或 PC 网页，向微信的开放平台申请 appid 和 secret 固定凭据。

然后在项目的 uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json 文件中配置

如果不需要定时刷新 access_token、ticket、也不需要通过外部系统访问凭据时可单独引入 uni-open-bridge-common，然后在云函数或云对象中直接调用相关方法

// uni-id-config 中 uni-id 示例代码
// uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json
{
  "dcloudAppid": "__UNI__xxxxxx", // 在项目的 manifest.json 中
  "mp-weixin": { // 微信小程序
    "tokenExpiresIn": 259200,
    "oauth": {
      "weixin": {
        "appid": "", // 微信公众平台申请的小程序 appid
        "appsecret": "" // 微信公众平台申请的小程序 secret
      }
    }
  },
  "web": {
    "oauth": {
      "weixin-h5": { //微信公众号h5
        "appid": "", // 微信公众平台申请的网页授权 appid
        "appsecret": "" // 微信公众平台申请的网页授权 secret
      }
    }
  }
}

• 在 weixin-mp、weixin-h5 平台，通过调用 uni-open-bridge-common 的get相关方法可自动从微信服务器获取 access_token、encrypt_key、ticket 时需要用到配置文件中的 appid、appsecret

• 暂时不需要配置 weixin-web、weixin-app、qq-mp、qq-app，后续支持这些平台时需要再次补充配置，但仍然可通过调用 uni-open-bridge-common 的方法传入设置值

注意：拷贝此文件内容时需要移除 注释。标准 json 不支持注释。在 HBuilderX 中可用多选 // 来批量移除注释。

uni-config-center 下配置 uni-open-bridge

在 uni-config-center 目录下新建子目录 uni-open-bridge, 新增 config.json，配置 dcloudAppid ，详情见下面的示例代码

// uni-id-config 中 uni-open-bridge 示例代码
// uniCloud/cloudfunctions/common/uni-config-center/uni-open-bridge/config.json
{
  "schedule": {
    "__UNI__xxxxxx": { // dcloudAppid, 需要和 `uni-config-center` uni-id中的配置一致
      "enable": true, // 任务全局开关，优先级最高
      "weixin-mp": { // 平台，目前仅支持 微信小程序、微信 H5，详情参见 https://uniapp.dcloud.net.cn/uniCloud/uni-open-bridge#platform
        "enable": true, // 当前平台任务开关
        "tasks": ["accessToken"] // 要执行的任务，微信小程序支持 accessToken
      },
      "weixin-h5": {
        "enable": false,
        "tasks": ["ticket"] // 支持微信 H5 ticket，因 ticker 依赖微信 H5 accessToken，内部自动先获取 accessToken。此处的 accessToken 和微信小程序的 accessToken 不是一个值
      }
    }
  },
  "ipWhiteList": ["0.0.0.0"] // 用于 URL化后 http 调用的服务器IP白名单，即指定ip的服务器才可以访问URL化后的`uni-open-bridge云对象
}

将插件上传到服务空间

云对象 uni-open-bridge 上传到服务空间后，会每隔一个小时自动运行一次，从微信服务器获取相关凭据并保存到数据库。

在数据库 opendb-open-data 中会看到数据。如开通 Redis 则在 Redis 的 uni-id 分组中查看。

如果异常，请在 uniCloud Web 控制台，找到云函数/云对象 uni-open-bridge 检查运行日志。很可能是第一步或第二步的配置出错了。

当然如果不需要定时任务，可以修改云对象 package.json 里的定时任务配置并重新上传。或在 uniCloud web 控制台修改定时任务。一般不推荐修改定时任务设置。

注意:
如需获取微信公众号 H5 平台的 access_token，需要处理服务空间的固定出口 IP 问题。因为需将 IP 白名单填入到微信公众平台，然后才能在从微信服务器拿到该凭据。uniCloud 中默认没有固定 IP，获取固定 IP 需另见文档 固定 IP。

关联依赖

笔者使用云对象操作，新建云对象后，右击【管理公共模块或扩展库依赖】，在弹出的窗口上将【uni-subscribemsg】钩上，点击确定。

编码部分

可以根据官方提供的 API 实现不同的订阅需求

发送微信小程序订阅消息

订阅消息顾名思义，需要先订阅，才可以发送消息，因此前端需要先让用户订阅。

订阅

调用 uni.requestSubscribeMessage API 即可让用户订阅。

uni.requestSubscribeMessage({
	tmplIds: ["xxx"], // 改成你的小程序订阅消息模板id
	success: () => {
		uni.showToast({
			title: "订阅成功",
			icon: "none"
		})
	}
});

云对象

const dcloudAppid = '__UNI__xxx'
// 引入uni-subscribemsg公共模块
const UniSubscribemsg = require('uni-subscribemsg');
module.exports = {
	_before: function() {},

	/**
	 * 获取openid
	 * @param {Object} code
	 */
	async getOpenid(code) {
		// 初始化实例
		let uniSubscribemsg = new UniSubscribemsg({
			dcloudAppid: dcloudAppid,
			provider: "weixin-mp",
		});
		return await uniSubscribemsg.getOpenid({
			code: code
		})
	},

	/**
	 * 发送订阅消息
	 * @param {Object} obj
	 */
	async sendSubscribeMessage(obj) {

		let {
			touser, // 接收者（用户）的 openid
			template_id, // 所需下发的订阅模板id
			page, // 点击模板卡片后的跳转页面，仅限本小程序内的页面。支持带参数,（示例index?foo=bar）。该字段不填则模板无跳转。
			data, // 模板内容，格式形如 { "key1": { "value": any }, "key2": { "value": any } }
			miniprogram_state, // 跳转小程序类型：developer为开发版；trial为体验版；formal为正式版；默认为正式版
		} = obj;
		// 初始化实例
		let uniSubscribemsg = new UniSubscribemsg({
			dcloudAppid: dcloudAppid,
			provider: "weixin-mp",
		});
		// 发送订阅消息
		let res = await uniSubscribemsg.sendSubscribeMessage({
			touser: touser,
			template_id: template_id,
			page: page, // 小程序页面地址
			miniprogram_state: miniprogram_state, // 跳转小程序类型：developer为开发版；trial为体验版；formal为正式版；默认为正式版
			lang: "zh_CN",
			data: data
		});
		return res;
	},
}

页面

<template>
	<view>
		<u-button @click="getOpenid">获取openid</u-button>
		<u-button @click="sendSubscribeMessage">订阅</u-button>
	</view>
</template>

<script>
	const mjchPush = uniCloud.importObject('mjch-subscribe-push')
	export default {
		data() {
			return {
				code: '',
				form: {
					touser: '', // 接收者（用户）的 openid
					template_id: 'xxx', // 所需下发的订阅模板id
					page: '/pages/index/index', // 点击模板卡片后的跳转页面，仅限本小程序内的页面。支持带参数,（示例index?foo=bar）。该字段不填则模板无跳转。
					data: {
						// 活动名称
						thing11: {
							value: "“舞蹈杯”全国舞蹈大赛"
						},
						// 活动内容
						thing4: {
							value: "点击即可抢红包，最高可得200元红包"
						},
						// 活动开始
						date2: {
							value: "2023-01-01 20:00"
						},
						// 活动截止
						date3: {
							value: "2023-01-31 20:00"
						},
						// 温馨提示
						thing5: {
							value: "活动即将开始，请做好准备"
						}
					}, // 模板内容，格式形如 { "key1": { "value": any }, "key2": { "value": any } }
					miniprogram_state: "developer", // 跳转小程序类型：developer为开发版；trial为体验版；formal为正式版；默认为正式版
				}
			};
		},
		async onLoad() {
			this.login()
		},
		methods: {
			/**
			 * 登录获取code
			 */
			async login() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						that.code = res.code
					}
				});

			},
			/**
			 * 根据code获取openid
			 */
			async getOpenid() {
				mjchPush.getOpenid(this.code).then(res => {
					const openid = res.openid
					const session_key = res.session_key

					this.form.touser = openid
				}).catch(err => {
					console.log(err);
				})
			},
			/**
			 * 返送订阅消息
			 */
			async sendSubscribeMessage() {
				mjchPush.sendSubscribeMessage(this.form).then(res => {
					console.log('res', res);
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">

</style>

请求参数:

返回参数：文章来源地址https://www.toymoban.com/news/detail-431914.html

发送微信公众号模板消息

// 引入uni-subscribemsg公共模块
const UniSubscribemsg = require('uni-subscribemsg');
// 初始化实例
let uniSubscribemsg = new UniSubscribemsg({
	dcloudAppid: "你项目的dcloudAppid",
	provider: "weixin-h5", // 注意，这里是weixin-h5
});
// 发送模板消息
let res = await uniSubscribemsg.sendTemplateMessage({
	touser: "用户openid",
	template_id: "消息模板id",
	url: "https://uniapp.dcloud.net.cn", // 用户点击消息后跳转的链接地址
	data: {
		first: {
			value: "您购买的套餐已到期!",
			color: "#666666"
		},
		keyword1: {
			value: "test@qq.com",
			color: "#666666"
		},
		keyword2: {
			value: "阿里云空间",
			color: "#666666"
		},
		keyword3: {
			value: "2023-12-21 15:30:20",
			color: "#666666"
		},
		remark: {
			value: "请及时续费",
			color: "#666666"
		}
	}
});

请求参数：

返回参数：

微信小程序转发公众号模板消息

uni-subscribemsg 版本需 ≥ 1.0.2

// 引入uni-subscribemsg公共模块
const UniSubscribemsg = require('uni-subscribemsg');
// 初始化实例
let uniSubscribemsg = new UniSubscribemsg({
	dcloudAppid: "你项目的dcloudAppid",
	provider: "weixin-mp", // 注意，这里是weixin-mp
});
// 发送模板消息
let res = await uniSubscribemsg.sendTemplateMessage({
	touser: "用户openid",
	template_id: "消息模板id",
	appid: "公众号appid",
	miniprogram: {
		appid: "小程序appid",
		pagepath: "pages/index/index", // 小程序页面
	},
	data: {
		first: {
			value: "您购买的套餐已到期!",
			color: "#666666"
		},
		keyword1: {
			value: "test@qq.com",
			color: "#666666"
		},
		keyword2: {
			value: "阿里云空间",
			color: "#666666"
		},
		keyword3: {
			value: "2023-12-21 15:30:20",
			color: "#666666"
		},
		remark: {
			value: "请及时续费",
			color: "#666666"
		}
	}
});

请求参数

返回参数：

注意：公众号和小程序无需绑定在同一个开放平台下，但需要同时满足下面的3个要求。

1. 公众号必须和小程序是同主体
2. 小程序关联了公众号
3. 该用户关注了公众号

检测用户是否关注了公众号

uni-subscribemsg 版本需 ≥ 1.0.1

// 引入uni-subscribemsg公共模块
const UniSubscribemsg = require('uni-subscribemsg');
// 初始化实例
let uniSubscribemsg = new UniSubscribemsg({
	dcloudAppid: "你项目的dcloudAppid",
	provider: "weixin-h5",
});
// 检测用户是否关注了公众号
let res = await uniSubscribemsg.getSubscribeUserInfo({
	openid
});

请求参数：

返回参数：

到了这里，关于uni-app中实现微信小程序/公众号订阅消息推送功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！