uni-app app.vue页面调用setTabBarBadge失效

uni-app app.vue页面调用setTabBarBadge失效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：2.7.14
手机系统：Android
手机系统版本号：Android 10
手机厂商：OPPO
手机机型：findx
页面类型：vue
打包方式：云端

操作步骤：

onLaunch: function() { uni.setTabBarBadge({ index:0, text:‘15’ }) }


预期结果：

第一个tab角标显示15

实际结果：

自定义基座中第一个tab显示15。正式发布包中第一个tab未显示15


bug描述：

①在自定义基座中，app.vue页面onlunch向tab设置角标,调用uni.setTabBarBadge 角标可以正常显示（在非tab页与tab目标页都可以）。
②发布正式包后，app.vue调用uni.setTabBarBadge设置角标不显示。在tab目标页面调用uni.setTabBarBadge可以设置角标.
角标数字，都有一个网络的请求过程，数据都是获取成功。
底部有5个tab。目的是向第一个tab添加角标

更多关于uni-app app.vue页面调用setTabBarBadge失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

onLaunch 时 tabbar 还未加载，setTabBarBadge 需要在 tabbar 渲染后才能使用，其他操作 tabbar 的 API 亦如是，想一想你怎么往一个不存在的东西加东西呢

更多关于uni-app app.vue页面调用setTabBarBadge失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


正式打包后，打开应用使tab页完全显示，回到手机桌面（未关闭应用）。在打开应用，此时APP.vue的onshow里面，主动设置setTabBarBadge，角标数量也不会发生变化

这是一个关于uni-app中setTabBarBadge在正式包失效的常见问题。根据描述，问题主要出现在正式包中app.vue的onLaunch调用setTabBarBadge失效，而在自定义基座中可以正常工作。

原因分析：

  1. 正式包运行时，app.vue的onLaunch执行时，tabBar可能还未初始化完成
  2. 正式包的运行环境与自定义基座存在差异，导致API调用时机不同

解决方案：

  1. 将setTabBarBadge调用延迟到页面生命周期中，如首页的onLoad或onShow
  2. 使用setTimeout延迟执行：
onLaunch: function() {
  setTimeout(() => {
    uni.setTabBarBadge({
      index:0,
      text:'15'
    })
  }, 500)
}
回到顶部