1.8 KiB
1.8 KiB
小程序图标说明
✅ 图标已创建
所有必需的图标文件已经创建在 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生成器
- 在浏览器中打开
miniapp/generate-icons.html - 点击"下载所有图标"按钮
- 将下载的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(微信绿)
🔧 自定义图标
如需替换为自定义图标:
- 准备81x81像素的PNG图片
- 命名规则:
{name}.png和{name}-active.png - 将文件放入
images/目录 - 重新编译小程序
💡 提示
- 图标文件很小,不会影响小程序性能
- 建议使用简洁的线性图标
- 保持图标风格统一
- 可以使用 iconfont 或其他图标网站下载