uni-app 消息推送功能UniPush

news2025/2/27 4:54:48

    uni-app 消息推送功能UniPush,这里用的是uni-app自带的UniPush1.0(个推服务),所以只针对UniPush1.0介绍实现步骤。

    建议查阅的文章:

    UniPush 1.0 使用指南[2]

    Unipush 常见问题[3]

    当然现在已经出了UniPush2.0(HBuilderX 3.5.1及其以上版本支持),新项目的话还是推荐使用UniPush2.0。

    如果要使用UniPush2.0,请移步 UniPush 2.0 使用指南[4] 。

 

 

    UniPush内部封装好了个推及主流厂商 SDK,在使用前必须开通相关服务:点此查看如何开通UniPush推送服务[6]。

    打开 DCloud开发者中心,登录后会进入我的应用列表。在左侧菜单点击uniPush,然后选择 1.0 或 2.0,进入Uni Push信息页,左上角显示为当前要操作的应用,点击可以切换应用。如下图所示:

     应用开通UniPush功能时,需要提交应用相关信息,如下图所示:

     注意:UniPush在申请开通时,需要确保输入的Android包名或iOS Bundle ID必须与打包时配置的一致,否则可能会导致无法收到推送消息。

用户首次使用UniPush功能时,需要向个推同步身份信息。已通过实名认证的用户,会直接将实名认证信息同步给个推。如下图所示:

         Android平台: Android包名必须与HBuilderX中App云端打包时配置的Android包名一致;Android应用签名必须填入打包时使用证书的SHA1指纹。

        iOS平台: iOS BundleId必须与HBuilderX中App云端打包时配置的Bundle ID(AppID)一致。 

     如果已经开通UniPush,会看到如下页面:

 核心代码

unipush.js

// 监听push消息 以及 后台数据回复
import phoneInfo from '@/common/js/phone-info.js';
import store from '@/store'
let timer = null;
let numloop = 0;
import {
  pushEscalation // 绑定别名的接口
} from "@/api/client-notice.js"

// 消息推送 应用配置(这些给后端用的)
const uniPushObj = {
  cid: "",
  AppID: "你的AppID",
  AppKey: "你的AppKey",
  AppSecret: "你的AppSecret",
  MasterSecret: "你的MasterSecret",
}

export default {
  getInfo() {
    uni.getSystemInfo({
      success: res => {
        phoneInfo.systemInfo = res;
      }
    });
  },
  // 开启监听推送 
pushListener() {
  const token = uni.getStorageSync("token") || store.state.token;
  const platform = phoneInfo.systemInfo.platform.toLowerCase();
  // 点击推送信息
  plus.push.addEventListener('click', res => {
    // 其实在这里就可以根据你自己的业务去写了
    if (token) {
      if (platform == 'android') {
        const msg_type = res.payload.msg_type // 0 在线 || 1 离线
        // 做些什么 这里处理你的逻辑
        if (msg_type == 0) {
          console.log('安卓------在线');
        } else {
          console.log('安卓------离线');
        }
      } else {
        //  在线
        if (res.aps == null) {
          console.log('苹果------在线');
        } else {
        // 离线
          console.log('苹果------离线');
        }
      }
    } else {
      // 这里跳登录页了
      uni.redirectTo({
        url: `pages/Login-Reg/Login/email-login`
      })
    }
  });
  // 接收推送信息  在线
  plus.push.addEventListener('receive', res => {
    const messageTitle = res.title;
    const messageContent = res.content;
    if (platform == 'android') {
      /***  
        安卓监听不到  因为安卓这个格式被封装了,做成了通知栏展示
        换个格式就行(比如里面多个字段,或换个字段名)
      */
      /***
        此格式的透传消息由 unipush 做了特殊处理, 会自动展示通知栏 
        开发者也可自定义其它格式, 在客户端自己处理
      */
      //   "push_message": {
      //     "transmission": "{
      //       title:\"标题\",
      //       content:\"内容\",
      //       payload:\"自定义数据\"
      //     }"
      //   },
      // Hbulidx 版本大于 ## 3.4.18,安卓不再通知栏展示, 需要自行创建通知
      plus.push.createMessage(messageContent, res.payload, {
        title: messageTitle
      });
      // 或者在 onlaunch 写入
      // plus.push.setAutoNotification(true);
    } else {
      const type = res.type
      //【APP离线】收到消息,但没有提醒(发生在一次收到多个离线消息时,只有一个有提醒,但其他的没有提醒)  
      //【APP在线】收到消息,不会触发系统消息,需要创建本地消息,但不能重复创建
        // 必须加msg.type验证去除死循环        
      if (res.aps == null && type == "receive") {
        //创建本地消息,发送的本地消息也会被receive方法接收到,但没有type属性,且aps是null  
        plus.push.createMessage(messageContent, res.payload, {
          title: messageTitle
        });
      }
    }
  });
  },
  // 循环获取clientid信息,直到获取到为止
  getClientInfoLoop() {
    plus.push.getClientInfoAsync(info => {
      // 如果info不存在,或者info存在,cid不存在则再次获取cid
      if (!info || !info.clientid) {
        console.log("cid为空=========================================");
        let infoTimer = null;
        infoTimer = setInterval(function() {
          if (cid) {
            clearInterval(infoTimer); //清定时器
            uni.showModal({
              content: cid
            })
            uni.setStorageSync('cid', cid); 
            uniPushObj.cid = cid 
          }
        }, 50);
      } else if (info && info.clientid) {
        let cid = info.clientid;
        uni.setStorageSync('cid', cid);
        uniPushObj.cid = cid
      }
    }, function(e) {
      console.log('Failed', JSON.stringify(e));
      let pinf = plus.push.getClientInfo();
      let cid = pinf.clientid; //客户端标识 
      if (cid) {
        uni.setStorageSync('cid', cid);
        uniPushObj.cid = cid
      }
    })
  },
  /** 
   * 向后台传送cid,绑定别名
   */
  passCid() {
    pushEscalation({
      "appid": uniPushObj.AppID,
      "cid": uniPushObj.cid
    }).then(response => {
      if (response.Code == 0) {
        console.log('----------> cid 绑定别名成功', response);
      }
    })
  },
}

phone-info.js

export default {
    systemInfo: {}, // 系统设备信息
    manifestInfo: "" || uni.getStorageSync("widgetInfo"), // manifest.json 应用信息
}

APP.vue

<script>
  import phoneInfo from '@/common/js/phone-info.js';
  import uniPushListener from '@/common/js/unipush.js';
  export default {
    onLaunch: function() {
      uniPushListener.getInfo();
      // #ifdef APP-PLUS
      plus.screen.lockOrientation('portrait-primary'); //锁定屏幕方向
      uni.setStorageSync('cancelUpdate', 'false'); // 进来APP 重置更新弹窗
      // 获取App 当前版本号
      if (Object.keys(uni.getStorageSync('widgetInfo')).length == 0) {
          plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
              phoneInfo.manifestInfo = widgetInfo;
              uni.setStorageSync('widgetInfo', widgetInfo);
          });
      }
      uniPushListener.getClientInfoLoop(); // 循环获取cid
      plus.runtime.setBadgeNumber(0); // 角标清空
      uniPushListener.pushListener(); // 监听通知栏信息
      //#endif
    }
  };
</script>

🧨🧨🧨最后,如有不足后续整理补充....

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/347418.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何编写一个 npm 插件?

提到写 npm 插件&#xff0c;很多没搞过的可能第一感觉觉得很难&#xff0c;无从下手&#xff0c;其实不然。 我们甚至写个简单的 console.log(hello word)&#xff0c;都是可以当成一个插件发布上去的。 其实无从下手的主要难点还是在于你的具体要做的功能逻辑&#xff0c;这…

FPGA纯verilog代码实现sobel 边缘检测,提供2套工程源码和技术支持

目录1、前言2、理论基础3、设计思路和架构4、图像输入5、RGB转灰度6、3x3卷积滑窗获取7、Sobel卷积运算8、FDMA图像缓存9、图像输出10、工程1详解&#xff1a;ov5640输入11、工程2详解&#xff1a;hdmi输入12、上板调试验证并演示13、福利&#xff1a;工程代码的获取1、前言 边…

vue 在线编辑、实时预览的代码交互组件 vue-code-view

文章目录前言实现安装依赖vue.config.js配置main.js 全局注册参数配置新建vue单文件组件库混合使用错误处理前言 vue-code-view是一个基于 vue 2.x、轻量级的代码交互组件&#xff0c;在网页中实时编辑运行代码、预览效果的代码交互组件。 官方手册&#xff1a; Vue Code Vie…

LeetCode 25. K 个一组翻转链表

原题链接 难度&#xff1a;hard\color{red}{hard}hard 题目描述 给你链表的头节点 headheadhead &#xff0c;每 kkk 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 kkk 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 kkk 的整数倍&#…

vue2配置cesium详细教程

1.简介 网络上现在关于vue配置cesium的教程有很多&#xff0c;包括csdn和掘金等。虽然这些教程在一定意义上提供了开发者如何配置cesium的方法&#xff0c;但是大部分的方法都不切实际&#xff0c;因为每个人的电脑中npm、node、cesium、vue、webpack的版本都基本不一致的&…

汽车直营模式下OTD全流程

概述 随着新能源汽车的蓬勃发展&#xff0c;造车新势力的涌入&#xff0c;许多新能源车企想通过直营的营销模式来解决新能源汽车市场推广速度缓慢问题&#xff0c;而直营模式下OTD&#xff08;Order-To-Delivery&#xff0c;订单-交付&#xff09;全流程的改革创新在这过程中无…

高压放大器在非线性超声传播研究中的应用

实验名称&#xff1a;高压放大器在非线性超声传播研究中的应用研究方向&#xff1a;超声波测试目的&#xff1a;超声波在混凝土中的传播是一个极为复杂的非线性过程。当超声波穿过混凝土材料时&#xff0c;携带了大量有关混凝土内部结构和构造的信息。传统的超声波检测方法虽然…

Android13通知运行时权限

部分应用更新到Android13以上之后&#xff0c;没有横幅(在屏幕上弹出)通知了。 Android 13&#xff08;API 级别 33&#xff09;及更高版本支持用于从应用发送非豁免&#xff08;包括前台服务 [FGS]&#xff09;通知的运行时权限&#xff1a;POST_NOTIFICATIONS。此更改有助于…

死锁(5.1)

死锁 1 死锁的基本概念 1.1 死锁的定义 死锁是发生在一组相互合作或竞争的线程或进程中的一个问题。因此可以定义为&#xff1a;一组竞争系统资源或相互通信的进程相互的“永久”阻塞。若无外力作用&#xff0c;这组进程将永远不能继续执行。 1.2死锁产生的原因进程 &…

第四章 统计机器学习

机器学习&#xff1a;从数据中学习知识&#xff1b; 原始数据中提取特征&#xff1b;学习映射函数f&#xff1b;通过映射函数f将原始数据映射到语义空间&#xff0c;即寻找数据和任务目标之间的关系&#xff1b; 机器学习&#xff1a; 监督学习&#xff1a;数据有标签&#x…

基于Java实现的商品出入库管理系统

基于Java实现的商品出入库管理系统&#xff08;文末附源码&#xff09; 前言 一、出入库管理系统含义介绍&#xff1a; 出入库管理系统是一套利用一物一码技术对仓库货物各环节实施全过程控制管理的系统&#xff0c;可对仓库货物进行入库、出库、货位、批次、保质期等实现一…

DDL 数据定义语言

DDL 数据定义语言 目录概述一、库的管理1、库的创建2、库的修改【一般不修改&#xff0c;容易出现错误】3、库的删除二、表的管理【重要】1、表的创建2、表的修改3、表的删除4、表的复制 【可以跨库复制】练习题概述 数据定义语言 库和表的管理 一、库的管理 创建、修改、删除…

分享116个HTML电子商务模板,总有一款适合您

分享116个HTML电子商务模板&#xff0c;总有一款适合您 116个HTML电子商务模板下载链接&#xff1a;https://pan.baidu.com/s/1gaff8RsoYUD_ep0ejhGkMw?pwdzby2 提取码&#xff1a;zby2 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 建筑行业电子商务模板 建…

2.1单区域集成IS-IS

2.2.1 实验一:单区域集成IS-IS 实验目的实现IS-IS协议基本配置实验拓扑配置单区域集成IS-IS的拓扑图如图2-4所示: 图2-4:配置单区域集成IS-IS 实验步骤配置IP地址R1的配置 <Huawei>system-view

MySQL必会四大函数-窗口函数

在了解窗口函数之前&#xff0c;我们必须了解聚合函数。常见的聚合函数&#xff0c;包括 AVG、COUNT、MAX、MIN、SUM 以及 GROUP_CONCAT&#xff0c;常和GROUP BY 函数一起使用。聚合函数的作用就是对一组数据行进行汇总计算&#xff0c;并且返回单个分析结果。 窗口函数和聚合…

用最新版 VoxEdit 来提升你们的创造力!

众所周知&#xff0c;VoxEdit 可以为你们提供 Voxel 资产建模、装配和制作动画并与全世界分享的一站式服务&#xff0c;而这些全都是免费的。我们一直倾听社区意见并希望让所有人都能更容易进入 The Sandbox 元宇宙。VoxEdit 最新更新版本已经推出&#xff01;为了软体更本土化…

MySQL的触发器

目录 一.概述 介绍 触发器的特性 操作—创建触发器 操作—new和old 操作—查看触发器 操作—删除触发器 注意事项 一.概述 介绍 触发器&#xff0c;就是一种特殊的存储过程。触发器和存储过程一样是一个能够完成特定功能、存储在数据库服务器上的SQL片段&#xff0c;但是…

MACD红二波选股公式,选出MACD二次翻红的标的

经过一段上涨行情之后&#xff0c;市场出现了时间稍长或者幅度稍大的调整&#xff0c;MACD指标的DIF、DEA会出现死叉&#xff0c;柱线由红色转变为绿色。 而调整时间较短或者幅度较小&#xff0c;MACD红柱会缩短&#xff0c;但不出现绿柱&#xff0c;之后红柱开始变长&#xff…

Python-第六天 Python数据容器

Python-第六天 Python数据容器一、数据容器入门1.数据容器二、数据容器&#xff1a;list(列表)1.列表的定义2.列表的下标&#xff08;索引&#xff09;3.列表的常用操作&#xff08;方法&#xff09;4.练习案例:常用功能练习5.list&#xff08;列表&#xff09;的遍历5.1 列表的…

RabbitMQ 入门到应用 ( 三 ) 交换机分类

4.交换机 Exchange 分类 4.0.创建队列Queue 在 操作界面 分别 添加 fivemall.goods fivemall.order fivemall.admin yuan.admin 四个队列 4.1.Direct Exchange(直接交换机) 该类型的交换器将所有发送到该交换器的消息被转发到RoutingKey指定的队列中&#xff0c;也就是说路由…