讲师中心 微信公众号
AI工具推荐 视频效率加速

uni-app怎么实现App端的离线消息推送及指定页面点击跳

云墨姑娘_5496

云墨姑娘_5496

发布时间:2026-06-29 07:34:08

|

521人浏览过

|

来源于php中文网

原创

离线推送点击跳转必须用 plus.push.addEventListener('click', ...),因 onLaunch/onShow 在 iOS 热启动和 Android 全场景均无法获取 payload;iOS 的 msg.payload 是对象,Android 是字符串,需类型判断后解析;跳转前须 setTimeout 延迟并校验路由合法性。

uni-app怎么实现app端的离线消息推送及指定页面点击跳

离线推送点击跳转必须用 plus.push.addEventListener('click', ...),不能只靠 onLaunch 或 onShow 捕获参数 —— 真机上 iOS 热启动、Android 全场景都会丢 payload。

为什么 onLaunch/onShow 拿不到离线点击的跳转参数

uni-app 的 onLaunch 只在冷启动时触发,且 iOS 仅在冷启动时可能带 options.push 字段;Android 完全不透传。App 被杀死后用户点击通知栏消息,系统是通过原生 Intent(Android)或 application:didReceiveRemoteNotification:fetchCompletionHandler:(iOS)把 payload 传进来的,uni-app 默认生命周期钩子根本收不到原始数据。

  • onLaunch 的 options 在 Android 上永远为空,在 iOS 热启动时也为空
  • onShow 不接收任何推送字段,只反映前台切换状态
  • 离线消息的 payload 必须由 plus.push.addEventListener('click', ...) 捕获,这是唯一稳定入口

plus.push.addEventListener('click', ...) 的双端写法差异

iOS 和 Android 的 msg 结构不一致,直接 JSON.parse(msg.payload) 会崩:iOS 的 msg.payload 是对象,Android 是字符串;部分厂商通道(如华为)还额外塞了 msg.intent 或 msg.extra。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • iOS:msg.payload 是服务端下发的 JSON 对象(需服务端配置 content-available=1)
  • Android:msg.payload 是字符串,必须先 JSON.parse();华为/小米等通道可能需从 msg.extra 提取
  • 统一处理建议:
    const payload = msg.payload ? (typeof msg.payload === 'string' ? JSON.parse(msg.payload) : msg.payload) : {};

点击后跳转页面失败的常见原因

在 plus.push 回调里直接调用 uni.navigateTo 大概率白屏或无响应 —— 此时 Vue 实例可能未就绪,uni API 尚未挂载完成。

  • 必须加防抖或延迟:用 setTimeout(() => { uni.navigateTo(...) }, 300) 确保路由系统可用
  • 避免重复跳转:离线点击可能触发多次(尤其厂商通道),建议用 uni.setStorageSync 缓存一次 payload,进入首页后再清空
  • 路由路径必须合法:不能带 .vue 后缀,不能用绝对路径(如 /pages/detail 要写成 pages/detail)
  • 若跳转目标是 tabBar 页面,要用 uni.switchTab,否则报错

App.vue 中监听注册的正确时机和位置

监听器必须在 App 启动最早期挂载,否则事件会丢失。不能放在 mounted 或页面级 onLoad,必须在 App.vue 的 onLaunch 里注册。

  • 推荐写法:
    onLaunch() {
      if (uni.getSystemInfoSync().platform === 'app') {
        plus.push.addEventListener('click', this.handlePushClick, false);
      }
    },
    methods: {
      handlePushClick(msg) {
        const payload = msg.payload ? (typeof msg.payload === 'string' ? JSON.parse(msg.payload) : msg.payload) : {};
        setTimeout(() => {
          uni.navigateTo({ url: `/pages/detail?id=${payload.id}` });
        }, 300);
      }
    }
  • 注意:plus.push API 仅在 APP-PLUS 环境有效,H5 和小程序里要包裹 #ifdef APP-PLUS
  • 云打包前务必确认 DCloud 后台已配置对应厂商(华为/小米等)的离线通道,否则 plus.push 根本收不到 click 事件

离线跳转最易被忽略的点是:没做 payload 类型校验、没处理 Android 字符串解析、没加 setTimeout 延迟跳转 —— 这三处任一缺失,真机上都表现为“点了通知没反应”。

热门AI工具

更多
UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2443

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5243

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6310

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5878

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

843

2024.05.22

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

80

2026.10.10

Kratos框架HTTP与gRPC服务开发教程
Kratos框架HTTP与gRPC服务开发教程

本专题围绕Kratos框架双协议服务开发,涵盖HTTP路由与处理器编写、参数获取、gRPC服务实现与客户端调用、metadata上下文传递、encoding编解码注册、统一响应封装、超时控制与流式响应实现方法。

40

2026.10.10

Kratos框架Protobuf接口定义与代码生成合集
Kratos框架Protobuf接口定义与代码生成合集

本专题讲解Kratos框架接口定义体系,涵盖proto编写规范、proto add/client/server生成命令、http注解路由、validate校验、OpenAPI文档生成、跨服务proto复用与兼容性设计。

20

2026.10.10

C++虚函数怎么定义和调用
C++虚函数怎么定义和调用

C++虚函数是实现运行时多态的重要机制。本专题从virtual关键字的基本用法入手,介绍基类与派生类之间的函数重写、基类指针调用派生类方法,以及动态绑定的执行过程,帮助初学者掌握虚函数的核心语法。

40

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn