做微信小程序开发时，产品经理拿着设计稿过来说：底部tabbar上的购物车角标要做成方形的，数字是四位数时要自动缩小字号。遇到这种需求，很多人第一反应是用wx.setTabBarBadge，结果发现原生徽标固定是小圆点或红色胶囊样式，圆角、边框、字号全都改不了。这时候就需要走自定义tabbar的路线，把徽标完全交给自己的代码来控制。本文把方形徽标和圆角形徽标两种最常见的样式实现完整讲一遍，包括配置步骤、组件代码和多页面同步的处理。
一、为什么要用自定义tabbar来实现徽标
先说清楚原生方案的边界在哪。微信小程序在app.json里配置tabBar后，可以通过wx.setTabBarBadge给某个tab设置数字角标，也可以用wx.showTabBarRedDot显示小红点。这两个接口用起来简单，但样式是完全锁死的：颜色固定为红色系，形状固定，数字超过一定位数会显示成省略形式，开发者没有任何CSS可以介入的入口。
而一旦设计稿对徽标有定制要求，比如方形背景、带描边、特定圆角大小、或者需要在徽标里显示文字而不是数字，原生接口就无能为力了。微信官方给出的解决路径是custom-tab-bar，也就是在项目根目录新建一个名为custom-tab-bar的目录，微信会自动把它识别为自定义tabbar组件，渲染在每一个tab页的底部。这样整个tabbar的结构、样式、交互逻辑都由开发者自己写，徽标自然想怎么画就怎么画。
需要注意的一点是，启用自定义tabbar后，app.json里的list配置仍然要保留，因为页面跳转和tab的判定还是依赖这份配置，只是视觉层面不再使用原生的tabbar渲染。下面所有代码都基于custom-tab-bar方案展开。
二、自定义tabbar的基础搭建
目录结构很简单，在项目根目录下创建custom-tab-bar文件夹，里面放index.js、index.json、index.wxml、index.wxss四个文件。index.json里声明这是一个组件：
{
"component": true
}index.wxml里用view循环渲染各个tab，每个tab上叠加一个徽标节点：
<view class="tab-bar">
<block wx:for="{{list}}" wx:key="index">
<view class="tab-item" data-path="{{item.path}}" data-index="{{index}}" bindtap="switchTab">
<view class="tab-icon-wrap">
<image class="tab-icon" src="{{selected === index ? item.selectedIcon : item.icon}}"/>
<view wx:if="{{item.badge > 0}}" class="badge badge-{{item.badgeType || 'round'}}">
{{item.badge > 99 ? '99+' : item.badge}}
</view>
<view wx:elif="{{item.showDot}}" class="red-dot"></view>
</view>
<view class="tab-text {{selected === index ? 'active' : ''}}">{{item.text}}</view>
</view>
</block>
</view>index.js中维护tab列表数据和当前选中项，同时暴露一个更新徽标的方法：
Component({
data: {
selected: 0,
list: [
{ path: '/pages/index/index', text: '首页', icon: '/images/home.png', selectedIcon: '/images/home-active.png', badge: 0, badgeType: 'round' },
{ path: '/pages/cart/cart', text: '购物车', icon: '/images/cart.png', selectedIcon: '/images/cart-active.png', badge: 2, badgeType: 'square' },
{ path: '/pages/mine/mine', text: '我的', icon: '/images/mine.png', selectedIcon: '/images/mine-active.png', showDot: true }
]
},
methods: {
switchTab(e) {
const path = e.currentTarget.dataset.path;
const index = e.currentTarget.dataset.index;
wx.switchTab({ url: path });
this.setData({ selected: index });
},
// 供页面调用，更新某个tab的徽标数字
updateBadge(index, count) {
this.setData({ ['list[' + index + '].badge']: count });
}
}
});结构上徽标用绝对定位挂在图标右上角，超过99显示99+，也可以根据业务需要调整上限。showDot用于纯红点场景，和数字徽标互斥。
三、方形徽标与圆角形徽标的样式代码
重点来了。方形徽标的特点是不加圆角或者只有很小的圆角，配合等宽设计；圆角形徽标则是常见的胶囊形，圆角设为高度的一半即可。两种样式在wxss中的写法如下：
.tab-bar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: #ffffff;
border-top: 1rpx solid #e5e5e5;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab-icon-wrap {
position: relative;
width: 48rpx;
height: 48rpx;
}
.tab-icon {
width: 48rpx;
height: 48rpx;
}
/* 方形徽标：无圆角或极小圆角，数字居中 */
.badge-square {
position: absolute;
top: -10rpx;
right: -18rpx;
min-width: 30rpx;
height: 30rpx;
padding: 0 6rpx;
box-sizing: border-box;
background: #ff4d4f;
color: #ffffff;
font-size: 20rpx;
line-height: 30rpx;
text-align: center;
border-radius: 4rpx; /* 接近直角，保留一点柔和感 */
border: 2rpx solid #ffffff;
}
/* 圆角形徽标：胶囊形，圆角为高度的一半 */
.badge-round {
position: absolute;
top: -10rpx;
right: -18rpx;
min-width: 32rpx;
height: 32rpx;
padding: 0 10rpx;
box-sizing: border-box;
background: #ff4d4f;
color: #ffffff;
font-size: 20rpx;
line-height: 32rpx;
text-align: center;
border-radius: 16rpx; /* 高度的一半，形成胶囊 */
border: 2rpx solid #ffffff;
}
/* 纯红点 */
.red-dot {
position: absolute;
top: -4rpx;
right: -4rpx;
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background: #ff4d4f;
}两种徽标的核心差异只在两处：一是border-radius，方形用4rpx以内的小圆角或者直接不写，圆角形必须写为高度的一半（32rpx的一半是16rpx），这样无论数字位数怎么变化，胶囊形状都不会变形；二是padding，方形徽标内边距可以小一些显得紧凑，圆角形适当加大让数字离弧线远一点更美观。
白色描边（border: 2rpx solid #ffffff）是一个实用的小技巧，当徽标压在图标或者tabbar顶部分割线上时，白色描边能把红色块和背景隔开，视觉上更清爽，和iOS原生应用角标的处理方式一致。
如果数字经常出现四位数，还可以加一条自适应字号的处理，超过三位数时把字号缩小，避免撑破容器：
.badge-num-large {
font-size: 16rpx;
transform: scale(0.9);
transform-origin: center;
}在wxml中给徽标节点追加一个判断类名即可：class="badge {{item.badgeType}} {{item.badge > 999 ? 'badge-num-large' : ''}}"，这样长数字也能优雅地显示在徽标里。
四、多页面徽标状态同步的注意事项
自定义tabbar有一个公认的坑：每个tab页都会实例化一份自己的custom-tab-bar组件实例，页面切换后选中态和徽标数字可能不同步。解决办法是在每个tab页的onShow里重新获取组件实例并刷新状态：
// 页面文件中，例如 pages/cart/cart.js
onShow() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
const tabBar = this.getTabBar();
tabBar.setData({
selected: 1, // 当前页在list中的下标
'list[1].badge': getApp().globalData.cartCount
});
}
}更好的做法是把徽标数据收敛到全局，比如globalData或者一个状态管理库，所有页面对徽标的增删改都操作全局数据，然后统一调用组件的updateBadge方法刷新视图。这样无论用户从哪个入口改变数据，回到tab页时徽标都能拿到最新状态。
另外提醒一点，使用了custom-tab-bar之后，就不要再调用wx.setTabBarBadge这类原生接口了，否则可能出现原生徽标和自定义徽标叠加显示的怪异效果。所有徽标逻辑都走自己的组件即可。
总结一下，方形徽标和圆角形徽标的区别本质上就是border-radius和padding的取值差异，真正的工作量在于搭建custom-tab-bar组件骨架和处理多页面状态同步。把上面的代码组合起来，基本能覆盖设计稿上绝大多数角标需求，后续要扩展渐变色徽标、带图标徽标，也只需要在这个结构上继续加样式就行。