系列文章
《微信小程序》
https://blog.csdn.net/sen_shan/category_13069009.html
第六章：参数定义与管理https://blog.csdn.net/sen_shan/article/details/153965573
文章目录
目录
[修改 pages.json](#修改 pages.json)
[四、list 节点说明](#四、list 节点说明)
前言
本文介绍了uni-app开发微信小程序时如何配置底部导航栏(tabBar)。
主要内容包括：
1）在阿里图标库下载图标并保存到指定目录；
2）修改pages.json文件配置tabBar相关参数，包括颜色、选中样式和各tab页的路径、文字、图标；
3）详细解释了tabBar各项配置字段的含义和使用规范；
4）提供了完整的配置代码示例；
5）总结了开发调试中的7个注意事项，如路径大小写敏感、页面必须提前注册、H5与小程序的差异等；
6）最后给出了效果演示和官方文档参考链接。文章旨在帮助开发者快速掌握微信小程序底部导航栏的配置方法。
图标下载
设计图标与活动图标，然后下载到static/icon/tabBar
修改 pages.json
修改 pages.json 文件
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#07c160",
"list": [
{ "pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/icon/tabBar/home.png",
"selectedIconPath": "static/icon/tabBar/home-active.png" },
{ "pagePath": "pages/category/index",
"text": "分类",
"iconPath": "static/icon/tabBar/category.png",
"selectedIconPath": "static/icon/tabBar/category-active.png" },
{ "pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "static/icon/tabBar/cart.png",
"selectedIconPath": "static/icon/tabBar/cart-active.png" },
{ "pagePath": "pages/mine/index",
"text": "我的" ,
"iconPath": "static/icon/tabBar/mine.png",
"selectedIconPath": "static/icon/tabBar/mine-active.png"
}
]
},一、概述
基于 uni-app 框架开发的 微信小程序 项目在 pages.json 中配置的底部导航栏（tabBar）字段含义、资源规范及常见注意事项，方便前后端、UI、测试快速查阅。
二、配置位置
pages.json 位于项目根目录，是 uni-app 全局路由与窗口表现配置文件。
tabBar 节点与 "pages" 、 "globalStyle" 同级。
{
"pages": [ ... ],
"globalStyle": { ... },
"tabBar": { ... } // ← 本文档说明对象
}三、字段详解
四、list 节点说明
每一项对应一个底部标签页，字段如下：
五、完整代码
bash
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/login/index",
"style" :
{
"navigationBarTitleText" : "登录"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path" : "pages/cart/index",
"style" :
{
"navigationBarTitleText" : "购物车"
}
},
{
"path" : "pages/category/index",
"style" :
{
"navigationBarTitleText" : "分类"
}
},
{
"path" : "pages/mine/index",
"style" :
{
"navigationBarTitleText" : "我的"
}
}
],
// "tabBar": {"custom": true },
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#07c160",
"list": [
{ "pagePath": "pages/index/index",
"text": "首页",
/* "iconfont": {
"text": "\ue602", //首页图标 unicode
"selectedText": "\uf6eb",
"fontSize": "24px",
"color": "#7A7E83",
"selectedColor": "#07c160"
} */
"iconPath": "static/icon/tabBar/home.png",
"selectedIconPath": "static/icon/tabBar/home-active.png"
},
{ "pagePath": "pages/category/index",
"text": "分类",
"iconPath": "static/icon/tabBar/category.png",
"selectedIconPath": "static/icon/tabBar/category-active.png" },
{ "pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "static/icon/tabBar/cart.png",
"selectedIconPath": "static/icon/tabBar/cart-active.png" },
{ "pagePath": "pages/mine/index",
"text": "我的" ,
"iconPath": "static/icon/tabBar/mine.png",
"selectedIconPath": "static/icon/tabBar/mine-active.png"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}六、开发与调试注意事项
- 路径大小写敏感
微信小程序真机区分大小写，确保 pages.json 中的 pagePath 与目录完全一致。
- 页面必须提前注册
所有 pagePath 必须在 "pages" 数组里先声明，否则编译失败。
- H5 与小程序差异
H5 端 tabBar 由 uni-app 模拟，自定义性更高；小程序端完全受微信客户端约束，不支持动态隐藏某一项。
- 红点/数字角标
需通过 uni.setTabBarBadge / uni.removeTabBarBadge 在业务逻辑中控制，与配置无关。
- 图标颜色
微信会取图标 有像素区域 做纯色填充，因此设计稿务必使用 纯灰度图标，否则会出现色差。
- 审核经验
文字需与页面功能强相关，避免"未实现功能"被拒。
7.图标规范
图标 8 张（4 功能 ×2 状态）已压缩 ≤40 KB
图标命名规范： *-active.png 为选中态
七、常见报错速查
八、参考资料
uni-app 官方路由配置https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar
微信小程序 tabBar 设计指南https://developers.weixin.qq.com/miniprogram/design/
演示效果
