uni-app 离线推送,在线推送前端配置(华为为例)

	使用uni-app官方的推送离线推送消息
	1.DCLOUD开发后台者创建应用并开通 Uni Push 推送服务
	2.厂商推送设置里面 选择对应厂商,这里为华为配置
		附图1
	其中配置信息可以在华为开发者后台中找到https://developer.huawei.com/consumer/cn/service/josp/agc/index.html
		附图2
	3.配置完成之后在Uni Push中使用web模板推送
		(1.“通知消息”为在线推送,离线时推送不能实时接收,打开应用后在有效时间内可接收(配置较为简单)
		(2.“透传消息”为离线推送,离线或在线都可以接收到推送消息(配置复杂一点)
			打包时有渠道包的选择
				附图3
			a.渠道包选择为 “无” 时 APP 打开之后接收到的是 “描述” “透传内容”中的信息 其中透传内容为JSON格式
				附图4
			b.渠道包选择为当前手机渠道时 并且勾选了厂商渠道时 APP 打开之后接收到的是 “通知内容”中的消息 通知内容严格遵照官方写法
			intent:#Intent;action=android.intent.action.oppopush;launchFlags=0x14000000;component=(你的包名,去掉括号)/io.dcloud.PandoraEntry;S.UP-OL-SU=true;S.title=测试标题;S.content=测试内容;S.payload=test;end
			S.title=的值为推送消息标题;
			S.content=的值为推送消息内容;
			S.payload=的值为推送消息的数据;
				附图5
	4.打开APP之后接收推送消息,根据推送消息处理你的业务逻辑
		App.vue
			onLaunch(){
				// #ifdef APP-PLUS
					const _handlePush = (message)=> {//收到推送后
						let {payload} = message;
						uni.showToast({
							title:JSON.stringify(message)+'',
							icon:'none',
							duration:5000
						});
						/* 
						没有通知栏消息。这是透传的特点。想要有自己plus.push创建一个
						http://www.html5plus.org/doc/zh_cn/push.html#plus.push.createMessage
						特点就是通知栏要不要信息自己决定,有的通知是即时限制的发来就语音播报你有一条新的消息。不需要通知栏有的有需要。总之透传自己另外创建通知栏消息最方便了 
						 */
					}
					//监听push推送通知
					plus.push.addEventListener('receive', function(message) {
						plus.nativeUI.toast('push receive');
						_handlePush(message);
					});
					//监听点击通知栏
					plus.push.addEventListener('click', function(message) {
						plus.nativeUI.toast('push click');
						_handlePush(message);
					});
				// #endif
			}
		消息信息 附图6

	5.走个推通道消息未传指定格式,离线不可接收消息,打开APP即可接收
		标准格式 {"title": "xxx","content": "xxx","payload": "xxx"}
		附图7

![图1](https://img-blog.csdnimg.cn/20200824142843927.png#pic_centeruni-app 离线推送,在线推送前端配置(华为为例)_第1张图片

图1
uni-app 离线推送,在线推送前端配置(华为为例)_第2张图片
图2

uni-app 离线推送,在线推送前端配置(华为为例)_第3张图片
图3

uni-app 离线推送,在线推送前端配置(华为为例)_第4张图片
图4

uni-app 离线推送,在线推送前端配置(华为为例)_第5张图片
图5

uni-app 离线推送,在线推送前端配置(华为为例)_第6张图片
图6

uni-app 离线推送,在线推送前端配置(华为为例)_第7张图片
图7

最重要的就是第五点,配置成功了不能够离线接收消息就是因为不是标准格式

你可能感兴趣的:(uni-app,vue,js)