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
					})
				}
			})
		},

网页开启推送

接收成功

真机测试问题排障

运行在真机上面之后，如果未能收到推送信息，尝试查看手机是否禁用了当前app的通知权限

亲测小米是不知道为什么仅用了信息推送权限

开启之后可以接收到推送服务的通知

在uni.onPushMessage的回调后面可以接收到用户点击通知信息的事件type=='clicke'此时可以处理点击通知的事件，我这里进行的事件跳转效果如下

点击通知跳转到详情页面

在相应的页面接受传递的参数(onLoad()函数内)

这里是内嵌了一个webview