程序员经验分享-hwhale

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

2023-05-16

请添加图片描述

大家好，我是中国码农摘星人。
欢迎分享/收藏/赞/在看！

开发业务时时常遇到需要向用户发送一些通知，如欠费通知、会员到期通知等等。
这里使用官方提供的 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>

请求参数:

属性类型必填说明
touserstring是接收者（用户）的 openid
template_idstring是所需下发的订阅模板id
pagestring否点击模板卡片后的跳转页面，仅限本小程序内的页面。支持带参数,（示例index?foo=bar）。该字段不填则模板无跳转
miniprogram_statestring是跳转小程序类型：developer为开发版；trial为体验版；formal为正式版；默认为正式版
langstring是进入小程序查看”的语言类型，支持zh_CN(简体中文)、en_US(英文)、zh_HK(繁体中文)、zh_TW(繁体中文)，默认为
datastring是模板内容，格式形如 { “key1”: { “value”: any }, “key2”: { “value”: any } }的object

返回参数：

参数说明
errCode为0代表发送成功，其他均为失败，与微信公众号官方返回码一致 微信公众号全局返回码
errMsg失败后的提示 ，与微信公众号官方错误提示一致

发送微信公众号模板消息

// 引入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"
		}
	}
});

请求参数：

参数类型必填说明
touserString是接收者openid
template_idString是模板ID
urlString否模板跳转链接（海外帐号没有跳转能力）
miniprogramObject否跳小程序所需数据，不需跳小程序可不用传该数据
– appidString是所需跳转到的小程序appid（该小程序 appid 必须与发模板消息的公众号是绑定关联关系，暂不支持小游戏）
– pagepathString否所需跳转到小程序的具体页面路径，支持带参数,（示例index?foo=bar），要求该小程序已发布，暂不支持小游戏
dataObject是模板数据
colorString否模板内容字体颜色，不填默认为黑色
client_msg_idString否防重入id。对于同一个openid + client_msg_id, 只发送一条消息,10分钟有效,超过10分钟不保证效果。若无防重入需求，可不填

返回参数：

参数说明
errCode为0代表发送成功，其他均为失败，与微信公众号官方返回码一致 微信公众号全局返回码
errMsg失败后的提示 ，与微信公众号官方错误提示一致

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

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"
		}
	}
});

请求参数

参数类型必填说明
touserString是接收者openid（用户在该小程序下对应的openid）
appidString否微信公众号appid（不传会自动从uni-id配置中获取）
miniprogramObject否跳小程序所需数据，不需跳小程序可不用传该数据
appidString是所需跳转到的小程序appid（该小程序 appid 必须与发模板消息的公众号是绑定关联关系，暂不支持小游戏）
pagepathString否所需跳转到小程序的具体页面路径，支持带参数,（示例index?foo=bar），要求该小程序已发布，暂不支持小游戏
dataObject是模板数据
colorString否模板内容字体颜色，不填默认为黑色

返回参数：

参数说明
errCode为0代表发送成功，其他均为失败，与微信公众号官方返回码一致 微信公众号全局返回码
errMsg失败后的提示 ，与微信公众号官方错误提示一致

注意：公众号和小程序无需绑定在同一个开放平台下，但需要同时满足下面的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
});

请求参数：

参数类型必填说明
openidString是用户openid

返回参数：

参数说明
errCode为0代表发送成功，其他均为失败，与微信公众号官方返回码一致 微信公众号全局返回码
errMsg失败后的提示，与微信公众号官方错误提示一致
subscribetrue 已关注公众号 false 未关注公众号
result用户基本信息返回值
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 在Centos中，程序运行是正常的，外部不能访问，内部可以访问问题解决

    在Centos中 xff0c 程序运行是正常的 xff0c 外部不能访问 xff0c 内部可以访问问题解决 今天遇到一个问题 xff0c 在centos中用python3搭建的一个web服务 xff0c 发现在centos内部可以访问网站

  • 程序设计思维与实践 Week9 作业 A 咕咕东的目录管理器

    题目描述 xff1a 咕咕东的雪梨电脑的操作系统在上个月受到宇宙射线的影响 xff0c 时不时发生故障 xff0c 他受不了了 xff0c 想要写一个高效易用零bug的操作系统 这工程量太大了 xff0c 所以他定了一个小目标 xff0c

  • jsoncpp linux平台编译和arm移植

    0x00 下载 http sourceforge net projects jsoncpp 或者 http download csdn net detail chinaeran 8631141 0x01 Linux平台编译 安装 scons

  • 摩斯密码解码脚本

    摩斯密码解码脚本 解题思路 0010 0100 01 110 1111011 11 11111 010 000 0 001101 1010 111 100 0 001101 01111 000 001101 00 10 1 0 010 0

  • php匹配关键字并跳转页面

    php匹配关键字跳转页面 strstr函数搜索要从目标字符串中搜索的字符串 xff1b strstr函数仅用于检查字符串是否存在 xff1b strstr函数的用法如下 lt php b 61 39 or 39 name 61 GET 39

  • docker常见命令小结

    docker常见命令小结 常见命令 docker ps 查看正在运行的容器 docker exec it 264bb068855e bin bash 进入容器 xff0c 并作出修改 docker commit 3bd0eef03413 l

  • 前端html文件下载，同源与异源下载

    属性说明download下载的资源的名称target打开该连接的方式 self blank href资源的地址 本地 远程地址 a标签跳转 lt DOCTYPE html gt lt html gt lt head gt lt meta c

  • Python图像(字母数字)识别

    本文只针对数字或字母验证码识别 准备工具 tesseract ocr w64 setup v4 1 0 20190314 exepip install pytesseractpip install pillow中文包 tesseract o

  • Python习题

    1 题目 xff1a 编写一个程序 xff0c 使用for循环输出0 10之间的整数 xff1b 代码 xff1a span class token keyword for span i span class token keyword i

  • 面向对象模块和包

    文章目录 1 1 模块1 2 模块的使用2 包 1 1 模块 参考链接 xff1a Python 面向对象 模块和包 来源 xff1a CSDN Python面向对象 模块和包 来源 xff1a CSDN 概念 xff1a 每一个以py为拓

  • SUNDIALS库的编译和使用

    SUNDIALS库的编译和使用 1 简介 SUNDIALS SUite of Nonlinear and DIfferential ALgebraic equation Solvers 是由美国劳伦斯利福摩尔国立实验室 xff08 Lawr

  • 【ing】在Linux虚拟机上安装Sundials库（图文）

    1 Sundials库下载 Sundials下载地址 2 具体步骤 2 1 下载sundials 2 2 0 本次尝试选择sundials 2 2 0进行安装 Sundials文件内容如下 xff1a 2 2 创建安装目录 安装目录名称为

  • 基于docker部署Prometheus

    文章目录 基于Docker搭建Prometheusgitee 介绍Prometheus一 安装运行Prometheus docker版 部署Prometheus1 安装docker联网状态下阿里云离线安装包下载2 下载镜像包3 启动node

  • 程序设计思维与实践 Week11 作业 E 选做题11-1 东东与 ATM

    题目描述 xff1a 一家银行计划安装一台用于提取现金的机器 机器能够按要求的现金量发送适当的账单 机器使用正好N种不同的面额钞票 xff0c 例如D k xff0c k 61 1 2 N xff0c 并且对于每种面额D k xff0c 机

  • kubectl edit

    文章目录 kubectl edit官方文档语法示例 kubectl edit 官方文档 使用默认编辑器 编辑服务器上定义的资源 使用命令行工具获取的任何资源都可以使用edit命令编辑 edit命令会打开使用KUBE EDITOR xff0c

  • kubectl exec

    文章目录 kubectl exec通过bash获得pod中某个容器的TTY xff0c 相当于登录容器 命令行 创建一个test文件 xff1a kubectl exec exec命令同样类似于docker的exec命令 xff0c 为在一

  • kubectl describe

    文章目录 describe语法选项 示例描述一个node详细信息描述一个pod描述calico yaml中的资源类型和名称指定的pod描述所有的pod描述所有包含label k8s app 61 calico kube controller

  • k8s自动化安装脚本（kubeadm-1.21.1）

    文章目录 介绍软件架构安装教程更新内容2023 02 102022 10 202022 08 06准备部署包 操作步骤环境准备结构备注 解压部署包修改host文件初始化环境验证ansible配置 安装k8s集群登录master的节点添加no

  • Shell——docker启动yapi

    文章目录 脚本简介脚本注解执行方式脚本内容 脚本简介 基于运维统一脚本中 17 平台管理下的Yapi管理平台部署系统版本Centos7docker环境 脚本注解 该脚本快速部署yapi平台 xff0c 已通过docker commit把对应

  • Shell——查看基础信息脚本

    文章目录 脚本简介脚本注解安装方式执行方式执行结果 脚本内容新版本旧版本 脚本简介 基于运维统一脚本中 xff0c 19 脚本安装下的检查服务器脚本安装使用yum安装 yum仓库 xff0c 系统版本Centos7 脚本注解 该脚本为了快速

随机推荐

热门标签