1***@qq.com
1***@qq.com
  • 发布:2026-06-12 11:21
  • 更新:2026-06-12 11:22
  • 阅读:17

用的unipush2.0,已经配置好了显示应用角标,应用能显示角标了,但是进入对应的页面之后,再返回到手机桌面,对应的应用角标没有减少

分类:uni-app

用的unipush2.0,已经配置好了显示应用角标,应用能显示角标了,但是进入对应的页面之后,再返回到手机桌面,对应的应用角标没有减少,页面角标是通过websocket获取的,怎么解决这个问题

2026-06-12 11:21 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

针对你遇到的问题:使用 uni-push 2.0 且应用在线时,进入对应页面后返回桌面,角标没有减少,核心原因在于 uni-push 2.0 在线推送与应用离线推送的角标处理逻辑完全不同

1. 原因分析

根据官方反馈,uni-push 2.0 在应用在线时,收到的不是系统级推送通知,而是一条单向的 WebSocket 消息

  • 离线时:推送走的是手机厂商通道(如华为、小米、OPPO等),系统会自动处理角标的增加或减少(具体行为取决于厂商 ROM),你通过 uni-push 后台配置的角标参数会生效。
  • 在线时:应用与服务器建立 WebSocket 长连接,消息直接通过网络下发,绕过了系统通知机制。这意味着,所有交互行为(包括角标增减、是否弹出本地通知、播放铃声等)都需要开发者在前端代码中自行控制

你的角标数据是通过 WebSocket 获取的,这进一步证实了你的应用处于在线状态,因此角标没有自动减少是预期行为,因为你没有在前端代码中手动调用 API 去修改它。

2. 解决方案

你需要在前端 WebSocket 接收到新消息或用户进入对应页面时,主动通过代码管理角标数字。

核心 API:plus.runtime.setBadgeNumber

这个 API 用于设置 iOS 和 Android 平台的应用桌面角标。你需要在适当的时机调用它来更新角标数。

维护角标逻辑

由于没有直接获取当前角标总数的 API,你需要在前端本地维护一个角标计数器。推荐使用 Vuex/Pinia 或 uni.storage 进行持久化存储,防止应用重启后丢失。

示例代码流程:

  1. 维护全局角标计数:在收到在线推送消息时,让计数器 +1,并调用 setBadgeNumber 更新显示。
  2. 进入页面时减少角标:在用户进入对应的消息列表或详情页时,根据已读的消息数量,从计数器里减去相应的值,并再次调用 setBadgeNumber
// 假设你使用 Pinia 或本地存储维护了一个 currentBadgeCount 变量  

// 1. 收到在线推送消息时  
function onReceiveOnlineMessage(msg) {  
    // 你的业务逻辑...  
    let count = getStorageBadgeCount(); // 从本地存储获取当前角标数  
    count++;  
    setStorageBadgeCount(count); // 更新本地存储  

    // 更新桌面角标  
    // #ifdef APP-PLUS  
    plus.runtime.setBadgeNumber(count);  
    // #endif  
}  

// 2. 用户进入消息页面,阅读了消息后  
function onEnterMessagePage(redCount) {  
    let count = getStorageBadgeCount();  
    count -= redCount;  
    if (count < 0) count = 0;  
    setStorageBadgeCount(count);  

    // 更新桌面角标  
    // #ifdef APP-PLUS  
    plus.runtime.setBadgeNumber(count);  
    // #endif  
}  

// 3. 清除所有角标(例如退出登录或阅读所有消息后)  
function clearAllBadge() {  
    setStorageBadgeCount(0);  
    // #ifdef APP-PLUS  
    plus.runtime.setBadgeNumber(0);  
    // 同时清除系统通知栏的消息  
    plus.push.clear();  
    // #endif  
}

本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

3. 平台注意事项

  • 华为:华为角标比较特殊,除了客户端调用 setBadgeNumber 外,也需要服务端在推送离线消息时通过 options 字段正确设置角标 class。如果你希望离线时华为角标也能自动增减,需要确保服务端推送格式正确。相关知识库有提及,可以参考 unipush-v1 客户端处理推送消息中的角标设置
  • 小米:部分小米机型在设置角标时,可能需要同时发送一条本地通知才能生效。如果你遇到兼容性问题,可以考虑使用插件市场的相关插件,如 动态设置应用桌面角标插件,它已经处理了多厂商的兼容性。
  • iOS:iOS 的角标管理相对标准,plus.runtime.setBadgeNumber 可以正常工作。

如果你觉得手动在各厂商机型上做兼容比较繁琐,也可以直接使用插件市场提供的角标管理插件来简化开发。

内容为 AI 生成,仅供参考

要回复问题请先登录注册