wx.setTabBarBadge 在非 tabbar 页面上更新无效问题

前言

在使用 uni-app 开发商城项目时，购物车中的数量需要在购物车 tabbar 上以角标的形式展示。在购物车或其他 tabbar 页面上时更新商品数量，tabbar 购物车上角标也会更新。

但是当进入商品详情页面时，它不属于 tabbar 页面。当在商品详情中向购物车增加或减少数量时，购物车对应商品数量会实时更新，同时也使用 wx.setTabBarBadge 设置 tabbar 上对应的角标。但是从商品详情返回到 tabbar 页面时，角标并没有更新。

所以在查看官方文档相应的问题时，官方建议使用缓存。可以将购物车的有效数量通过 vuex 的 getters 进行实时计算。

在每一个 tabbar 页面时都使用 onShow 钩子来将最新的购物车数量更新到 tabbar 角标。

比如 tabbar 页面有: 首页、分类、推荐、购物车、用户 等5个。所以需要提供一个公用的函数。

为什么要提供一个公用的函数呢? 开始想使用混入(mixins)，但是 onShow 在混入中无效。

tabBarBadgeSync.js 文件如下:

// fix https://developers.weixin.qq.com/community/develop/doc/000828df8808d05e1df69cf5c5bc00
export default function tabBarBadgeSync() {
  const cartCount = this.$store.getters["cart/cartCount"];
  const isLogined = this.$store.state.user.isLogin;

  if (isLogined) {
    if (cartCount < 1) {
      return uni.removeTabBarBadge({
        index: 2,
      });
    }
    uni.setTabBarBadge({
      index: 2,
      text: cartCount + "",
    });
  }
}

只要在每个 tabbar 页面引入。

import tabBarBadgeSync from @/xxx/common/tabBarBadgeSync";

export default {
	onShow() {
		tabBarBadgeSync.call(this)
	}
}

不同项目中的场景可能不一致。

总结

• wx.setTabBarBadge 在非 tabbar 页面上更新无效使用缓存
• 在每一个 tabbar 页面的 onShow 方法中更新为最新