在微信小程序中，page.json 文件不仅用于配置单个页面的样式和其他属性，还可以用于配置底部导航栏（tabBar）。通过在 page.json 文件中配置 tabBar，可以实现小程序底部导航栏的自定义，包括导航栏的样式、图标和文字等。本文将详细介绍如何在 page.json 文件中配置底部导航栏，并提供一些最佳实践。

1. tabBar 基本配置

在 page.json 文件中配置 tabBar 时，需要在文件中添加 tabBar 属性，并指定相应的配置项。以下是详细的配置步骤和示例：

1.1 配置 tabBar 基本属性

在 page.json 文件中添加 tabBar 属性，并配置基本属性：

{
  "tabBar": {
    "color": "#7A7E83",               // 默认字体颜色
    "selectedColor": "#1296db",       // 选中字体颜色
    "borderStyle": "black",           // tabBar 上边框的颜色，仅支持 black / white
    "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"
      }
    ]
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

2. 配置 tabBar 详细属性

除了基本属性外，tabBar 还支持更多详细的配置项，包括背景色、位置、自定义样式等。

2.1 背景色和位置

配置 tabBar 的背景色和位置：

{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#1296db",
    "borderStyle": "black",
    "backgroundColor": "#FFFFFF",     // tabBar 背景色
    "position": "bottom",             // tabBar 位置，支持 bottom / top
    "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"
      }
    ]
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

2.2 自定义样式

如果需要自定义 tabBar 的样式，可以在 app.json 文件中配置 custom 属性，并在相应页面的 .json 文件中声明 usingComponents：

{
  "tabBar": {
    "custom": true,                   // 开启自定义 tabBar
    "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"
      }
    ]
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

在每个页面的 .json 文件中声明 usingComponents：

{
  "component": true,
  "usingComponents": {
    "custom-tab-bar": "/components/custom-tab-bar/custom-tab-bar"
  }
}

• 1
• 2
• 3
• 4
• 5
• 6

3. 自定义 tabBar 组件

如果需要完全自定义 tabBar 的样式和行为，可以创建一个自定义组件。以下是一个简单的自定义 tabBar 组件示例：

3.1 创建自定义组件

在项目根目录下创建 custom-tab-bar 目录，并在其中创建组件文件：

- custom-tab-bar/
  - index.js
  - index.json
  - index.wxml
  - index.wxss

• 1
• 2
• 3
• 4
• 5

3.1.1 index.js

Component({
  properties: {
    selected: {
      type: Number,
      value: 0
    }
  },
  methods: {
    switchTab(e) {
      const idx = e.currentTarget.dataset.index;
      const path = e.currentTarget.dataset.path;
      wx.switchTab({ url: path });
      this.triggerEvent('change', { selected: idx });
    }
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

3.1.2 index.json

{
  "component": true
}

• 1
• 2
• 3

3.1.3 index.wxml

<view class="tab-bar">
  <view class="tab-item" wx:for="{{list}}" wx:key="index" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
    <image class="tab-icon" src="{{item.iconPath}}">image>
    <text class="tab-text" wx:class="{{selected === index ? 'active' : ''}}">{{item.text}}text>
  view>
view>

• 1
• 2
• 3
• 4
• 5
• 6

3.1.4 index.wxss

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #FFFFFF;
  padding: 10px 0;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-icon {
  width: 24px;
  height: 24px;
}

.tab-text {
  font-size: 12px;
  color: #7A7E83;
}

.tab-text.active {
  color: #1296db;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

4. 使用自定义 tabBar 组件

在需要使用自定义 tabBar 的页面中，引入并使用自定义组件：

<template>
  <view>
    
    <custom-tab-bar selected="{{selected}}" bind:change="handleChange">custom-tab-bar>
  view>
template>

<script>
import customTabBar from '@/components/custom-tab-bar/custom-tab-bar';

export default {
  components: {
    customTabBar
  },
  data() {
    return {
      selected: 0,
      list: [
        {
          pagePath: '/pages/index/index',
          text: '首页',
          iconPath: '/images/home.png'
        },
        {
          pagePath: '/pages/logs/logs',
          text: '日志',
          iconPath: '/images/logs.png'
        }
      ]
    };
  },
  methods: {
    handleChange(e) {
      this.setData({
        selected: e.detail.selected
      });
    }
  }
};
script>

<style>
/* 页面样式 */
style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44

5. 注意事项

1. 组件路径: 确保组件路径正确无误，路径中的 / 是必需的。
2. 组件命名: 组件名称应简洁明了，避免使用特殊字符和保留关键字。
3. 分包问题: 如果组件位于分包中，确保分包已经正确配置，并且组件路径正确。
4. 编译问题: 修改 tabBar 配置后，可能需要重新编译项目，以确保配置生效。
5. 优先级: 自定义 tabBar 组件优先级高于默认 tabBar，如果有同名组件，自定义组件会优先被使用。

6. 最佳实践

1. 统一管理: 将所有自定义组件集中管理在一个目录下，方便维护和查找。
2. 命名规范: 组件名称应简洁明了，避免使用容易引起歧义的名称。
3. 模块化设计: 将复杂的功能模块化，每个组件负责单一功能，提高代码的可复用性和可维护性。
4. 文档记录: 记录每个组件的使用方法和注意事项，便于团队协作和后续维护。
5. 性能优化: 合理配置 tabBar 模式，避免不必要的组件加载，优化页面性能。

通过合理配置 tabBar 和使用自定义组件，可以显著提升微信小程序的用户体验和开发效率。希望本文对你有所帮助，如果有任何问题或需要进一步的帮助，请随时留言交流。?