提示:本文实例消息推送使用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 = 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') { // 判断是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.MessageOptionsplus.push.createMessage('我是你爸爸!'); // 创建本地推送plus.runtime.setBadgeNumber(1)  // 设置角标

3.3 消息事件

- 实现手机状态栏推送功能逻辑,在APP.vue中添加推送消息事件监听器 ,监听到有新消息时,使用createMessage API创建消息,添加点击事件 点击后进行不同操作

  1. 对于安卓的在线和离线消息以及IOS的离线消息都是走的click监听事件。也就是说可以直接将消息推送到手机通知栏中,然后点击消息的时候,可以触发应用监听的点击事件,跳转到对应页面。
  2. receive事件,可以监听到后端推送过来的消息,触发相应的回调,使用createMessage在本地创建消息
// 添加推送消息事件监听器 clickplus.push.addEventListener("click",(msg)=>{console.log('msg............',msg);if(msg.payload){// 点击跳转对应页面uni.navigateTo({url:msg.payload})}},false)// 添加推送消息事件监听器 receiveplus.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 = msgCountthis.$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 进行全局监听

uniapp APP消息推送方案相关推荐

  1. APP消息推送方案调研

    1. 背景 目前行业内有多家消息推送服务供应商,且各家都宣称自家产品的核心指标行业领先.为了不被各家推送厂商忽悠,量化消息推送到达率效果,我们需要整理设计一套消息推送服务对比量化方案,一切以线上实测数 ...

  2. uni-app消息推送方案

    一.引言 uni-app是支持消息推送的,参考如下文档: UniPush介绍 UniPush使用指南 UniPush开通指南 如何自定义推送通知的图标? 在 uni-app 中使用 UniPush 二 ...

  3. 前端基于uniapp[uniPush]实现APP消息推送(安卓、IOS)

    前提概述:此文章都是基于uniapp中uniPush2实现的在线.离线推送 app消息推送流程 登录开发者中心先填写好项目信息以及配置厂商 在manifest.json文件中勾选推送模块 打包自定义基 ...

  4. 如何构建一套高可用的 APP 消息推送平台

    转载自  如何构建一套高可用的 APP 消息推送平台 消息推送作为移动 APP 运营中的一项关键技术,已经被越来越广泛的运用.本文追溯了推送技术的发展历史,剖析了其核心原理,并对推送服务的关键技术进行 ...

  5. 国内APP消息推送机制以及微信消息延迟问题剖析

    转自:https://club.huawei.com/thread-15878044-1-1.html 一.前言 随着安卓手机以及QQ/微信/支付宝/滴滴出行/美图外卖等一大批移动通信/移动消费应用的 ...

  6. 关于 APP 消息推送,看这篇文章就够辣!!

    原链接:http://www.sohu.com/a/168278657_251759 APP消息推送作为消息分发渠道,一方面起到内容告知的作用,另一方面在一定程度上可以提高用户活跃,在用户流失后也许能 ...

  7. IOS开发之实现App消息推送(最新)

    IOS开发之实现App消息推送(最新) 标签: 推送最新AppStoreXCode6ios开发 2014-11-19 21:13  58412人阅读  评论(77)  收藏  举报   分类: IOS ...

  8. APP消息推送测试点

    APP消息推送测试点 2019.03.15 17:38:39 字数 190 阅读 50 消息推送对象 1.单个推送 2.多个推送 3.及安卓和IOS渠道推送 ps: 注意生产环境和测试环境的分开,避免 ...

  9. 利用MUI+个推实现APP消息推送

    利用MUI+个推实现APP消息推送 从2015年7月开始使用MUI进行APP的开发,到现在已经有一个年头了.而以前做过的东西都没有整理过,以后会将自己遇到的坑整理下来. 这篇主要是讲利用MUI和集成的 ...

最新文章

  1. python读取csv文件的方法-CSV文件在Python中的几种处理方式
  2. 送给即将毕业的大学生:乔布斯在斯坦福的大学演讲
  3. CAN协议,系统结构和帧结构
  4. 修改mysql 外删除用户_mysql添加用户、删除用户、授权、修改密码等
  5. Netcdf中多变量导出代码示例
  6. 课外知识----浏览器存储技术
  7. B树 B+树 B*树
  8. RDBMS即关系数据库管理系统(Relational Database Management System)
  9. 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]
  10. struts2的action中获得request response session 对象
  11. 云计算里AWS和Azure的探究(3)
  12. 软考初级程序员常见类型题,错题个人笔记
  13. 模板字符串+JS模板引擎+vue,三者之间的字符串比较
  14. 用于创建此对象的程序是 Equation。您的计算机尚未安装此程序或此程序无响应。 若要编辑此对象,请安装 Equation或确保 Equation中的任何对话框都已关闭
  15. 【教你如何用驱动人生解决驱动问题】
  16. 解决移动端滑动方向相反
  17. 华为8月9日发布鸿蒙,8月9日华为正式发布鸿蒙系统
  18. 华为云桌面,一站式云上数字化创作深度解读
  19. 运营商再次大规模建设新5G网络,用户或被迫更换5G手机
  20. 蛇形走线用在哪里,一文告诉你

热门文章

  1. iOS开发实战之手机号、座机号正则验证
  2. win10与xp/win7 局域网不通的修改方法
  3. OverLoad和 OverWrite区别
  4. Go+PHP实现敏感词检测
  5. 深入Kubernetes 之 DaemonSet :容器化守护进程
  6. VisionPro基本使用
  7. Himall商城ExpressDaDaHelper订单预发布 查询运费后发单接口
  8. 上海基诺墙绘 中荷学生共同创作涂鸦 “We are伐木累”示好
  9. 问菩萨为何倒坐,叹众生不肯回头
  10. 第4章【思考与练习2】数据文件high-speed rail.csv存放着世界各国高速铁路的情况。对世界各国高铁的数据进行绘图分析。使用Basemap绘制地图及使用Pyecharts绘制地图。