59 | tabBar组件（一）：系统默认的tabBar组件如何开启及使用-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

### 章节 59 | tabBar组件（一）：系统默认的tabBar组件如何开启及使用

在微信小程序的开发中，`tabBar` 是一个非常重要的组件，它为用户提供了在不同页面间快速切换的导航方式，通常位于屏幕底部，包含多个选项卡（tab项），每个tab项对应一个页面。`tabBar` 的存在极大地提升了用户体验，让用户能够轻松地在应用的不同功能模块间跳转。本章节将详细介绍如何在微信小程序中开启并使用系统默认的 `tabBar` 组件。

#### 一、了解tabBar的基本概念

在深入讨论如何开启和使用之前，首先需要明确 `tabBar` 的几个核心概念：

- **tabBar**：底部导航栏，用于在不同页面（通常是应用的主要功能模块）间进行切换。
- **tab项**：`tabBar` 上的每一个按钮，代表一个可切换的页面。
- **iconPath**：tab项上未选中时的图标路径。
- **selectedIconPath**：tab项选中时的图标路径，用于表示当前页面。
- **text**：tab项的文字描述，用于辅助图标表达页面功能。
- **pagePath**：tab项对应的页面路径，用户点击tab项后跳转到的页面。

#### 二、开启系统默认的tabBar组件

微信小程序提供了系统默认的 `tabBar` 组件，开发者只需在 `app.json` 文件中进行配置，即可轻松实现底部导航栏的功能。下面将详细介绍配置步骤：

1. **编辑`app.json`文件**

`app.json` 是小程序的全局配置文件，其中包含了小程序的窗口表现、网络超时时间、页面的路径及窗口表现等。要在小程序中使用 `tabBar`，首先需要在 `app.json` 的 `tabBar` 字段中进行配置。

```json
   {
     "pages": [
       "pages/index/index",
       "pages/logs/logs",
       "pages/profile/profile"
     ],
     "window": {
       "navigationBarBackgroundColor": "#ffffff",
       "navigationBarTextStyle": "black",
       "navigationBarTitleText": "WeChat"
     },
     "tabBar": {
       "list": [
         {
           "pagePath": "pages/index/index",
           "text": "首页",
           "iconPath": "icons/home.png",
           "selectedIconPath": "icons/home_active.png"
         },
         {
           "pagePath": "pages/logs/logs",
           "text": "日志",
           "iconPath": "icons/logs.png",
           "selectedIconPath": "icons/logs_active.png"
         },
         {
           "pagePath": "pages/profile/profile",
           "text": "我的",
           "iconPath": "icons/profile.png",
           "selectedIconPath": "icons/profile_active.png"
         }
       ],
       "color": "#7A7E83",
       "selectedColor": "#3cc51f",
       "backgroundColor": "#ffffff",
       "borderStyle": "black"
     }
   }
   ```

在上面的配置中，`tabBar` 字段下的 `list` 数组定义了 `tabBar` 的所有tab项，每个tab项都是一个对象，包含 `pagePath`、`text`、`iconPath` 和 `selectedIconPath` 属性。此外，`tabBar` 还支持全局配置，如 `color`（未选中时的文字颜色）、`selectedColor`（选中时的文字颜色）、`backgroundColor`（背景颜色）和 `borderStyle`（边框样式，仅支持 `black`/`white`）。

2. **准备图标资源**

如上配置所示，每个tab项都需要提供两种图标资源：未选中时的图标（`iconPath`）和选中时的图标（`selectedIconPath`）。这些图标资源应放置在项目的合适位置（如 `images` 或 `icons` 文件夹），并确保路径正确无误。

图标的尺寸和样式应符合微信小程序的设计规范，以保证在不同设备和屏幕尺寸上都能有良好的显示效果。

3. **验证配置**

配置完成后，保存 `app.json` 文件，并在微信开发者工具中预览小程序。如果一切配置正确，你将看到底部出现了 `tabBar`，并且点击不同的tab项能够正确跳转到对应的页面。

#### 三、使用tabBar的注意事项

1. **tabBar页面数量限制**

微信小程序对 `tabBar` 的tab项数量有限制，最多只能配置5个tab项。这是因为过多的tab项会占用屏幕空间，影响用户体验。

2. **tabBar页面路径**

`tabBar` 的 `pagePath` 必须是小程序页面的完整路径，且该路径必须是 `pages` 字段中列出的页面之一。如果尝试跳转到未声明的页面，将导致小程序无法正常工作。

3. **自定义tabBar**

虽然系统默认的 `tabBar` 已经能够满足大部分需求，但在某些特殊场景下，开发者可能需要自定义 `tabBar` 的样式或行为。微信小程序也提供了自定义 `tabBar` 的能力，但这需要更多的代码工作，并且需要注意与小程序生命周期的协调。

4. **tabBar的显示与隐藏**

在某些情况下，开发者可能希望在某些页面上隐藏 `tabBar`（例如，在登录页面或全屏页面）。虽然系统默认的 `tabBar` 不直接支持通过配置隐藏，但可以通过在特定页面的 `app.json` 配置中设置 `"tabBar": false` 来实现（注意，这种方式仅适用于该页面，且需要在该页面的配置文件中设置，而非全局的 `app.json`）。

5. **tabBar的更新**

如果需要在小程序运行过程中动态更新 `tabBar` 的内容（如添加、删除tab项或修改图标），则需要使用小程序的API（如 `wx.setTabBarStyle`、`wx.setTabBarItem`）来实现。但需要注意的是，这些API的使用场景有限，且需要谨慎操作，以免破坏用户体验。

#### 四、结语

系统默认的 `tabBar` 组件是微信小程序中不可或缺的一部分，它为用户提供了快速导航的便利。通过合理配置 `app.json` 文件中的 `tabBar` 字段，开发者可以轻松实现底部导航栏的功能。同时，也需要注意 `tabBar` 的使用限制和注意事项，以确保小程序的稳定性和用户体验。在未来的开发中，随着小程序功能的不断完善和扩展，`tabBar` 也将扮演更加重要的角色。

该分类下的相关小册推荐：

微信小程序与云开发(下)

微信小程序与云开发(中)

微信小程序全栈开发实战(下)

微信小程序全栈开发实战(中)

微信小程序底层框架实现原理

微信小程序与云开发(上)