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

这篇具有很好参考价值的文章主要介绍了前端基于uniapp[uniPush]实现APP消息推送(安卓、IOS)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

app消息推送流程

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

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

坑点

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

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

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

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

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

  • 账号共同的问题

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

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

需要配置推送时间

  • 华为离线时,收不到消息推送,若厂商信息确认配置无误,那么检测以下两个地方

1、查看开发者中心 - uniPush - 应用信息,点击 [包名再“应用详情“中”各平台信息“管理,点击前往],然后选择你的应用进行修改,一定要认真核对 Android 应用签名SHA256 是否填写正确
2、华为推送信息乱写的时候,是可能不被推送的,可以按照以下格式发送排查下:
title:订单提醒
body:您的外卖订单已接单,请耐心等候

  • 官方排错文档

如果以上都不能帮助到你,那么再查看这两个文档进行排查:厂商限额和提醒方式说明、uni-push2.0 常见问题,如果都不行的话,只能添加unipush的客服咨询啦

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

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

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

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

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

前端基于uniapp[uniPush]实现APP消息推送(安卓、IOS)
上传图片注意事项和格式,看文档

3、更新自定义基座

在 发行->原生APP-云打包,点击打自定义调试基座。这一步,务必保证你前面的配置都好了,尤其是oppo的。

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

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

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

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

5、在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

6、真机测试

有两种测试方法:

  1. 后端在apipost中弄一个接口,点击发送
  2. 在开发者平台->unipush->消息推广->创建推送->透传消息
    注意:
    1、测试小米手机一定要填写定时推送
    2、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

帮到你的话,就点个赞再走吧~文章来源地址https://www.toymoban.com/news/detail-488629.html

到了这里,关于前端基于uniapp[uniPush]实现APP消息推送(安卓、IOS)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp通过websocket实现手机APP通知栏消息显示功能(前端部分)

     开门见山地说,在移动应用端,从后端及时获取消息,展示到手机消息通知栏上面来与用户进行交互是一个很高频的应用场景,这篇文章就来介绍一下,在uniapp开发中如何实现这种需求。  要实现这个需求,对于前端来说主要技术需要拆分成两部分:一是从后端及时获取消

    2024年03月18日
    浏览(95)
  • uniapp iOS 消息推送扩展:后台/杀死app进程状态能语音播报

    HBuilderX3.1.5+ 版本uni原生插件支持iOS Extension(扩展)。 消息推送离线语音播报插件获取方式: 公z号:iOS逆向: 离线包x10, 源码是x15。 实现原理: 获取GroupIdentifier,用于保存本地拼接音频。 将音频文件写到AppGroups的Library/Sounds文件夹下,最后更改UNNotificationSound属性即可使通

    2024年02月14日
    浏览(37)
  • unipush2.0实现离线推送(华为手机)

    最近在做app消息推送,记录下离线推送接入过程中遇到的问题。详细步骤请参考官网文档:uni-push 2.0 快速接入指南 文档原文中: 1.4.2 校验厂商离线推送是否集成成功 输入上方获取的 cid ,查询到对应的 Device Token 则说明云打包 “离线推送” 成功,同时支持离线推送。 如果

    2024年02月22日
    浏览(31)
  • 聊天室(二)__ unipush 推送实现详细教程

    推送作用我就不废话了,能做推送的都知道作用,直接上干货。   Dcloud 开发者实名认证注册账号,绑定对应的 app 信息。 uni-push产品有2个入口: 通过 HBuilderX(3.5.1及其以上版本)进入 打开 HBuilderX,双击项目中的 “manifest.json” 文件,选择“App 模块配置”,向下找到“Push(消息

    2024年02月12日
    浏览(39)
  • 前端实现消息推送、即时通信、http简介

    服务端主动向客户端推送消息,使客户端能够即时接收到信息。 场景 页面接收到点赞,消息提醒 聊天功能 弹幕功能 实时更新数据功能 短轮询 浏览器(客户端)每隔一段时间向服务器发送http请求,服务器端在收到请求后,不论是否有数据更新,都直接进行响应。 本质:客

    2024年02月09日
    浏览(39)
  • Springboot整合WebSocket实现主动向前端推送消息

            在上篇文章tcp编程中,我们实现了C++客户端与java服务器之间的通信,客户端发送了一个消息给服务器,今天我们要实现基于WebSocket实现服务器主动向前端推送消息,并且以服务器接收到C++客户端的消息主动向前端推送消息的触发条件。 WebSocket 的诞生背景       

    2024年03月16日
    浏览(42)
  • 使用GoEasy快速实现Android原生app中的websocket消息推送

    摘要: GoEasy带来了一项令开发者振奋的消息:全面支持Android原生平台!现在,您可以在Android应用中使用最酷炫的实时通信功能,借助GoEasy轻松实现消息的发送和接收。本文将带您领略GoEasy最新版本的威力,为您的应用增添一抹鲜活的互动色彩。 嗨,开发者朋友们!是时候展

    2024年02月12日
    浏览(45)
  • 前端实现消息推送、即时通信、SSE、WebSocket、http简介

    服务端主动向客户端推送消息,使客户端能够即时接收到信息。 场景 页面接收到点赞,消息提醒 聊天功能 弹幕功能 实时更新数据功能 短轮询 浏览器(客户端)每隔一段时间向服务器发送http请求,服务器端在收到请求后,不论是否有数据更新,都直接进行响应。 本质:客

    2024年02月16日
    浏览(43)
  • SSE实现消息实时推送,前端渐进式学习、实践,真香

    SSE(Server Sent Event),直译为服务器发送事件,顾名思义,也就是客户端可以获取到服务器发送的事件。我们常见的 http 交互方式是客户端发起请求,服务端响应,然后一次请求完毕;但是在 sse 的场景下,客户端发起请求,连接一直保持,服务端有数据就可以返回数据给客户端

    2024年02月21日
    浏览(43)
  • uni-app使用plus本地推送通知栏信息,不使用第三方个推实现消息在线统一推送、消息通知(MQTT、WebSocket、setInterval定时器)

    plus.push.createMessage() 因项目一直是运行在内网,所以不支持使用uni-push等运行在公网的第三方个推渠道。 那就只能使用 plus.push.createMessage() ,示例代码如下: 参数解释: content : ( String 类型) 必选,消息显示的内容,在系统通知中心中显示的文本内容。 payload : ( String 类型 ) 可

    2024年02月15日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包