微信小程序给底部tabBar图标添加角标

前言

在一般的商城类app或者小程序，一般购物车菜单都会有右上角角标。今天我这里在微信小程序上进行实现。

思路

查看微信小程序官方文档：

实现

 let cartNum = ; //通过后台接口获取 if (cartNum.length != 0) { //设置角标 wx.setTabBarBadge({ index: 2, //tabBar序号，从0开始计数 text: cartNum.toString() }) } else { //移除角标 wx.removeTabBarBadge({ index: 2, }) } 

问题 ：setTabBarBadge:fail not TabBar page？

我们在非tabbar的页面上使用这部分代码，会报错，这是官方设计上的缺陷(个人认为)。
但是我们一把会在其他页面添加商品到购物车中，这样就会导致重新进入购物车页面，角标不能正确实时展示。
我这边解决这个问题的思路就是，在每个tabbar页面的onshow() 生命周期函数中进行设定。这样才能达到实时正确显示角标数据。