提示：本文实例消息推送使用uniapp官方的unipush推送：

项目场景：该项目是uniapp + uniCloud 项目    
    
    
，APP端的消息推送使用 html+ 与原生实现交互

1.开通推送消息

– uniapp 中的manifest.json文件中找到App模块配置     


     


     


    ，勾选push消息推送模块

– dcloud开发者中心后台开通unipush功能及各种配置项

– 安卓离线消息推送是需要配置各大厂商




 




 




 


，IOS离线不需要
   

   

   

，但需要推送证书

2.判断手机权限

- 需求：判断是否开启通知权限     

     

     

   ，跳转对应设置页

/** * 设置手机通知权限 */ setPermissionsInform() { // #ifdef APP-PLUS if (plus.os.name == Android) { // 判断是Android var main = plus.android.runtimeMainActivity(); var pkName = main.getPackageName(); var uid = main.getApplicationInfo().plusGetAttribute("uid"); var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat"); //android.support.v4升级为androidx if (NotificationManagerCompat == null) { NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat"); } var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled(); // 未开通‘允许通知’权限 




  




  




  

，则弹窗提醒开通

  


  


  


，并点击确认后     
     
     
  ，跳转到系统设置页面进行设置 if (!areNotificationsEnabled) { uni.showModal({ title: 通知权限开启提醒, content: 您还没有开启通知权限  




   




   




   
，无法接受到消息通知


 



 



 



，请前往设置！, showCancel: false, confirmText: 去设置, success: function(res) { if (res.confirm) { var Intent = plus.android.importClass(android.content.Intent); var Build = plus.android.importClass("android.os.Build"); //android 8.0引导 if (Build.VERSION.SDK_INT >= 26) { var intent = new Intent(android.settings.APP_NOTIFICATION_SETTINGS); intent.putExtra(android.provider.extra.APP_PACKAGE, pkName); } else if (Build.VERSION.SDK_INT >= 21) { //android 5.0-7.0 var intent = new Intent(android.settings.APP_NOTIFICATION_SETTINGS); intent.putExtra("app_package", pkName); intent.putExtra("app_uid", uid); } else { //(<21)其他--跳转到该应用管理的详情页 intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS); var uri = Uri.fromParts("package", mainActivity.getPackageName(), null); intent.setData(uri); } // 跳转到该应用的系统通知设置页 main.startActivity(intent); } } }); } } else if (plus.os.name == iOS) { // 判断是ISO var isOn = undefined; var types = 0; var app = plus.ios.invoke(UIApplication, sharedApplication); var settings = plus.ios.invoke(app, currentUserNotificationSettings); if (settings) { types = settings.plusGetAttribute(types); plus.ios.deleteObject(settings); } else { types = plus.ios.invoke(app, enabledRemoteNotificationTypes); } plus.ios.deleteObject(app); isOn = (0 != types); if (isOn == false) { uni.showModal({ title: 通知权限开启提醒, content: 您还没有开启通知权限                ，无法接受到消息通知   




    




    




    ，请前往设置！, showCancel: false, confirmText: 去设置, success: function(res) { if (res.confirm) { var app = plus.ios.invoke(UIApplication, sharedApplication); var setting = plus.ios.invoke(NSURL, URLWithString:, app-settings:); plus.ios.invoke(app, openURL:, setting); plus.ios.deleteObject(setting); plus.ios.deleteObject(app); } } }); } } // #endif } , /** 可以将该方法放在APP.vue文件的onShow生命周期或是消息中心的onShow中去判断用户是否开启通知权限

-- Android跳转系统设置Settings的各个界面_Chandler丶的博客-CSDN博客

3.推送消息到手机APP：

需求：当有消息推送时


















，推送到手机状态栏中

3.1 获取客户端推送标识信息 cid

// 必须要获取到cid后才能接收推送信息 const cid = plus.push.getClientInfo() console.log(cid);

3.2 创建推送消息

//plus.push.createMessage( content, payload, option ); //在本地直接创建推送消息               ，并添加到系统消息中心    
    
    
    。 content: ( String ) 必选 消息显示的内容    



     



     



     ，在系统通知中心中显示的文本内容


     


     


     


。 payload: ( String | Object ) 可选 消息承载的数据


















，可根据业务逻辑自定义数据格式
 




 




 




。 options: ( MessageOptions ) 可选 创建消息的额外参数    
    
    
，参考 https://www.html5plus.org/doc/zh_cn/push.html#plus.push.MessageOptions plus.push.createMessage(我是你爸爸！); // 创建本地推送 plus.runtime.setBadgeNumber(1) // 设置角标

3.3 消息事件

- 实现手机状态栏推送功能逻辑     


     


     


    ，在APP.vue中添加推送消息事件监听器 




 




 




 


，监听到有新消息时
   

   

   

，使用createMessage API创建消息     

     

     

   ，添加点击事件 点击后进行不同操作

对于安卓的在线和离线消息以及IOS的离线消息都是走的click监听事件   

   

   

   。也就是说可以直接将消息推送到手机通知栏中 




  




  




  

，然后点击消息的时候

  


  


  


，可以触发应用监听的点击事件     
     
     
  ，跳转到对应页面 

     

     

     

。 receive事件  




   




   




   
，可以监听到后端推送过来的消息


 



 



 



，触发相应的回调                ，使用createMessage在本地创建消息 // 添加推送消息事件监听器 click plus.push.addEventListener("click",(msg)=>{ console.log(msg............,msg); if(msg.payload){ // 点击跳转对应页面 uni.navigateTo({ url:msg.payload }) } },false) // 添加推送消息事件监听器 receive 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)

4. 消息页面的数据及数字角标

- 需求：当有消息推送时   




    




    




    ，要更新消息中心页面的数据和数字角标

1.在项目中定义请求消息列表的方法


















，将响应的数据存储到vuex中               ，供消息中心页面使用

// 消息页面的数据 async getMsgData(){ let res = await this.$callFunction("userContent/getMsgType") this.$u.vuex("msgData", res.result.data); let msgCount = 0 // 数字角标 res.result.data.map((item)=>{ if(item._id!=5){ msgCount+=item.no_read_total } }) // 给tabbar的角标赋值 let tabbar_data = JSON.parse(JSON.stringify(this.TabbarList)) tabbar_data[3].count = msgCount this.$u.vuex("TabbarList", tabbar_data);

2.监听消息的推送    



     



     



     ，如果接收到消息就更新消息列表数据和角标数字

// --------监听推送的状态---------- plus.push.addEventListener("receive", (msg) => { console.log(getApp().globalData.followCount); if(msg.payload.data.msg_type==501){ uni.$emit(followUpdate,update); } let {content, payload, options} = msgCreate(msg) plus.push.createMessage(content, payload, options); this.getMsgData() }, false) 该功能的实现


















，主要重点在于数据的全局的传值    
    
    
，以及监听数据的变化     


     


     


    ，实时更新数据 可以使用vuex或globalData来存储数据 nuve页面中可以使用$emit $on 进行全局监听