uniapp APP消息推送方案

提示：本文实例消息推送使用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'){// 判断是Androidvar 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升级为androidxif(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 =newIntent('android.settings.APP_NOTIFICATION_SETTINGS');
                                intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);}elseif(Build.VERSION.SDK_INT>=21){//android 5.0-7.0  var intent =newIntent('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);}}});}}elseif(plus.os.name =='iOS'){// 判断是ISOvar 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创建消息，添加点击事件 点击后进行不同操作

1. 对于安卓的在线和离线消息以及IOS的离线消息都是走的click监听事件。也就是说可以直接将消息推送到手机通知栏中，然后点击消息的时候，可以触发应用监听的点击事件，跳转到对应页面。
2. 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中，供消息中心页面使用

// 消息页面的数据asyncgetMsgData(){let res =awaitthis.$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 进行全局监听