零基础微信小程序开发——全局配置之tabBar

---

微信小程序是腾讯推出的一种轻量级应用，它不需要下载安装，可以通过微信客户端直接打开。在小程序开发中，tabBar是非常重要的一个部分，它用于在小程序中实现底部导航栏的功能，类似于移动应用中的底部导航按钮。通过tabBar，用户可以快速切换不同的页面，提升用户体验。

在本篇文章中，我们将从零基础开始，介绍如何配置微信小程序的tabBar，并通过代码示例帮助大家理解如何使用它。

一、什么是tabBar

tabBar是微信小程序中的全局配置之一，定义了底部的导航栏，通过tabBar，开发者可以设定多个页面的入口，用户点击时会切换到相应的页面。

tabBar通常会包括：

1. 导航图标：每个Tab的图标。
2. 标题：每个Tab的标题。
3. 选中时的颜色：当某个Tab被选中时，它的文字和图标的颜色。
4. 未选中时的颜色：当某个Tab未被选中时，它的文字和图标的颜色。

二、tabBar的基本结构

tabBar的配置需要在小程序的全局配置文件app.json中进行设置。app.json文件是微信小程序的全局配置文件，负责全局路由、窗口表现、TabBar设置等配置项。

以下是app.json中tabBar配置的基本结构：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#000000",          // 未选中时文字的颜色
    "selectedColor": "#3cc51f",  // 选中时文字的颜色
    "backgroundColor": "#ffffff", // tabBar 背景色
    "borderStyle": "black",       // tabBar 上边框的颜色
    "list": [
      {
        "pagePath": "pages/index/index",  // 页面路径
        "text": "首页",                  // tab的文字
        "iconPath": "images/home.png",    // 图标路径
        "selectedIconPath": "images/home-active.png"  // 选中的图标路径
      },
      {
        "pagePath": "pages/logs/logs",   // 页面路径
        "text": "日志",
        "iconPath": "images/logs.png",
        "selectedIconPath": "images/logs-active.png"
      }
    ]
  }
}

三、配置项详细解释

1. color:

   • color是未选中时Tab项文字的颜色。通常可以设置为黑色或灰色。
   • 示例："color": "#000000"。

2. selectedColor:

   • selectedColor是选中时Tab项文字的颜色。通常会设置为突出显示的颜色，如绿色、蓝色等。
   • 示例："selectedColor": "#3cc51f"。

3. backgroundColor:

   • backgroundColor是整个tabBar的背景颜色。
   • 示例："backgroundColor": "#ffffff"。

4. borderStyle:

   • borderStyle设置tabBar的上边框颜色，常见的值为"black"或"white"。
   • 示例："borderStyle": "black"。

5. list:

   • list是TabBar的内容数组。每个Tab项配置包括：
     • pagePath: 对应页面的路径。
     • text: Tab的文字。
     • iconPath: Tab未选中时的图标路径。
     • selectedIconPath: Tab选中时的图标路径。

四、实现完整代码示例

假设我们要开发一个简单的微信小程序，包含两个页面：首页和日志页面。我们将展示如何在app.json中配置tabBar。

1. 文件结构

/myapp
  ├── /images
  │     ├── home.png
  │     ├── home-active.png
  │     ├── logs.png
  │     └── logs-active.png
  ├── /pages
  │     ├── /index
  │     │    ├── index.wxml
  │     │    ├── index.wxss
  │     │    └── index.js
  │     ├── /logs
  │     │    ├── logs.wxml
  │     │    ├── logs.wxss
  │     │    └── logs.js
  ├── app.json
  ├── app.js
  └── app.wxss

2. app.json 配置文件

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/logs.png",
        "selectedIconPath": "images/logs-active.png"
      }
    ]
  }
}

3. 首页（index）页面：

• index.wxml (页面布局)

<view class="container">
  <text>欢迎来到首页！</text>
</view>

• index.wxss (页面样式)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

• index.js (页面逻辑)

Page({
  data: {
    message: "首页内容"
  },
  onLoad: function () {
    console.log('首页加载');
  }
});

4. 日志（logs）页面：

• logs.wxml (页面布局)

<view class="container">
  <text>日志页面内容</text>
</view>

• logs.wxss (页面样式)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

• logs.js (页面逻辑)

Page({
  data: {
    message: "日志内容"
  },
  onLoad: function () {
    console.log('日志页面加载');
  }
});

五、运行效果

1. TabBar显示：

   • 启动小程序时，你会看到底部有两个Tab，分别是“首页”和“日志”。
   • 点击“首页”时，页面切换到首页。
   • 点击“日志”时，页面切换到日志页面。

2. 图标与文字：

   • 每个Tab的图标和文字会根据选中状态发生变化。当Tab被选中时，文字颜色变为绿色，图标会显示选中的版本。

六、常见问题与解决方法

1. tabBar不显示或显示不完整：

   • 请确保app.json的tabBar配置没有语法错误。
   • 确保pages字段中的路径和tabBar中pagePath字段的路径一致。

2. 图标无法显示：

   • 确保图标路径正确，并且图标文件已经放置在指定的目录下。
   • 微信小程序支持的图标格式是PNG、JPG、GIF等，建议使用PNG格式。

3. Tab文字颜色不生效：

   • 确保tabBar的color和selectedColor设置正确，并且确保你的微信开发者工具版本更新到最新。

七、总结

通过本文的介绍，你已经了解了如何在微信小程序中配置tabBar，并且学会了如何使用tabBar来实现底部导航栏的功能。你可以根据自己的需求调整tabBar的配置，例如添加更多的Tab、修改颜色、调整图标等。

希望本文能够帮助你顺利入门微信小程序开发，并顺利实现