欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息

程序员文章站 2022-03-01 17:39:56
uniapp 消息推送功能实现上周公司要求做一个消息推送的功能,由于现有的电商APP是用uniapp做的,所以优先考虑uniapp自带的unipush消息推送。ios证书导出踩坑ios推送证书导出连接:http://docs.getui.com/getui/mobile/ios/apns/这个链接我操作过好几次,因为原来就有证书,现在应该是在原有证书的基础上添加一个消息推送的功能,然后重新导出证书cer文件,通过苹果电脑自带的钥匙串功能导出p12证书。导出证书后,需要重新导出证书许可文件profi...

uniapp 消息推送功能实现

上周公司要求做一个消息推送的功能,由于现有的电商APP是用uniapp做的,所以优先考虑uniapp自带的unipush消息推送。

ios证书导出踩坑

ios推送证书导出连接:http://docs.getui.com/getui/mobile/ios/apns/
这个链接我操作过好几次,因为原来就有证书,现在应该是在原有证书的基础上添加一个消息推送的功能,然后重新导出证书cer文件,通过苹果电脑自带的钥匙串功能导出p12证书。

导出证书后,需要重新导出证书许可文件profile文件。

这个证书的导出是后端同事帮忙实现的,具体我这边导出的证书为什么提示不匹配,我需要重新理清思路后再次更新此部分文档。

unipush 功能的实现

1.uniapp 中的manifest.json文件中找到App模块配置,勾选push消息推送模块

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息

2.dcloud开发者中心后台开通Unipush功能及各种配置项

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息
点击左侧的uni push找到配置管理中的应用配置选项,已经开通unipush功能的应用会自动分配到appid appkey appsecret mastersecret 等内容。

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息
注意: 只有应用所有者才有权力进行消息推送功能的开通,协作者是没有权力的。

可以通过上图中的创建推送进行消息的测试。

消息分为离线和在线。

3.安卓离线消息推送是需要配置各大厂商,IOS离线不需要

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息
打开各大厂商的推送后台进行推送功能的申请即可。具体也不是我申请的,步骤应该很简单。。。

4.应用信息的填写

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息
应用名称可以更改,但是需要跟uniapp中配置的名称一致。
选择平台:安卓和IOS需要的话可以都勾选。
android包名:uniapp云打包时也是需要用到的,这个跟云打包时的一致。
android应用签名:这个签名需要用keytool工具查看,具体的可以问后端同事,他们都知道这个……
ios bundleId :也是包名,一般跟安卓是一致的,云打包的时候也是跟这个保持一致。

5.ios推送证书的申请(具体步骤后面会更新)

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息

6. 测试消息推送时需要云打包的程序,自定义基座的安卓安装包可以连到电脑上进行调试,IOS的不行。所以后面出现的IOS在线收不到消息也无法得知是否是数据格式的问题。

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息

7.最最重要的就是前端代码的处理部分

首先: 代码需要放在app.vue中的onLaunch里面。

onLaunch是应用的生命周期函数,注意Uni的生命周期函数与vue的生命周期函数的不同,uni的生命周期函数是应用生命周期函数,vue的生命周期函数是页面生命周期函数,uni的生命周期函数出现的要比vue的早,所以后面遇到了在onLaunch中调用不到methods中的方法的问题,这个问题导致耽误了一两天的时间。。。

代码贴出来:

let timer = false;
plus.push.addEventListener("click",(msg)=>{
	clearTimeout(timer);
	timer = setTimeout(()=>{
		console.log(1111,msg);
		if(msg.payload){
			uni.navigateTo({
				url:msg.payload
			})
		}
	},1500)
},false)
plus.push.addEventListener("receive",(msg)=>{
	if("LocalMSG" == msg.payload){
	}else{
		if(msg.type=='receive'){
			var options = {cover:false,title:msg.title};
			plus.push.createMessage(msg.content, msg.payload, options ); 
		 }  
	}
},false)

就这么几行代码,两周的时间才搞完,而且还是一个后端同事帮我整的……

我只能说,不懂的东西就是难……

现在对代码进行解析:

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息

添加监听事件:click点击事件与receive接收事件

onLaunch函数中,给这个应用添加两个监听事件,一个是click监听点击事件,一个是receive监听接收事件。

对于安卓的在线和离线消息以及IOS的离线消息都是走的click监听事件。也就是说可以直接将消息推送到手机通知栏中,然后点击消息的时候,可以触发应用监听的点击事件,继而获取到事件数据中的payload,这个参数给定的格式是 页面路径+id,例如:/pages/user/info?id=14234132,我在/pages/user/info这个页面有做处理,可以获取到optons中的值继而获取消息详情内容。

click事件中的防抖的必要性

之所以加了一个防抖(也就是定时器,在指定时间内只能触发一次),是因为我一开始将监听事件放在了app.vue中的onshow生命周期函数中,这样就导致页面一直在接收消息,所以才加了一个防抖,但是后来才发现应该加载onlaunch中,但是防抖还是留了下来,因为app离线的时候,点击通知栏中的消息唤醒app时,需要app启动时间,如果是直接跳转到消息页面,则app启动后会自动跳转到首页,也就是造成消息详情页面闪现的效果。
因此,通过延时1.5秒后再进行消息页面的跳转,给1.5秒应用启动的时间,然后通过uni.navigateTo的路由跳转的方法进行跳转到消息页面,点击返回按钮还可以回到首页,这个才是正确的步骤。

receive事件的处理

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息
页面中的冗余代码应该去掉,只保留else里面的代码即可。。
plus.push.createMessage(content,payload,options)这个创建消息的方法是可以通过百度查找到的,而且有详细的参数介绍。

第一个参数:content,必填项,也即是消息的内容部分
第二个参数:payload,选填项,因为页面的跳转是获取的payload中的值,因此我需要这个参数
第三个参数:options,选填项,options是其他参数,cover:false是否覆盖上次通知,默认false,title标题,也即是消息除了需要展示内容之外,还需要展示一下标题部分。

如果不加外面的msg.type的判断,则会出现一直创建消息的效果,接收到消息(receive),然后创建成功(plus.push.createMessage)后,消息的type类型会改变,则可以通过type类型的改变来解决一直弹窗创建消息的问题。

问题解决。。。

再次感谢一下我的后端同事,在IOS推送证书以及前端接收并创建消息的代码上对我的帮助。。。

参考链接附上:

链接1:onlaunch中调用不了methods中的函数 https://ask.dcloud.net.cn/question/108236
uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息
链接2:创建本地消息的参数详细介绍链接: http://www.hcoder.net/tutorials/info/id/105/

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息
链接3:创建本地消息时一直重复弹窗的解决办法链接: https://ask.dcloud.net.cn/question/95674
uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息
正确答案在大神的回复里面:

uniapp unipush接入个推消息推送(各种踩坑记录)安卓+IOS+在线消息+离线消息
还要感谢一下个推对我们的支持:

Unipush常见问题 unipush常见问题链接: https://ask.dcloud.net.cn/article/36611
UniPush使用指南 unipush使用指南链接: https://ask.dcloud.net.cn/article/35622
UniPush开通指南 unipush开通指南链接: https://ask.dcloud.net.cn/article/35716

本文地址:https://blog.csdn.net/yehaocheng520/article/details/110232343