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

最新推荐文章于 2025-06-02 09:54:28 发布

一只蜗牛儿

最新推荐文章于 2025-06-02 09:54:28 发布

阅读量3k

点赞数 23

CC 4.0 BY-SA版权

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/qq_42978535/article/details/144670735

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

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

一、什么是`tabBar`

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

tabBar通常会包括：

导航图标：每个Tab的图标。
标题：每个Tab的标题。
选中时的颜色：当某个Tab被选中时，它的文字和图标的颜色。
未选中时的颜色：当某个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":