59 lines
1.9 KiB
Markdown
Executable File
59 lines
1.9 KiB
Markdown
Executable File
# 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 配置中恢复图标路径：
|
||
|
||
```json
|
||
{
|
||
"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，可以正常使用。如需图标效果，请按上述步骤添加相应的图标文件。 |