uni-app实现uniPush推送功能(Android)

一.开通UniPush推送服务

在manifest.json中勾选push(消息推送)

点此查看如何开通UniPush推送服务

二.在线推送(总结)

1.需要确保输入的 Android包名必须与打包时配置的一致,否则会导致无法收到推送消息

2.获取cid

plus.push.getClientInfo();

若出现获取不到cid的情况加上延时。

setTimeout(function(){
                plus.push.getClientInfo() ;
            },2000)

三.厂商推送

1.此处以华为为例

uni-app实现uniPush推送功能(Android)_第1张图片

 

2. 创建华为应用

  • 参见华为官方文档 开发准备 。

    登录 AppGallery Connect 网站,选择我的应用。打开刚才创建的应用,查看应用信息中相应的华为 AppID、华为 SecretKey。该信息在之后步骤中将会使用,如下图:

    uni-app实现uniPush推送功能(Android)_第2张图片

    • 在 “项目设置 > 增长” 中选择“推送服务”,点击“立即开通”,以此来开启华为侧推送服务状态。

    uni-app实现uniPush推送功能(Android)_第3张图片

  • 在 “项目设置 > 常规” 中填写“ SHA256证书指纹 ”,点击右侧对勾进行保存;若不知道具体值,请参考 SHA256指纹证书获取 。

    uni-app实现uniPush推送功能(Android)_第4张图片

3.填写应用信息

将申请的应用信息填写到对应的厂商推送设置里面。

4.注意

配置好厂商参数后请一定要提交云打包,并且使用“自有证书”打签名包。

需要确保输入的 Android包名必须与打包时配置的一致,否则会导致无法收到推送消息。

四.部分代码

代码由插件市场抽取出来,具体的使用方法插件讲的很清楚。

【V2】unipush的uniCloud版【系统消息中心】【华为、小米离线角标】 - DCloud 插件市场

1.配置uni-push必要参数

uni-app实现uniPush推送功能(Android)_第5张图片

 uni-app实现uniPush推送功能(Android)_第6张图片

 

2.pushDemo

填写clientid

代码逻辑根据业务需求自行修改

uni-app实现uniPush推送功能(Android)_第7张图片

'use strict';
const UniPush = require('uni-push')
exports.main = async (event, context) => {

	var type = "toApp";
	if (event.type != undefined) type = event.type;

	if (type == "toSingle") {
		//单推
		let res = await UniPush("toSingle", {
			"title": "离线时显示的标题",
			"content": "离线时显示的副标题",
			"payload": JSON.stringify({
				"title": "在线时显示的标题",
				"content": "在线时显示的副标题",
				"data": {
					"username": "uni-app",
					"text": "这是透传的数据data的里面的内容"
				}
			}), //xiaomi f21d20599856abb8b685f6bddb6c5060   oppo 7148cae7bdb36f986dbcf84b02e6c43c
			"clientid": '', // 'fc496e1f22c10e630f331320868a8f56' ea47e0a3110171f0ea71572809da1062
			//用户单clientid 来源 plus.push.getClientInfo()  http://www.html5plus.org/doc/zh_cn/push.html#plus.push.getClientInfo
		})

		return res
	} else if (type == "toApp") {
		//群推
		return await UniPush("toApp", {
			"title": "【群推】离线测试",
			"content": "【群推】离线测试1",
			"payload": JSON.stringify({
				"title": "【群推】在线测试",
				"content": "【群推】在线测试"
			})
		})
	}




};

3.监听消息并弹出通知栏

	// #ifdef APP-PLUS
				//监听push推送通知
				plus.push.addEventListener('receive', ({type,title,content,payload})=>{  
				
					
					if(type=='receive' || uni.getSystemInfoSync().platform != "ios"){ //如果type!='receive'是自己本地插件的push消息栏,“拦截”避免死循环',安卓系统没有这个问题
						if(typeof payload != 'object'){ payload = JSON.parse(payload) }//判断是否为object,不是的话手动转一下。hbuilderx 3.0以上版本已经修复此问题可省略
						plus.push.createMessage(content,JSON.stringify(payload),{
							title:payload.title,
							subtitle:payload.content
						});
					}else{
						plus.push.createMessage(content,JSON.stringify(payload),{
							title:payload.title,
							subtitle:payload.content
						});
					}
					
				});
								
				//监听点击通知栏
				plus.push.addEventListener('click', function({payload}) {
					//清空角标
					plus.runtime.setBadgeNumber(0);
			 	if(typeof payload != 'object'){ payload = JSON.parse(payload) }
					let pages = getCurrentPages();
					let currentWebview = pages[pages.length - 1].$getAppWebview();
					if(currentWebview.__uniapp_route != 'pages/msg-center/msg-center'){
						uni.switchTab({url:'/pages/msg-center/msg-center'})
					}
					uni.$emit('readMsg',payload) 
				});
			// #endif

4.完成推送!

你可能感兴趣的:(前端,android,uni-app)