uni-app开启app推送push服务

黄粱一梦2024-01-1713

uni-app开启app推送push服务

应用场景（引自官网）

用户消息通知
当 APP 用户相关状态或者系统功能状态变化时（如用户订单通知、交易提醒、物流通知、升级提醒、社交互动提醒等），可对用户进行及时告知，或者促使用户完成特定操作。
离线语音播报
它也是一种用户消息推送，实现原理其实是自定义通知提醒铃声
营销促活通知
在日常营销推广、促销活动等场景下（如双11大促、产品上新、重要资讯等），APP可对目标用户进行定向通知栏消息+应用内消息推送，吸引用户参与活动，提升日活。
基于uniCloud的IM、聊天、客服、棋牌游戏交互等
例如：DCloud基于uni-push2开发并开源了uni-im详情:https://uniapp.dcloud.net.cn/uniCloud/uni-im.html
另外棋牌游戏等，需要客户端被动接收消息的需求都可以用uni-push实现。

什么是push?

push，指服务器主动向客户端发送消息的技术。无需客户端持续轮询服务器，即可获得即时数据。

步入正题app推送push服务

创建uniapp项目

需要勾选一下云服务

根据uniapp官方描述

注：uni-push的服务器稳定性是由阿里云serverless、腾讯云serverless、个推来保障的，都是日活过亿的上市公司，无需顾虑稳定性。

manifest.json配置

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

配置uniPush2.0 离线服务中的每个服务商暂不勾选，开通比较麻烦
在这里插入图片描述

开通云服务

uniCloud控制台地址阿里云有一个月的免费配额,可以使用

开通步骤就是实名认证 -> 有身份证就行 -> 开通成功

提交开通之后需要大概十分钟的时间等待阿里云那边接入

在这里插入图片描述

配置uniPush

登录uniapp开发者中心

一般来说创建uniapp之后会自动同步到这里

在这里插入图片描述

找到刚才创建的应用生成云端证书

在这里插入图片描述

一会儿会需要生成的证书内容

在这里插入图片描述

填写应用的各平台信息

在这里插入图片描述

点击新增之后会出现此页面填写刚才证书生成的对应的内容即可,包名可随意填写但需要打包时候自定义基座的报名和此一致

在这里插入图片描述

找到unipush打开侧边栏2.0版本左上角选择到当前uniapp项目填写相应的内容

在这里插入图片描述

关联服务空间，选择刚才自己创建的云空间就好

在这里插入图片描述

配置完成，开始推送

以上都完成之后开启推送,点击左侧消息推送找到透传消息

在这里插入图片描述

利用JSON参数生成工具生成参数

在这里插入图片描述

点击预览发布(注意需要打基座包)

在这里插入图片描述

打基座包顺序(原生app打包选择自定义基座)

在这里插入图片描述

打包之后运行

在这里插入图片描述

app.vue写入生成通知栏代码

小程序push的api文档

./app.vue写入如下代码

onLaunch: function() {
			console.log('App Launch')
			// 首次登录获取设备cid
			uni.getPushClientId({
				success:(res) => {
					console.log('用户设设备id',res);
				},
				error:(err) => {
					console.log('err',err)
				}
			})
			uni.onPushMessage((res) => {
				console.log("收到推送消息：",res) //监听推送消息
				// 收到推送消息之后直接创建本地通知栏
				let id = res.data.payload.id
				uni.createPushMessage({
					title:'青听Player',
					content:res.data.payload.title,
					payload:res.data.payload,
					success:() => {
						console.log('消息推送成功');
					}
				})
				// 说明点击了通知
				if(res.type == 'click') {
					uni.navigateTo({
						url:'/pages/detail/detail?id=' + res.data.payload.id
					})
				}
			})
		},