2023-08-05 如何基于 uni-push2.0 实现全平台推送

参考链接:

uni-push2 统一推送:uniapp.dcloud.net.cn/unipush-v2....

前言

最近研究了下 uni-push2.0,发现可以实现 App、Web、小程序等多个平台的推送,特此记录。

一、什么是 uni-push2.0

uni-push是 DCloud 推出的、全端的、云端一体的统一推送服务。

  1. 客户端方面,uni-push2支持 App、web、小程序。
  • App 端,内置了苹果、华为、小米、OPPO、VIVO、魅族、谷歌 FCM 等手机厂商的系统推送和个推第三方推送

  • 小程序端,内置了 socket 在线推送。如需模板消息/订阅消息,另见uni-subscribemsg

  • web 端,内置了 socket 在线推送 (uni-push1 仅支持 app,且 app 必须包含个推原生 sdk。uni-push2 在 app 端如不需要厂商推送,只需在线推送,无需集成个推原生 sdk)

  1. 服务端方面,uni-push2支持 uniCloud 云端一体,无需再编写复杂代码轻松完成 push。 (uni-push1.0 仅支持使用传统服务器开发语言如 php,未和客户端有效协同,流程比 uni-push2.0 繁琐)
  2. uni-push 还自带一个 web 控制台。不写代码也可以在 web 页面发推送。uni-push1.0 的 web 控制台在dev.dcloud.net.cn。uni-push2.0 的 web 控制台是开源的,属于 uni-admin 插件详见

二、如何使用 uni-push2.0

1.开通

在开始使用 uni-push2.0 前,需要先开通 uni-push2.0。

开通流程详见:uni-push2.0 快速上手

此处请注意,如果还需要开通 Android 或 iOS 端的推送,则还需要填写 Android 包名、签名(SHA1 指纹)或 iOS Bundle ID。

这里以获取 Android 签名为例:

  • 切换到签名证书所在的文件夹

cmd 复制代码
keytool -list -v -keystore test.keystore
Enter keystore password:  # 输入密码,回车
  • 这里的 test.keystore 就是你证书 keystore 的名字

  • 然后就能看到类似的内容,在网页上填写即可

2.客户端启用 uniPush2.0

在开通完成后,还需要在客户端启用 uni-push2.0。

APP 端的启用如图所示

注意:需要离线推送的话还需要引入对应的 SDK

Web 端的启用如图所示

微信小程序端的启用如图所示

注意:在小程序端使用还需要将个推的域名加入白名单,否则无法联网

个推的域名参考小程序中使用 uni-push2.0 的白名单配置

个推自有域名:wshz.getui.net、wshz.gepush.com、wshzn.gepush.com、wshzn.getui.net

3.1 客户端监听推送消息

由于监听推送消息的代码,需要在收到推送消息之前被执行,所以建议监听逻辑写在应用一启动就会触发的应用生命周期onLaunch中

参考代码如下:

js 复制代码
//文件路径:项目根目录/App.vue
export default {
	onLaunch: function() {
		console.log('App Launch')
		uni.onPushMessage((res) => {
			console.log("收到推送消息:",res) //监听推送消息
		})
	},
	onShow: function() {
		console.log('App Show')
	},
	onHide: function() {
		console.log('App Hide')
	}
}

注意:接收到的消息有两种类型,分别是:

  • "click"-从系统推送服务点击消息启动应用事件
  • "receive"-应用从推送服务器接收到推送消息事件

如果你在接收到 receive消息的时候,本地通过uni.createPushMessage的方式手动创建通知栏消息的,那么,此时如果再同通知栏点击进入,就会触发一次 click。

因此,需要在监听消息的时候区分两种消息类型,比如说只监听receive类型的消息。

3.2 获取客户端推送标识

示例代码如下:

js 复制代码
// uni-app客户端获取push客户端标记
uni.getPushClientId({
	success: (res) => {
		let push_clientid = res.cid
		console.log('客户端推送标识:',push_clientid)
	},
	fail(err) {
		console.log(err)
	}
})

拿到 push_clientid 后,就可以在服务端发起推送了。

4.服务端推送消息

推送消息就要到服务端进行了。

首先在创建云函数的时候需要选择uni-cloud-push扩展库,否则无法调用推送功能。

云函数的示例代码如下:

js 复制代码
'use strict';
const {
	verifyHttpInfo
} = require('uni-cloud-s2s')

exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	if (context.source === 'http') { // 建议在使用url请求当前云函数时进行验证
		try {
			verifyHttpInfo(event)
		} catch (e) {
			return e
		}
	}
	const uniPush = uniCloud.getPushManager({
		appId: context.APPID || "__UNI__XXXXXX" // 处理 URL 化时没有 APPID 的问题
	})

	//返回数据给客户端
	const resp = await uniPush.sendMessage({
		"push_clientid": "xxx", 	//填在uni-app客户端获取到的客户端推送标识push_clientid
		"title": "通知栏显示的标题",	
		"content": "通知栏显示的内容",
		"payload": {
			"text":"体验一下uni-push2.0"
		}
	})
	console.log(resp);
	return resp
};

之后就可以调试运行一下云函数,如果一切顺利的话,此时你的客户端就应该会接收到推送消息了。

5.特别注意!!

在 Web 端,无需特别的配置即可在开发模式下接收到推送消息。

但如果是小程序端,则还需要配置域名白名单,同时,无法在微信小程序模拟器里接受到推送消息,请真机运行之后再试(即将小程序运行到微信客户端里)。

特别注意!如果是 APP 端,无论是 Android 还是 iOS 端,都无法在官方的基座应用里接收到推送消息!需要自行打包一个自定义调试基座应用才行!

【如下图所示】

总结

本文介绍了如何基于 uni-push2.0 实现 App、Web、小程序等多个平台的推送,包括开通、启用和调用的流程和代码示例。

本文参考 uni-push2.0 官方教程和笔者的踩坑记录总结而成,希望对于各位读者朋友能有所帮助,谢谢观看。

本文作者:草梅友仁

本文地址:blog.cmyr.ltd/archives/1e...

版权声明:转载请注明出处!

相关推荐
特创数字科技4 小时前
【uni-app x】告别系统相机限制!三端通用自定义相机组件:任意布局、静默拍照、录像、水印叠加、连拍回图一次搞定
前端·数码相机·uni-app
Martin -Tang4 小时前
uniapp app嵌套webview 弹窗方式
android·ios·uni-app
愚公搬代码4 小时前
【愚公系列】《微信小程序项目实战(AI编程+视频图解)》002-一张新地图:AI创业的核心分析框架
人工智能·微信小程序·ai编程
ZeroNews内网穿透14 小时前
企业内网穿透别再用随机域名!自有域名实现 OA/ERP 公网安全访问
微信小程序·内网穿透·erp·zeronews·运维实战·企业oa·自有域名
郑州光合科技余经理15 小时前
同城电商系统:库存变更怎么同步到订单
java·开发语言·前端·后端·uni-app·php·ai编程
现任明教教主~1 天前
运营级多门店洗车贴膜汽车在线核销保养服务系统洗车预约洗车系统消费分佣扫码核销系统
微信小程序·小程序·汽车
陪我去看海1 天前
被要求猛出小程序,做了这个多平台多环境的部署替我承受压力
前端·微信小程序·抖音小程序
無名路人1 天前
小程序点餐页吸顶滚动之分类按需加载,上划切换
前端·vue.js·微信小程序
mmsx1 天前
Android 一个设备多个 App 抢:跨进程共享服务的架构设计
android·kotlin·app
mmsx1 天前
Android GIS系列 栅格怎么存、格网怎么归算:两个容易混淆的 GIS 链路
android·性能优化·app