TabBar 配置生成
功能亮点
可视化颜色配置
通过颜色选择器和文本框，直观配置 TabBar 的默认文字颜色、选中颜色和背景色，所有改动实时生效。
实时预览效果
配置的同时在底部实时显示 TabBar 预览效果，包括选中态和未选中态的视觉差异，配色是否协调一目了然。
自动生成 JSON
根据你的配置自动生成完整的 app.json tabBar 配置代码，JSON 格式严格规范，杜绝手写语法错误。
一键复制配置
生成的 TabBar 配置代码支持一键复制到剪贴板，省去手动选中和复制的步骤，提高开发效率。
Tab 灵活管理
支持动态添加和删除 Tab 项，自动限制在 2-5 个的微信规范范围内，每个 Tab 独立配置页面路径和图标。
使用步骤
- 设置 TabBar 颜色样式——默认文字颜色、选中颜色、背景色和上边框颜色
- 添加 Tab 项，填写每个 Tab 的名称、页面路径和选中/未选中图标路径
- 实时预览底部导航的视觉效果，检查配色是否协调
- 一键复制生成的 app.json TabBar 配置代码到你的小程序项目中
关于 TabBar 配置生成
微信小程序的底部 TabBar 需要在 app.json 中手写 JSON 配置——包括每个 Tab 的页面路径（pagePath）、文字（text）、选中/未选中的图标路径（iconPath/selectedIconPath）、以及整体的颜色设置。JSON 语法严格（双引号、无尾逗号），手写容易犯低级语法错误。本工具提供可视化配置界面：选择图标、填写文字、设置颜色，自动生成符合微信小程序规范的 app.json TabBar 配置片段，避免 JSON 格式错误。适合小程序初学者快速配置底部导航，或开发者在新建项目时快速搭建骨架。
常见问题
- TabBar 的图标有什么要求？
微信小程序要求 TabBar 图标必须放置在项目的根目录或本地资源中（不能用网络图片），格式支持 PNG/JPG，建议尺寸 81px × 81px（3x 图），每个 Tab 需要两个图标：未选中态（iconPath）和选中态（selectedIconPath）。很多开发者会忘记准备两个图标——结果选中和未选中时样子一样，用户无法判断当前在哪个 Tab。
- TabBar 最多能放几个 Tab？
微信规定 最少 2 个、最多 5 个 Tab。如果超过 5 个功能入口，需要将低频功能放到二级页面而非 Tab 中。另外，TabBar 只支持主包页面——分包中的页面不能作为 Tab。