# TabBar 图标添加指南

## 📋 当前状态
- TabBar 已配置完成，只显示文字，暂无图标
- 需要手动添加 PNG/JPG 格式的图标文件

## 🎨 图标要求
- **格式**：PNG（推荐，支持透明背景）或 JPG
- **尺寸**：81x81 px（推荐）或 40x40 px（最小）
- **背景**：透明（PNG格式）
- **颜色**：
  - 未选中：灰色 (#999999)
  - 选中：绿色 (#07c160)

## 📁 文件命名和位置
创建 `images/tabbar/` 目录，添加以下 6 个图标文件：

```
miniprogram/
└── miniprogram/
    └── images/
        └── tabbar/
            ├── home.png              # 首页 - 未选中
            ├── home-active.png       # 首页 - 选中
            ├── article.png           # 我的发布 - 未选中
            ├── article-active.png    # 我的发布 - 选中
            ├── user.png              # 我的 - 未选中
            └── user-active.png       # 我的 - 选中
```

## 🔧 配置步骤

### 1. 准备图标文件
可以使用以下方式获取图标：

#### 方案1：使用 Iconfont（推荐）
1. 访问 https://www.iconfont.cn/
2. 搜索以下图标：
   - 首页：搜索 "home" 或 "房子"
   - 文章：搜索 "file" 或 "文档"
   - 用户：搜索 "user" 或 "用户"
3. 下载 PNG 格式（81x81 px）
4. 使用在线工具修改颜色：
   - https://www.peko-step.com/zh/tool/pngcolor.html
   - 未选中版本改为灰色 #999999
   - 选中版本改为绿色 #07c160

#### 方案2：使用 Icons8
1. 访问 https://icons8.com/icons
2. 搜索图标并下载
3. 选择 PNG 格式，81x81 px
4. 选择颜色（灰色/绿色）

#### 方案3：使用 Flaticon
1. 访问 https://www.flaticon.com/
2. 搜索并下载图标
3. 编辑颜色

### 2. 修改 app.json 配置

在 `app.json` 的 `tabBar.list` 中添加图标路径：

```json
{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/profile/published/published",
        "text": "我的发布",
        "iconPath": "images/tabbar/article.png",
        "selectedIconPath": "images/tabbar/article-active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "images/tabbar/user.png",
        "selectedIconPath": "images/tabbar/user-active.png"
      }
    ]
  }
}
```

### 3. 重新编译小程序
保存配置后，重新编译即可看到图标

## 🎯 快速方案：使用简单色块图标

如果暂时找不到合适的图标，可以使用纯色方块作为临时图标：

1. 使用 Photoshop、Sketch 或在线工具创建 81x81 px 的图片
2. 首页：蓝色方块
3. 我的发布：橙色方块
4. 我的：绿色方块
5. 选中状态：同色但更亮或加边框

## ⚠️ 注意事项
- 图标文件大小建议 < 40KB
- 确保图片路径正确（相对于 miniprogram 目录）
- PNG 格式推荐使用透明背景
- 图标设计要简洁清晰，避免过于复杂的图案
- 选中和未选中状态要有明显区别

## 📞 需要帮助？
如果需要我帮你生成简单的图标文件，请告诉我，我可以提供 base64 编码或其他方案。
