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

企业开发 2025-04-08 12:11
0 阅读

微信小程序是腾讯推出的一种轻量级应用，它不需要下载安装，可以通过微信客户端直接打开。在小程序开发中，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、修改颜色、调整图标等。

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

猜你喜欢

目录

热门文章