uni-app 微信小程序tabBar角标或徽标badge不生效 但Android安卓却显示正常

问题描述

今天复习项目时又遇到了一个奇怪的问题:
使用uni-app写tabBar的中购物车右上角的角标时，从商品详情页点击添加到购物车后，商品详情右上角的角标数字会跟随Vuex仓库中的商品总数发生变化，但是主页面也就是tabBar页面中的购物车角标不会变化，或者只有第一次添加会变化，并且这个功能我已经通过混入mixin封装好了，在显示tabBar页面中都已引入。并且离谱的是安卓模拟器上这个效果却正常，并且第一次写该项目时也没遇到这个问题。

问题截图:

1.初始数据购物车数据截图:

2.点击加入购物车后左下角数量发生变化，控制台也打印了仓库中的总数信息:

3.点击"购物车"按钮，tabBar页面的购物车角标第一次修改显示正常

4.重新进入商品详情页，添加商品到购物车，可以看到左下角购物车角标显示正常为76，小程序控制台也同步打印出了Vuex对应的商品总数

5.问题点来了，重新回到tabBar页面的购物车右上角的角标仍然是第一次修改的61，多次尝试编译重新运行，重新打开Hbuilder都无效，并且使用安卓模拟器这个功能确实是正常的，这里为了节省篇幅就不截了。

在混入mixins的中控制tabBar的角标源代码如下:

//封装一个混入混入模块，相当于公共函数
import {mapState} from 'vuex' 
export default {
  computed:{
    ...mapState('m_cart',['totalCartNums'])
  },
  onLoad() {
    this.mySetTabBarBadge()
  },
  methods:{
    mySetTabBarBadge(){
      if(this.totalCartNums <=0 ){
        console.log("<1");
        uni.removeTabBarBadge({
          index:2
        })
      }else if(this.totalCartNums >=100){
        console.log(">99");
        uni.setTabBarBadge({
          index:2,
          text: '99+'
        })
      }else{
        console.log("1-99");
        uni.setTabBarBadge({
          index:2,
          text: this.totalCartNums.toString()
      })
    }
  }
},
  watch:{
    "totalCartNums":function(newVal){
      this.mySetTabBarBadge()
    }
  }
}

tabBar badge显示异常原因分析:

1.在混入里我使用了uni-app自带的uni.setTabBarBadge方法去修改tabBar页面的角标，并在我自定义的mySetTabBarBadge方法根据Vuex中商品总数去分情况展示tabBarBadge的显示样式。

2.为了防止tabBar页面的tabBarBadge不会响应式展示，我使用了watch监听器，一旦Vuex中totalCartNums发生了变化，就调用我自定义的mySetTabBarBadge方法去动态修改角标展示情况。

3.以目前的水平来看逻辑是没有问题的，但是就是出现了角标没有实时更新的情况，非常无奈。

4.后面在翻阅了不少博客后，原文链接如下:uni.setTabBarBadge 在非 tabbar 页面上更新无效问题,并且结合微信开放平台社区中一位网友的回答我解决了该问题，连接如下:wx.setTabBarBadge 在没有tabbar的页面设置了不生效。
简而言之，就是在我本身逻辑没有大的问题外，uni自带的setTabBarBadge方法在非tabBar页面不会自动更新。也就是说当我从非主包的页面，修改影响tabBarBadge展示的值后，调用uni.setTabBarBadge方法是不起作用的。

解决办法

既然非tabBar页面调用uni.setTabBarBadge方法无效，那么我们就在会展示tabBar页面的角标所有页面的onShow方法去调用,也就是修改混入里的onLoad方法为onShow方法

PS:onShow方法在小程序中就是页面一旦展示就会加载运行里面的代码块，这样不管我在什么界面，只要修改了影响tabBarBadge的值，再回到tabBar页面后，都会重新加载onShow方法，调用uni.setTabBarBadge去修改角标的展示，而在tabBar页面调用这个方法是不会出现异常的。

修改后的混入源码如下:

//封装一个混入混入模块，相当于公共函数
import {mapState} from 'vuex' 
export default {
  computed:{
    ...mapState('m_cart',['totalCartNums'])
  },
  //主要就是修改了这里，将onLoad方法修改为了onShow方法
  onShow() {
    this.mySetTabBarBadge()
  },
  methods:{
    mySetTabBarBadge(){
      if(this.totalCartNums <=0 ){
        console.log("<1");
        uni.removeTabBarBadge({
          index:2
        })
      }else if(this.totalCartNums >=100){
        console.log(">99");
        uni.setTabBarBadge({
          index:2,
          text: '99+'
        })
      }else{
        console.log("1-99");
        uni.setTabBarBadge({
          index:2,
          text: this.totalCartNums.toString()
      })
    }
  }
},
  watch:{
    "totalCartNums":function(newVal){
      this.mySetTabBarBadge()
    }
  }
}

运行截图就不再放了，就是商品详情页的购物车角标和tabBar页面的购物车角标会同步展示，符合预期情况。

另外，在第一次写该项目时，应该选的是默认的Vue3模板，在非tabBar页面调用uni.setTabBarBadge方法时，会报错误:Unhandled promise rejection {errMsg: “setTabBarBadge:fail not TabBar page”}。而本次选的Vue2模板，就没有这个错误提示，不过只要在混入里将设置角标的方法都写到onShow方法体中，页面渲染暂时是没问题的。

总结

在使用uni-app的setTabBarBadge方法修改角标时，如果非tabBar页面也会修改影响角标展示的值，那么应该在封装的展示角标的混入里，使用onShow生命周期函数去重新调用一次uni.setTabBarBadge，以避免不同tabBar页面和非tabBar页面切换时角标展示异常的问题。