uni.setTabBarBadge不生效主因是调用时机不当（需onShow后延迟执行）、平台限制（微信小程序仅支持tabBar页面、custom:true时无效）、参数错误（text必须为非空字符串）及真机权限/配置缺失（如iOS未开启badge权限或manifest未勾选）。
uni.setTabBarBadge 不生效？先看调用时机和平台限制
很多开发者一上来就写 uni.setTabBarBadge({ index: 2, text: '9' })，结果在真机上没反应——不是代码错，是时机不对。原生 TABBAR 的角标渲染依赖底层平台（微信、支付宝、App）的 UI 初始化完成，而 onLoad 或 onShow 早期执行时，TABBAR 可能还没挂载好。
- ✅ 推荐做法：在
onShow里加一层setTimeout延迟 100ms 再调用，或监听uni.getSystemInfo回调后再设角标 - ⚠️ 注意：
text必须是字符串，传数字如9会静默失败（iOS 尤其敏感） - ❌ 微信小程序中，若 TABBAR 是通过
custom: true自定义的，则uni.setTabBarBadge完全无效，必须自己画红点 - ? 安卓 App 端需额外处理厂商适配（华为、小米等），
setTabBarBadge仅控制底部导航栏，不控制桌面图标角标
自定义新消息气泡（如微博右上角小红点）怎么画才不穿帮
原生 TABBAR 角标位置、大小、圆角、偏移量各平台不一致，iOS 上常右偏 2px、安卓上又可能遮住图标边缘。要真正“像微博”，得放弃 uni.setTabBarBadge，改用绝对定位 + uni-badge 或纯 view 模拟。
- ✅ 推荐结构：在 tabbar 对应 icon 的父容器内，用
position: absolute; top: 4px; right: 6px;放一个9 - ⚠️ 关键细节：给 badge 加
transform: translate(50%, -50%);居中对齐，避免不同字体渲染导致偏移 - ❌ 别用
uni-badge的isDot模式直接套在 tabbar 上——它无法响应 tabBar 的 active 状态变化，切换 tab 时容易残留 - ⚡ 性能提醒：气泡显示逻辑建议绑定到 Vuex/Pinia 的未读数状态，而非每次
onShow都查一遍接口
加个入场动画？别碰 CSS 动画，用 animation API 更稳
想让气泡“弹出来”，第一反应是加 transition: all .2s，但实际在多端运行时，H5 上正常，小程序里常卡顿或不触发。原因是 CSS 动画受小程序 WebView 渲染机制限制，且无法精确控制起始态。
- ✅ 正确姿势：用
uni.createAnimation创建实例，初始设scale(0)，再step()→scale(1.2)→step()→scale(1) - ⚠️ 注意：动画对象必须赋给 data 中的变量，再绑定到组件的
animation属性；不能直接操作 style - ❌ 避免在
v-for循环里为每个气泡都新建 animation 实例——内存泄漏风险高，统一用 class 控制显隐 + 单个动画实例复用 - ? 真机测试发现：iOS 微信 8.0.44+ 对
animation的 transform 支持良好，但低版本支付宝小程序仍建议降级为 opacity 渐显
红点清零逻辑写在哪？别只盯着点击事件
用户点进“消息”页，你清了本地未读数，但角标还在——因为清除动作没同步到底层。更麻烦的是，用户从后台切回来时，角标状态可能已过期。
- ✅ 清零入口不止一处：除了消息页的
@click，还要在onShow里检查当前页面是否为消息页，并调用uni.removeTabBarBadge({ index: 2 }) - ⚠️ 特别注意：App 端若用了极光推送，服务端清角标后，客户端需监听
push:receive事件并主动同步，否则本地和服务器状态不一致 - ❌ 别在
onHide里清角标——用户只是切到其他应用，还没读消息，清了就漏提示 - ? 容易被忽略的一点：iOS 的原生角标有缓存机制，调用
removeTabBarBadge后，有时需再调一次showTabBarRedDot再hideTabBarRedDot才能彻底刷新
事情说清了就结束
