🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容
🌸个人主页： 长风清留杨的博客
🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。
✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战
🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂
全局配置
小程序开发中的全局配置文件是app.json，它位于小程序的根目录下。这个文件非常重要，因为它包含了小程序的一些基础信息和全局配置。
tabBar
什么是 tabBar
tabBar是移动端应用中一种常见的页面效果，它主要用于实现多个页面之间的快速切换。在小程序开发中，tabBar同样扮演着非常重要的角色。小程序中的tabBar通常被分为底部tabBar和顶部tabBar两种类型。
- 底部tabBar：
- 底部tabBar是小程序中最为常见的一种tabBar类型。它位于屏幕的底部，用户可以通过点击不同的选项卡来切换不同的页面。
- 底部tabBar中至少需要配置两个选项卡，最多可以配置五个选项卡。这些选项卡通常包括图标和文本，以直观地表示每个页面的功能和内容。
- 底部tabBar的选项卡可以自定义样式，包括图标的颜色、文本的颜色、背景色等，以满足不同小程序的设计需求。
- 顶部tabBar：
- 顶部tabBar相对较少见，它位于屏幕的顶部，用于实现页面的切换。
- 与底部tabBar不同的是，当渲染顶部tabBar时，不显示图标，只显示文本。这可能是因为顶部空间有限，且用户通常更习惯于在底部进行页面切换操作。
- 顶部tabBar的样式和配置相对较少，通常只包括文本和分隔线等简单元素。
注意：
- tabBar中只能配置最少 2 个、最多 5 个 tab 页签
- 当渲染顶部 tabBar 时，不显示 icon，只显示文本，也就是如果渲染顶部的话，不会出现图片，直接先是文字部分，例如首页、消息、联系我们
tabBar 的 6 个组成部分
- backgroundColor：这个属性用于设置tabBar的背景颜色。背景颜色被设置为红色。它定义了tabBar的整体背景色调，是用户体验中不可或缺的一部分，可以影响整个界面的视觉效果。
- selectedIconPath：这个属性指定了当tab项被选中时，显示的图标路径。选中时的图标被设置为一个蓝色的三角形图标。这个图标在用户与界面交互时提供了直观的视觉反馈。
- borderColor：这个属性用于设置tabBar上边框的颜色。在示例中，边框颜色被设置为黑色。边框可以增强tabBar的视觉边界，使其在页面上更加突出。
- iconPath：这个属性指定了当tab项未被选中时，显示的图标路径。未选中时的图标被设置为一个灰色的圆形图标。这个图标在默认情况下展示给用户，提供了关于tab功能的直观信息。
- selectedColor：这个属性用于设置tab上文字在选中时的颜色。选中时的文字颜色被设置为绿色。这有助于用户区分当前活动的tab项。
- color：这个属性用于设置tab上文字的默认（未选中）颜色。未选中时的文字颜色被设置为紫色。这为用户提供了关于哪些tab项是可用的直观信息。
tabBar 节点的配置项
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| position | String | 否 | bottom | tabBar 的位置，支持 bottom（底部）或 top（顶部），但通常默认且更常见的是底部。 |
| borderStyle | String | 否 | black | tabBar 上边框的颜色，仅支持 black（黑色）或 white（白色），用于设置边框的显示颜色。 |
| color | HexColor | 否 | - | tab 上文字的默认（未选中）颜色，使用十六进制颜色代码进行定义。 |
| selectedColor | HexColor | 否 | - | tab 上的文字选中时的颜色，同样使用十六进制颜色代码进行定义，用于区分选中状态的文字颜色。 |
| backgroundColor | HexColor | 否 | - | tabBar 的背景色，使用十六进制颜色代码进行定义，用于设置工具栏的背景色调。 |
| list | Array | 是 | - | tab 页签的列表，是一个数组类型，包含了多个 tab 项的配置信息，最少需要配置2个 tab，最多可配置5个 tab，以满足用户界面的导航需求。 |
每个 tab 项的配置选项
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| pagePath | String | 是 | 页面路径，页面必须在 pages 中预先定义 |
| text | String | 是 | tab 上显示的文字 |
| iconPath | String | 是 | 未选中时的图标路径；当 position 为 top 时，不显示 icon |
| selectedIconPath | String | 是 | 当 position 为 top 时，不显示 icon（选中状态） |
实战一下
需求
预期能达到以下效果，有底部的tabBar、分别是首页、消息、个人中心，选中之前是没有填充颜色的图标，选中后是填充颜色的图标
实现步骤
- 拷贝图标资源：
需要将每个页面所需要的图标准备好，对应三组，分别是选中状态和非选中状态 - 新建 3 个对应的 tab 页面
三个页面分别对应首页、信息、个人中心 - 配置 tabBar 选项
第一步拷贝图标
这些是需要的图标，可以看到选中是深色有填充的，没有选中是浅色没有填充的，那我们命名的时候可以这样名称，没有选中的默认为自己的名字，例如home，选中的加上 -active，例如home-active
需要原版图标的话直接私信我，或者关注公众号：小白的大数据之旅
第二步：新建 3 个对应的 tab 页面
三个tab页面分别是首页、消息和个人中心
在app.js中添加如下内容
- home 是首页
- message 是消息页面
- individual 是个人中心页面
{"pages": ["pages/home/home","pages/message/message","pages/individual/individual"]
}
编写完上面的代码之后保存，对应的目录会自动创建
第三步：设置tabBar
在app.js中分别设置首页、消息、个人中心的页面，下面是app.json的源代码
{// 定义一个数组，用于存放小程序中所有页面的路径"pages": ["pages/home/home", // 首页页面路径"pages/message/message", // 消息页面路径"pages/individual/individual", // 个人中心页面路径"pages/index/index", // 索引页面路径（通常作为默认页面，但这里可能用作其他用途）"pages/test/test", // 测试页面路径"pages/logs/logs" // 日志页面路径],// 定义小程序窗口的表现"window": {"backgroundTextStyle": "dark", // 下拉 loading 的样式，dark 为深色背景，light 为浅色背景"navigationBarBackgroundColor": "#2b4b6b", // 导航栏背景颜色"navigationBarTitleText": "公众号：小白的大数据之旅", // 导航栏标题文字"navigationBarTextStyle": "white", // 导航栏标题文字颜色"backgroundColor": "#efefef", // 页面背景颜色"onReachBottomDistance": 100 // 页面上拉触底事件触发时距离页面底部距离},// 定义小程序底部标签栏的表现"tabBar": {"list": [{"pagePath": "pages/home/home", // 页面路径，首页路径"text": "首页", // 标签栏上显示的文字"iconPath": "/images/tabs/home.png", // 未选中时的图标路径"selectedIconPath": "/images/tabs/home-active.png" // 选中时的图标路径},{"pagePath": "pages/message/message", // 页面路径，消息页面路径"text": "消息", // 标签栏上显示的文字"iconPath": "/images/tabs/mess.png", // 未选中时的图标路径"selectedIconPath": "/images/tabs/mess-active.png" // 选中时的图标路径},{"pagePath": "pages/individual/individual", // 页面路径，个人中心页面路径"text": "个人中心", // 标签栏上显示的文字"iconPath": "/images/tabs/individual.png", // 未选中时的图标路径"selectedIconPath": "/images/tabs/individual-active.png"// 选中时的图标路径}]},// 小程序使用的样式版本，v2为推荐的最新版本"style": "v2",// 指明 sitemap.json 文件的位置，该文件用于配置小程序内搜索"sitemapLocation": "sitemap.json"
}
结果：
可以尝试点击下面的三个按钮，看看是什么样的效果
