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

你的名字 2021-07-25 17:02 2131阅读 0赞

# uniapp 消息推送功能实现 #

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

## ios证书导出踩坑 ##

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

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

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

## unipush 功能的实现 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
点击左侧的uni push找到配置管理中的应用配置选项，已经开通unipush功能的应用会自动分配到appid appkey appsecret mastersecret 等内容。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
**注意：** 只有应用所有者才有权力进行消息推送功能的开通，协作者是没有权力的。

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

消息分为离线和在线。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
打开各大厂商的推送后台进行推送功能的申请即可。具体也不是我申请的，步骤应该很简单。。。

#### 4.应用信息的填写 ####

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]

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

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

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

代码贴出来：

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

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

现在对代码进行解析：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]  
页面中的冗余代码应该去掉，只保留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][onlaunch_methods_ https_ask.dcloud.net.cn_question_108236]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]  
链接2：[创建本地消息的参数详细介绍链接： http://www.hcoder.net/tutorials/info/id/105/][http_www.hcoder.net_tutorials_info_id_105]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 10]  
链接3：[创建本地消息时一直重复弹窗的解决办法链接： https://ask.dcloud.net.cn/question/95674][https_ask.dcloud.net.cn_question_95674]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 11]  
正确答案在大神的回复里面：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 12]  
还要感谢一下个推对我们的支持：

Unipush常见问题 [unipush常见问题链接： https://ask.dcloud.net.cn/article/36611][unipush_ https_ask.dcloud.net.cn_article_36611]  
UniPush使用指南 [unipush使用指南链接： https://ask.dcloud.net.cn/article/35622][unipush_ https_ask.dcloud.net.cn_article_35622]  
UniPush开通指南 [unipush开通指南链接： https://ask.dcloud.net.cn/article/35716][unipush_ https_ask.dcloud.net.cn_article_35716]

[ios_http_docs.getui.com_getui_mobile_ios_apns]: http://docs.getui.com/getui/mobile/ios/apns/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/84b63eaa38f14c828e66bd4a02571fa5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201127151806113.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201127151909839.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201127152322641.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201127152441876.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201127152904786.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201127153103685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201127153654190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201127154621942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[onlaunch_methods_ https_ask.dcloud.net.cn_question_108236]: https://ask.dcloud.net.cn/question/108236
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201127155321785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[http_www.hcoder.net_tutorials_info_id_105]: http://www.hcoder.net/tutorials/info/id/105/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201127155504816.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[https_ask.dcloud.net.cn_question_95674]: https://ask.dcloud.net.cn/question/95674
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201127155534592.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20201127155645755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[unipush_ https_ask.dcloud.net.cn_article_36611]: https://ask.dcloud.net.cn/article/36611
[unipush_ https_ask.dcloud.net.cn_article_35622]: https://ask.dcloud.net.cn/article/35622
[unipush_ https_ask.dcloud.net.cn_article_35716]: https://ask.dcloud.net.cn/article/35716