uni-app uni.setTabBarBadge出错

uni-app uni.setTabBarBadge出错

示例代码：

uni.removeTabBarBadge({  
    index: 2  
})

操作步骤：

uni.removeTabBarBadge({  
    index: 2  
})

预期结果：

执行不出错

实际结果：

{"errMsg":"setTabBarBadge:fail not TabBar page"}

bug描述：

如果在tabber中使用uni.setTabBarBadge和uni.removeTabBarBadge都没有问题，但是要是进入到某张页面中，就会出错{"errMsg":"setTabBarBadge:fail not TabBar page"}。

感觉有点非人类了，我不能保证对用户发通知的时候，用户都会在tabber这几个页面当中。所以麻烦看看是那出了问题。


| 项目属性         | 值                  |
|------------------|---------------------|
| 产品分类         | uniapp/小程序/微信  |
| PC开发环境       | Windows             |
| PC开发环境版本   | win11家庭中文       |
| HBuilderX类型    | 正式                |
| HBuilderX版本    | 4.64                |
| 第三方开发者工具 | 2412050             |
| 基础库版本       | 3.7.11              |
| 项目创建方式     | HBuilderX           |

更多关于uni-app uni.setTabBarBadge出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这个api uniapp没有做特殊处理，直接调用的原生小程序api，你可以试试原生小程序是不是也有同样的问题

更多关于uni-app uni.setTabBarBadge出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我测试了，直接使用wx.setTabBarBadge({ index: 2, text })不会报错，但是没有效果。流程跑的都是一样，只是把uni替换成了wx

这个错误是因为在非tabBar页面调用了tabBar相关的API。uni-app的设计机制是，tabBar操作只能在tabBar页面内执行。

解决方案：

  1. 检查当前页面是否是tabBar页面（通过pages.json配置判断）
  2. 如果是非tabBar页面需要操作tabBar，建议：
    • 通过全局状态管理（如vuex）记录需要设置的badge信息
    • 在App.vue的onShow生命周期或tabBar页面的onShow中执行实际API调用

代码示例：

// 在store中管理状态
const store = new Vuex.Store({
  state: {
    tabBarBadges: {}
  }
})

// 在任何页面设置
store.commit('setTabBarBadge', {index: 2, text: '1'})

// 在tabBar页面onShow中执行
uni.setTabBarBadge(store.state.tabBarBadges[2])
回到顶部