miniprogram-1/ICON_GUIDE.md

TabBar 图标使用指南

当前状态

目前 TabBar 配置为纯文字模式，没有使用图标。如果需要添加图标，请按以下步骤操作：

1. 创建图标目录

在 miniprogram/ 目录下创建 icon/ 文件夹：

miniprogram/
├── icon/
│   ├── upload.png           (32x32px, 普通状态的识别图标)
│   ├── upload-active.png    (32x32px, 选中状态的识别图标)
│   ├── profile.png          (32x32px, 普通状态的个人中心图标)
│   ├── profile-active.png   (32x32px, 选中状态的个人中心图标)
│   └── share.png           (可选，用于分享功能)

2. 图标规格要求

• 尺寸: 建议使用 32x32px 或 64x64px
• 格式: PNG 格式，支持透明背景
• 颜色:
  • 普通状态：灰色系 (#7A7E83)
  • 选中状态：绿色系 (#3cc51f) 或项目主色调

3. 修改 app.json 配置

添加图标后，可以在 app.json 的 tabBar 配置中恢复图标路径：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/upload/upload",
        "iconPath": "icon/upload.png",
        "selectedIconPath": "icon/upload-active.png",
        "text": "识别"
      },
      {
        "pagePath": "pages/profile/profile",
        "iconPath": "icon/profile.png", 
        "selectedIconPath": "icon/profile-active.png",
        "text": "我的"
      }
    ]
  }
}

4. 图标设计建议

• 识别图标: 相机、扫描、或图片相关的图标
• 个人中心图标: 用户头像轮廓、设置齿轮等

5. 在线图标资源

• 阿里巴巴矢量图标库: https://www.iconfont.cn/
• Material Design Icons: https://material.io/icons/
• Feather Icons: https://feathericons.com/

当前配置

目前使用纯文字 TabBar，可以正常使用。如需图标效果，请按上述步骤添加相应的图标文件。