《微信小程序》第七章：TabBar设计

"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 节点说明

每一项对应一个底部标签页，字段如下：

五、完整代码

{
	"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": {}
}

六、开发与调试注意事项

1. 路径大小写敏感
微信小程序真机区分大小写，确保 pages.json 中的 pagePath 与目录完全一致。
2. 页面必须提前注册
所有 pagePath 必须在 "pages" 数组里先声明，否则编译失败。
3. H5 与小程序差异
H5 端 tabBar 由 uni-app 模拟，自定义性更高；小程序端完全受微信客户端约束，不支持动态隐藏某一项。
4. 红点/数字角标
需通过 uni.setTabBarBadge / uni.removeTabBarBadge 在业务逻辑中控制，与配置无关。
5. 图标颜色
微信会取图标有像素区域做纯色填充，因此设计稿务必使用纯灰度图标，否则会出现色差。
6. 审核经验
文字需与页面功能强相关，避免“未实现功能”被拒。

7.图标规范

图标 8 张（4 功能 ×2 状态）已压缩 ≤40 KB
图标命名规范： *-active.png 为选中态