4.7 KiB
4.7 KiB
图标文件使用指南
📋 项目中使用的图标文件
1. TabBar 底部导航图标（必需）
在 pages.json 中配置的 TabBar 需要以下 6 个图标文件：
| 图标名称 | 用途 | 路径 |
|---|---|---|
home.png |
首页（未选中） | static/tabbar/home.png |
home-active.png |
首页（选中） | static/tabbar/home-active.png |
add.png |
记账（未选中） | static/tabbar/add.png |
add-active.png |
记账（选中） | static/tabbar/add-active.png |
statistics.png |
统计（未选中） | static/tabbar/statistics.png |
statistics-active.png |
统计（选中） | static/tabbar/statistics-active.png |
图标规格：
- 尺寸：81px × 81px（@2x）或 40px × 40px（@1x）
- 格式：PNG（支持透明背景）
- 颜色：
- 未选中：#7A7E83（灰色）
- 选中：#667eea（紫色）
2. 分类图标（使用 Emoji，无需文件）
代码中使用 Emoji 作为分类图标，例如：
- 📦 默认分类
- 🍔 餐饮
- 👕 服装
- 🏠 住房
- 🚗 交通
- 等等...
这些图标存储在数据库中，不需要图标文件。
3. 功能图标（使用 Emoji，无需文件）
- 📷 上传图片图标（在 OCR 页面）
🚀 快速获取图标的方法
方法1：使用在线图标库（推荐）
IconFont（阿里巴巴图标库）
- 访问：https://www.iconfont.cn/
- 注册/登录账号
- 搜索关键词：
- "首页" 或 "home"
- "添加" 或 "add" 或 "plus"
- "统计" 或 "statistics" 或 "chart"
- 选择图标，点击下载
- 选择 PNG 格式，尺寸选择 81×81
- 下载后重命名并放入
static/tabbar/目录
Flaticon
- 访问：https://www.flaticon.com/
- 搜索图标
- 下载 PNG 格式（免费账号需要注明来源）
方法2：使用 AI 生成图标
使用 ChatGPT、Midjourney 等 AI 工具生成图标：
提示词示例：
生成一个简单的首页图标，极简风格，紫色主题，透明背景，81x81像素，PNG格式
方法3：临时解决方案（使用文字图标）
如果暂时没有图标文件，可以修改 pages.json，移除图标路径，只显示文字：
{
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
// 移除 iconPath 和 selectedIconPath
}
]
}
}
方法4：使用 uni-app 内置图标
uni-app 支持使用字体图标，可以集成 iconfont：
- 访问 https://www.iconfont.cn/
- 创建项目，添加图标
- 下载字体文件
- 在项目中引入字体文件
- 使用类名引用图标
📥 推荐的免费图标资源
-
IconFont - https://www.iconfont.cn/
- 中文界面，搜索方便
- 免费使用，需登录
-
Flaticon - https://www.flaticon.com/
- 图标丰富
- 免费使用需注明来源
-
Icons8 - https://icons8.com/
- 图标质量高
- 部分免费
-
Material Icons - https://fonts.google.com/icons
- Google 官方图标库
- 完全免费
-
Font Awesome - https://fontawesome.com/
- 图标库丰富
- 部分免费
🎨 图标设计建议
风格统一
- 所有图标使用相同的设计风格
- 线条粗细一致
- 圆角或直角统一
颜色方案
- 未选中：灰色（#7A7E83）
- 选中：紫色（#667eea，与主题色一致）
尺寸规范
- TabBar 图标：81px × 81px（@2x）
- 确保图标在选中和未选中状态下清晰可辨
⚠️ 注意事项
- 文件路径：图标文件必须放在
static/tabbar/目录下 - 文件命名：文件名必须与
pages.json中的配置完全一致（区分大小写） - 文件格式：使用 PNG 格式，支持透明背景
- 文件大小：建议单个图标文件不超过 50KB
- 缺失处理：如果图标文件不存在，TabBar 可能无法正常显示
🔧 快速测试
创建占位图标文件进行测试：
- 创建 6 个 81×81px 的纯色 PNG 图片
- 未选中状态使用灰色，选中状态使用紫色
- 放入
static/tabbar/目录 - 运行项目查看效果
📝 图标文件清单
请确保以下文件存在：
frontend/static/tabbar/
├── home.png ✅ 需要创建
├── home-active.png ✅ 需要创建
├── add.png ✅ 需要创建
├── add-active.png ✅ 需要创建
├── statistics.png ✅ 需要创建
└── statistics-active.png ✅ 需要创建
💡 快速开始
最快的方式：
- 访问 https://www.iconfont.cn/
- 搜索并下载 6 个图标（首页、添加、统计各 2 个）
- 重命名为对应文件名
- 放入
static/tabbar/目录 - 完成！