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

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消息推送模块

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

点击左侧的uni push找到配置管理中的应用配置选项，已经开通unipush功能的应用会自动分配到appid appkey appsecret mastersecret 等内容。

注意： 只有应用所有者才有权力进行消息推送功能的开通，协作者是没有权力的。

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

消息分为离线和在线。

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

打开各大厂商的推送后台进行推送功能的申请即可。具体也不是我申请的，步骤应该很简单。。。

4.应用信息的填写

应用名称可以更改，但是需要跟uniapp中配置的名称一致。
选择平台：安卓和IOS需要的话可以都勾选。
android包名：uniapp云打包时也是需要用到的，这个跟云打包时的一致。
android应用签名：这个签名需要用keytool工具查看，具体的可以问后端同事，他们都知道这个……
ios bundleId ：也是包名，一般跟安卓是一致的，云打包的时候也是跟这个保持一致。

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

6. 测试消息推送时需要云打包的程序，自定义基座的安卓安装包可以连到电脑上进行调试，IOS的不行。所以后面出现的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)

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

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

现在对代码进行解析：

添加监听事件：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事件的处理

页面中的冗余代码应该去掉，只保留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

链接2：创建本地消息的参数详细介绍链接： http://www.hcoder.net/tutorials/info/id/105/

链接3：创建本地消息时一直重复弹窗的解决办法链接： https://ask.dcloud.net.cn/question/95674

正确答案在大神的回复里面：

还要感谢一下个推对我们的支持：

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