做小程序开发，第一个绕不开的坎儿就是底部导航栏。打开微信里任何一个成熟的小程序，你都能看到那一条稳稳当当的tabbar——首页、分类、购物车、我的，四个格子排得整整齐齐。可等到自己动手写代码的时候，才发现这玩意儿远没有看上去那么简单。官方文档翻来覆去看了三遍，自定义配置了半天，一编译，要么图标不显示，要么页面跳转直接报错。更头疼的是，你想要的圆角凸起按钮、中间大号发布键、动态红点提醒，原生tabbar压根不支持。这篇文章就从一个实际开发者的角度，把微信小程序tabbar从配置到定制，每个坑都给你趟一遍。

先说原生tabbar的基本配置。在app.json里加一个tabBar字段，list数组里放2到5个对象，每个对象必须有pagePath和text两个属性。iconPath和selectedIconPath是可选的，但注意图片大小不能超过40kb，推荐81px*81px的png格式。很多人第一次配置失败，十有八九是图标路径写错了——不是相对路径的问题，而是图片格式不支持。微信要求图标必须是png，jpg直接不认。还有个小细节，list数组的顺序就是tabbar显示的顺序，不能乱排。如果你只需要两个tab，那没问题；要是三个以上，每个页面都得在list里注册，漏一个页面，编译直接报错。

但原生tabbar的局限性很快就暴露了。你没法改它的高度，没法调整字体大小，更别提给某个tab加个角标或者小红点。这时候就得考虑自定义tabbar了。官方给了一个方案：在app.json里设置"custom": true，然后在小程序根目录下新建custom-tab-bar文件夹，里面放上index.js、index.json、index.wxml、index.wxss四个文件。这个方案的本质是，你用自定义组件覆盖掉系统默认的tabbar渲染逻辑。但这里有个关键点——自定义tabbar的页面必须用cover-view或者cover-image来写，不能用普通的view。因为tabbar是原生组件，普通view盖不住它。我用这个方案踩过坑，一开始用view写了半天，结果tabbar底下露出一条白边，怎么调都消不掉，换成cover-view才解决。

自定义tabbar的组件代码不算复杂，但有几个细节值得注意。首先是选中态的管理，你需要在每个页面的onShow里手动更新selected值，不然切换tab后高亮不会跟着变。其次是跳转逻辑，点击tab时用wx.switchTab来切换页面，但前提是这些页面必须在app.json的tabBar.list里注册过。如果你某个tab对应的页面不想让它出现在tabbar列表里，那得用wx.reLaunch或者wx.redirectTo，但这样切换动画就会生硬很多，体验上差一截。还有一个容易忽略的点，自定义tabbar组件里如果用了图片，一定要用绝对路径，相对路径在部分机型上会加载不出来。

接下来是中间凸起按钮的玩法。很多人做外卖、直播类小程序，喜欢在tabbar中间放一个大号按钮，比如“发布”或者“扫码”。这个用原生tabbar是完全做不到的，但自定义tabbar就轻松了。实现思路很简单：在自定义tabbar的wxml里，把中间那个tab单独写成一个凸起的view，给它加个margin-top负值，让按钮高出一截。不过这里有个性能陷阱，cover-view不支持圆角属性，你得用cover-image配合背景图来实现圆角效果。还有一点，凸起按钮的点击区域会比视觉区域大一圈，你得用padding来调整点击热区，不然用户点偏了没反应，体验会很糟糕。

动态红点和角标也是高频需求。比如购物车页面有新增商品，底部tabbar的图标右上角要弹个小红点；或者消息页面有未读消息，要显示数字角标。原生tabbar的setTabBarBadge只能显示数字，不能显示红点，而且数字只能显示三位数，超过99就显示成“99+”。自定义tabbar就没这个限制，你可以在组件里用wx.getStorageSync去读全局状态，然后在wxml里用条件渲染来控制红点的显示和隐藏。我建议把红点状态放在全局变量里管理，不然每个页面在onShow里都要手动刷新，代码会变得很啰嗦。

还有一个进阶技巧，就是按需动态修改tabbar的样式。有些小程序会在用户登录后，把“我的”改成“个人中心”，或者把“分类”改成“订单”。这个用原生tabbar只能通过setTabBarItem来改文字和图标，但改不了样式。自定义tabbar就能直接改数据源，在组件里监听一个全局事件，事件触发后重新setData，tabbar就会重新渲染。不过要提醒一句，动态修改tabbar的前提是页面跳转逻辑不能乱，最好在修改时同步更新当前选中态，不然用户切过去发现高亮错位，会以为小程序出bug了。

说说性能优化和兼容性。自定义tabbar组件在每个页面都会渲染一遍，如果组件里写了很多复杂逻辑，页面切来切去会明显感觉卡顿。我的建议是，tabbar组件里只放纯展示和简单跳转逻辑，所有数据都存在全局变量里，不要在组件内部做网络请求。另外，iOS和Android在cover-view的渲染上有些差异，iOS的cover-view层级更稳定，Android在某些低端机上会出现闪烁问题。遇到这种情况，可以试试给cover-view加一个透明的背景色来强制触发重绘。还有，自定义tabbar的页面建议用LazyCodeLoading模式，就是在app.json里开启lazyCodeLoading: "requiredComponents"，这样tabbar组件的代码可以按需加载，首屏速度能快不少。

写到这里，回头看整个定制流程，你会发现微信小程序tabbar的定制其实是个性价比很高的投入。原生配置十分钟搞定，但只能满足最基础的需求；自定义tabbar虽然要写不少代码，但换来的是完全可控的交互体验和视觉表现。从配置原生tabbar到自定义组件，再到凸起按钮、动态角标、按需修改样式，每一步都是在跟微信的框架规则博弈。但正是这些博弈，让小程序不再是千篇一律的模板产品。你花在tabbar上的每一分钟，都在让用户的手指停留得更自然，让产品的品牌调性更鲜明。下次再有人说小程序开发没技术含量，你就把tabbar定制的代码甩给他看看。