63 lines
1.8 KiB
Markdown
63 lines
1.8 KiB
Markdown
|
# 小程序图标说明
|
|||
|
|
|
|||
|
|
## ✅ 图标已创建
|
|||
|
|
|
|||
|
|
所有必需的图标文件已经创建在 `miniapp/images/` 目录中：
|
|||
|
|
|
|||
|
|
### TabBar图标
|
|||
|
|
| 文件名 | 用途 | 颜色 |
|
|||
|
|
|--------|------|------|
|
|||
|
|
| home.png | 首页图标（未选中） | #999999 |
|
|||
|
|
| home-active.png | 首页图标（选中） | #07c160 |
|
|||
|
|
| stats.png | 统计图标（未选中） | #999999 |
|
|||
|
|
| stats-active.png | 统计图标（选中） | #07c160 |
|
|||
|
|
| profile.png | 个人中心（未选中） | #999999 |
|
|||
|
|
| profile-active.png | 个人中心（选中） | #07c160 |
|
|||
|
|
|
|||
|
|
### 其他图标
|
|||
|
|
| 文件名 | 用途 |
|
|||
|
|
|--------|------|
|
|||
|
|
| default-avatar.png | 默认头像 |
|
|||
|
|
| empty.png | 空状态图片 |
|
|||
|
|
|
|||
|
|
## 🎨 生成真实PNG图标
|
|||
|
|
|
|||
|
|
当前的PNG文件是占位符（1x1像素），可以让小程序正常运行。如需生成真实的图标：
|
|||
|
|
|
|||
|
|
### 方法1：使用HTML生成器
|
|||
|
|
1. 在浏览器中打开 `miniapp/generate-icons.html`
|
|||
|
|
2. 点击"下载所有图标"按钮
|
|||
|
|
3. 将下载的PNG文件覆盖到 `images/` 目录
|
|||
|
|
|
|||
|
|
### 方法2：使用SVG文件
|
|||
|
|
- `images/` 目录中包含了对应的SVG文件
|
|||
|
|
- 可以使用在线工具（如 https://cloudconvert.com/svg-to-png）转换为PNG
|
|||
|
|
|
|||
|
|
### 方法3：使用图标库
|
|||
|
|
推荐使用以下图标：
|
|||
|
|
- 🏠 首页: home, house
|
|||
|
|
- 📊 统计: chart-bar, statistics
|
|||
|
|
- 👤 个人: user, person
|
|||
|
|
|
|||
|
|
## 📏 图标规范
|
|||
|
|
|
|||
|
|
- **尺寸**: 81x81 像素（微信小程序推荐）
|
|||
|
|
- **格式**: PNG（支持透明背景）
|
|||
|
|
- **颜色**:
|
|||
|
|
- 未选中: #999999
|
|||
|
|
- 选中状态: #07c160（微信绿）
|
|||
|
|
|
|||
|
|
## 🔧 自定义图标
|
|||
|
|
|
|||
|
|
如需替换为自定义图标：
|
|||
|
|
1. 准备81x81像素的PNG图片
|
|||
|
|
2. 命名规则：`{name}.png` 和 `{name}-active.png`
|
|||
|
|
3. 将文件放入 `images/` 目录
|
|||
|
|
4. 重新编译小程序
|
|||
|
|
|
|||
|
|
## 💡 提示
|
|||
|
|
|
|||
|
|
- 图标文件很小，不会影响小程序性能
|
|||
|
|
- 建议使用简洁的线性图标
|
|||
|
|
- 保持图标风格统一
|
|||
|
|
- 可以使用 iconfont 或其他图标网站下载
|