当前位置：首页 > news >正文

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

news 2025/10/29 7:07:53

系列文章

《微信小程序》https://blog.csdn.net/sen_shan/category_13069009.html

第六章：参数定义与管理https://blog.csdn.net/sen_shan/article/details/153965573

文章目录

系列文章

文章目录

前言

图标下载

修改 pages.json

一、概述

二、配置位置

三、字段详解

四、list 节点说明

五、完整代码

六、开发与调试注意事项

七、常见报错速查

演示效果

前言

本文介绍了uni-app开发微信小程序时如何配置底部导航栏(tabBar)。

主要内容包括：

1）在阿里图标库下载图标并保存到指定目录；

2）修改pages.json文件配置tabBar相关参数，包括颜色、选中样式和各tab页的路径、文字、图标；

3）详细解释了tabBar各项配置字段的含义和使用规范；

4）提供了完整的配置代码示例；

5）总结了开发调试中的7个注意事项，如路径大小写敏感、页面必须提前注册、H5与小程序的差异等；

6）最后给出了效果演示和官方文档参考链接。文章旨在帮助开发者快速掌握微信小程序底部导航栏的配置方法。

图标下载

设计图标与活动图标，然后下载到static/icon/tabBar

阿里图标库https://www.iconfont.cn

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

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

五、完整代码

{"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 为选中态