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

news2024/10/7 14:31:02

前提概述:此文章都是基于uniapp中uniPush2实现的在线、离线推送

app消息推送流程

  1. 登录开发者中心先填写好项目信息以及配置厂商
  2. 在manifest.json文件中勾选推送模块
  3. 在前端项目中创建云函数(此云函数的作用是接受后台发送的消息模板,解析出来后,发送给到uniapp后台,以此触发消息推送功能)
  4. 在app.vue文件中需要做三件事:
    ①获取客户端推送标识
    ②处理离线(推送点击)
    ③在线(接收消息、推送点击)
  5. 真机测试

好了,以下会根据上面的五个流程给出的具体笔记。。。

坑点

在具体讲述之前,我觉得可以把坑点先记下来,方便大家避雷:

  • 上传iOS证书提示“证书环境错误”的问题

需要上传的是推送证书,不是打包证书

  • 配置完成后,运行到真机会出现"打包时未添加push模块,请参考…“的情况

在manifest.json勾选了push模块之后,需要重新打包自定义基座

  • 账号共同的问题

你在哪个开发者账号中配置的app,对应的你的HBuilder也要登录那个账号进行开发

  • 小米真机测试,出现收不到消息的情况

需要配置推送时间

具体处理笔记(从0到1)

1、在开发者中心填写项目信息以及配置厂商(见图)

在这里插入图片描述

在这里插入图片描述

2、在manifest.json文件中勾选推送模块

在这里插入图片描述

3、在前端项目中创建云函数

消息推送属于敏感操作,只能直接或间接由服务端触发。传统的三方push服务,需要开发者在服务端配置密钥或证书,根据服务器端文档签名获取token,再向相关URL接口发起网络请求…而unipush仅是需要我们创建一个云函数作为一个中转站

  • 点击项目,右键点击创建uniCloud云开发环境,然后选择阿里云或者腾讯云
  • 创建完成后,右键点击uniCloud选择关联空间
  • 再右键点击cloudfunctions,选择新建云函数,新建时可选择uni-cloud-push扩展库

具体里面的内容,我们处理的不需要很多,可以具体看文档,文档写的比较详细,一直往下滑,直接看第四步

4、在app.vue处理消息

注意:安卓和IOS在线推送的情况是,是不会弹出提示的,需要我们手动创建

直接贴代码啦,具体看注释

// #ifdef APP-PLUS
  // 客户端获取push客户端标记
  uni.getPushClientId({
    success: async (res) => {
      let push_clientid = res.cid
      //这个id是不会改变的,我们需要在登录必经过的页面或者方法拿到这个id传给后端存储起来
      uni.setStorageSync('unipush_id', push_clientid)
    },
    fail(err) {
      console.log('推送id获取失败:', err)
    },
  })
  
  //离线推送-点击信息
  plus.push.addEventListener(
    'click',
    async function (msg) {
      setTimeout(function () {
        uni.navigateTo({
          url: `/${msg.payload['path']}`,
        })
      }, 1000)
      plus.push.clear()
    },
    false
  )
  // 在线推送-接收信息
  plus.push.addEventListener(
    'receive',
    function (msg) {
    //ios平台需要多一层判断,且拿取方式不同
      var platform = uni.getSystemInfoSync().platform
      if (platform == 'ios') {
        if (msg.type == 'receive') {
          // 这里判断触发的来源,否则一直推送。
          let options = { cover: false, title: msg.payload.title }
          plus.push.createMessage(msg.content, msg.payload.path, options)
        }
      } else if (platform == 'android') {
        let option = { cover: false, title: msg.title }
        plus.push.createMessage(msg.content, msg.payload.path, option)
      }
    },
    false
  )

  // 在线推送-点击信息
  uni.onPushMessage(async (res) => {
    let data = res.data.payload
    if (res.type === 'click') {
      setTimeout(function () {
        uni.navigateTo({
          url: `/${data}`,
        })
      }, 1000)
      plus.push.clear()
      plus.runtime.setBadgeNumber(0) //清除图标右上角数字
    }
  })
  // #endif

5、真机测试

有两种测试方法:

  1. 是后端在APIPOST中弄一个接口,点击发送
  2. 在开发者平台->unipush->消息推广->创建推送->透传消息
    测试小米手机一定要填写定时推送
    Android配置里面,initende的填写方式是(以下全部复制哦,然后再对提示修改):

intent:#Intent;action=android.intent.action.oppopush;launchFlags=0x14000000;component=安卓包名/io.dcloud.PandoraEntry;S.UP-OL-SU=true;S.title=测试标题;S.content=测试内容;S.payload=test;end

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

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

相关文章

项目中常见的几种策略模式实现方式

前言 本篇文章主要介绍本人在自己项目中和开源项目中策略模式的实现方式 基于spring实现策略模式 最近在使用nacos-sync同步工具时发现其使用了策略模式,下面主要介绍它是如何使用的 实现步骤 2.1 定义接口:SyncService public interface SyncService …

交叉导轨具体应用在哪些领域?

交叉导轨通过采用缩短了滚柱体的间距的R型滚柱保持器这种独特的滚柱保持机制,使滚柱体的有效接触长度增大,且交叉导轨的安装高度更低,由于是两付导轨平行安装组合成为一套,使得交叉导轨的机台整体性要好于直线导轨,倾覆…

5 分钟教你如何免费用上 GPT-4

今天要分享的就是普通用户,没有 OpenAI 账号,不需要写代码,你依然可以免费体验 GPT-4,当然,会有一些缺点,本篇文章将会手把手教你怎么用上免费版的 GPT-4 以及它的一些限制。 第一步:打开 Stea…

嵌入式软考备考_5 嵌入式程序设计

嵌入式程序设计 开发流程 要想某个功能要用硬件还是软件实现(硬件快,但是耗资源)?BSP?裸机还是OS? 硬件的设计与实现-》设备驱动软件的设计与实现-》os的选择,移植,api接口函数的…

人工智能(Pytorch)搭建模型5-注意力机制模型的构建与GRU模型融合应用

大家好,我是微学AI,今天给大家介绍一下人工智能(Pytorch)搭建模型5-注意力机制模型的构建与GRU模型融合应用。注意力机制是一种神经网络模型,在序列到序列的任务中,可以帮助解决输入序列较长时难以获取全局信息的问题。该模型通过…

工具收集 - 键鼠模拟改建

工具收集 - 键鼠模拟&改建 AutoTinyFreeMouseClickerX-Mouse Button Control AutoTiny 官网:https://autotiny.cn AutoTiny软件是一款PC电脑端使用的自动化录制制作软件,不仅能够实现电脑自动化操作,而且可以控制手机实现自动化操作。 A…

uniApp 实现上传功能(七牛云,node获取上传token)

版本:uniAppvue2uview-ui 需求:利用uView_upload组件实现上传功能 难点:兼容性强,支持pc、App、h5; 1.使用leancloud 实现上传(兼容性弱) JS-SDK 只兼容pc、h5,运行到虚拟机上会报错——uniApp问答详情&am…

深度挖掘.c到.exe的整个过程,透过现象看本质

文章目录 程序的翻译环境和执行环境翻译环境编译预编译头文件的包含删除注释替换#define定义的符号 编译词法分析语法分析语义分析符号汇总 汇编 链接合并段表符号表的合并和重定位 执行环境 程序的翻译环境和执行环境 在ANSI C的任何一种实现中,存在两个不同的环境…

【Jenkins】使用java -jar jenkins.war --httpPort=XXXX启动Jenkins报错【解决方案】

使用java -jar jenkins.war --httpPortXXXX启动Jenkins报错【解决方案】 👉欢迎关注博主【米码收割机】 👉一起学习C、Python主流编程语言。 👉机器人、人工智能等相关领域开发技术。 👉主流开发、测试技能。 文章目录 使用java -…

学习分享|一文搞懂WiFi 6/7 以及选择路由器改造网络那些事

目录 什么是 WiFi 6 WiFi 6 功能特点 WIFI 6 与前几代对比 速度更快 延时更低 容量更大 更安全 更省电 WiFi 4~WiFi 6对比 WiFi 6 核心技术 WiFi 7 WiFi 世代列表 路由器常用技术扩展 2.5Ge 网口 WAN/LAN口复用/网口盲插 双WAN口 双LAN口端口聚合 mesh组网 聊…

实验四 文件系统原理与模拟实现

实验四 文件系统原理与模拟实现 代码资源地址 Java实现的混合索引和成组链接法算法资源-CSDN文库 实验目的: 了解操作系统中文件系统的结构和管理过程,掌握经典的算法:混合索引与成组链接法等方法。 实验内容: 编程模拟实现混合…

【Android取证篇】ADB版本更新详细步骤

【Android取证篇】ADB版本更新详细步骤 更新ADB版本,解决无法连接设备问题【蘇小沐】 ADB没有自动更新的命令,我们需要下载新的ADB进行替换更新。 1、ADB查找 打开任务管理器(快捷键shiftctrlEsc或WinX),在“详细信…

Arcgis通过矢量建筑面找到POI对应的标准地址

背景 有时候我们需要找到POI对应的标准地址,也许有很多的方法, 比如通过POI的地址数据和标准地址做匹配,用sql语句就能实现; 但是POI数据中也存在很多没有地址数据的,这时候只能通过空间关联来匹配对应的标准地址了,而空间关联也有不一样的方法,一个是通过空间连接,找…

数智化转型再加速,低代码开发助力企业转型

毫无疑问,随着数智化转型的加速,越来越多的企业正在把数智化战略提升到一个全新的高度,转型的进程也正从“浅层次”的数智化走向“深层次”数智化的阶段。 据权威机构数据统计,过去几年全球数字经济同比增长15.6%,采取…

DJ5-5/6 与设备无关的 I/O 软件、用户层的 I/O 软件

目录 5.5 与设备无关的 I/O 软件 5.5.1 与设备无关软件的概念 5.5.2 与设备无关的软件的功能 5.5.3 设备分配 5.5.4 逻辑设备名到物理设备名映射的实现 5.6 用户层的 I/O 软件 5.6.1 系统调用与库函数 5.6.2 假脱机技术 SPOOLing 5.5 与设备无关的 I/O 软件 …

鲲鹏昇腾开发者峰会2023举办

[2023年5月6日 广东东莞]今天,以“创未来 享非凡”为主题的鲲鹏昇腾开发者峰会2023在东莞松山湖举办。 鲲鹏产业生态繁荣,稳步发展,正在成为行业核心场景及科研领域首选,加速推动数字化转型;昇腾产业快速蓬勃向上&…

【大数据之Hadoop】二十五、生产调优-HDFS核心参数

1 NameNode内存生产配置 Hadoop3.x系列的NameNode内存是动态分配的,可以用jmap -heap 进程号 查看分配的内存。 在hadoop102中NameNode和DataNode的内存都是自动分配的,且相等。 根据经验: NameNode最小值为1G,每增加1百万个物理…

【JavaEE初阶】多线程带来的风险~线程安全

目录 🌟观察线程不安全的现象 🌟线程不安全的原因 🌈1、多个线程修改了同一个共享变量 🌈2、线程是抢占式执行的,CPU的调度是随机的 🌈3、指令执行时没有保证原子性 🌈4、多线程环境中内…

当无触控板和鼠标的情况下,如何开启触控板

背景:一次出行匆忙,忘记带鼠标,周围也无可用工具,主要是触控板当时也被我关闭了,下面讲述一下我是如何解决在没有鼠标的情况下开启触控板的。 首先我们开启电脑后, 存在两种思路去开启触控板 第一种方案…

加拿大访问学者签证材料清单

加拿大在教育、政府透明度、社会自由度以及生活品质等方面在国际上排名名列前茅,出于环境、社会氛围等因素,不少学者将目光聚焦于这个北美的发达国家。加拿大的访问学者签证属于工作签证,过去只要有邀请函就可以办理,但是自去年2月…