# TabBar 图标添加指南

## 当前状态

`app.json` 中已经配置了图标路径，但需要确保图标文件存在。

## 快速添加图标的方法

### 方法1：使用在线图标生成器（推荐）

1. **访问图标库网站**：
   - IconFont: https://www.iconfont.cn/
   - Iconfinder: https://www.iconfinder.com/
   - Flaticon: https://www.flaticon.com/

2. **搜索并下载图标**：
   - 首页：搜索 "home" 或 "首页"
   - 书架：搜索 "bookshelf" 或 "书架"
   - 我的：搜索 "user" 或 "profile" 或 "我的"

3. **准备图标文件**（需要6个文件）：
   - `images/home.png` - 首页未选中（灰色，81x81px）
   - `images/home-active.png` - 首页选中（主题色 #667eea，81x81px）
   - `images/bookshelf.png` - 书架未选中（灰色，81x81px）
   - `images/bookshelf-active.png` - 书架选中（主题色 #667eea，81x81px）
   - `images/profile.png` - 我的未选中（灰色，81x81px）
   - `images/profile-active.png` - 我的选中（主题色 #667eea，81x81px）

### 方法2：使用微信开发者工具创建占位图标

1. 在微信开发者工具中，右键点击 `images` 文件夹
2. 选择"新建文件"
3. 创建6个PNG文件（可以是简单的占位图）

### 方法3：使用图片编辑工具

使用 Photoshop、GIMP 或在线编辑器创建 81x81px 的 PNG 图标。

## 图标要求

- **尺寸**：81px × 81px（推荐）
- **格式**：PNG（支持透明背景）
- **大小**：单个文件不超过 40KB
- **颜色**：
  - 未选中：灰色 (#7A7E83)
  - 选中：主题色 (#667eea)

## 配置检查

确保 `app.json` 中的配置如下：

```json
"tabBar": {
  "color": "#7A7E83",
  "selectedColor": "#667eea",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "list": [
    {
      "pagePath": "pages/index/index",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-active.png",
      "text": "首页"
    },
    {
      "pagePath": "pages/bookshelf/bookshelf",
      "iconPath": "images/bookshelf.png",
      "selectedIconPath": "images/bookshelf-active.png",
      "text": "书架"
    },
    {
      "pagePath": "pages/profile/profile",
      "iconPath": "images/profile.png",
      "selectedIconPath": "images/profile-active.png",
      "text": "我的"
    }
  ]
}
```

## 推荐图标资源

1. **IconFont** (https://www.iconfont.cn/)
   - 搜索：首页、书架、用户
   - 免费下载，支持自定义颜色

2. **Iconfinder** (https://www.iconfinder.com/)
   - 搜索：home, bookshelf, user
   - 有免费和付费图标

3. **Flaticon** (https://www.flaticon.com/)
   - 大量免费图标
   - 支持 PNG 格式下载

## 注意事项

- 图标文件必须放在 `images` 目录下
- 文件名必须与 `app.json` 中配置的路径完全一致
- 如果图标不显示，检查文件路径和文件名是否正确
- 建议使用透明背景的 PNG 图标