128 lines
2.8 KiB
Markdown
128 lines
2.8 KiB
Markdown
|
# 静态资源说明
|
|||
|
|
|
|||
|
|
## 📁 目录结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
static/
|
|||
|
|
├── tabbar/ # 底部导航栏图标
|
|||
|
|
├── images/ # 通用图片资源
|
|||
|
|
├── icons/ # 图标资源
|
|||
|
|
└── css/ # 全局样式
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎨 需要添加的图标文件
|
|||
|
|
|
|||
|
|
### 1. 底部导航栏图标 (tabbar/)
|
|||
|
|
|
|||
|
|
**尺寸要求**：81px × 81px（推荐）
|
|||
|
|
|
|||
|
|
需要的文件：
|
|||
|
|
- `home.png` - 首页图标（未选中）
|
|||
|
|
- `home-active.png` - 首页图标（选中）
|
|||
|
|
- `service.png` - 服务图标（未选中）
|
|||
|
|
- `service-active.png` - 服务图标（选中）
|
|||
|
|
- `order.png` - 订单图标（未选中）
|
|||
|
|
- `order-active.png` - 订单图标（选中）
|
|||
|
|
- `user.png` - 我的图标（未选中）
|
|||
|
|
- `user-active.png` - 我的图标（选中）
|
|||
|
|
|
|||
|
|
**颜色建议**：
|
|||
|
|
- 未选中：灰色 (#999999)
|
|||
|
|
- 选中：主题色 (#4a9b9f)
|
|||
|
|
|
|||
|
|
### 2. 通用图片 (images/)
|
|||
|
|
|
|||
|
|
需要的文件：
|
|||
|
|
- `empty.png` - 空状态图片（300px × 300px）
|
|||
|
|
- `logo.png` - 应用Logo
|
|||
|
|
- `avatar-default.jpg` - 默认头像
|
|||
|
|
- `service-default.jpg` - 默认服务图片
|
|||
|
|
- `banner-default.jpg` - 默认轮播图
|
|||
|
|
|
|||
|
|
### 3. 图标资源 (icons/)
|
|||
|
|
|
|||
|
|
根据需要添加各种小图标
|
|||
|
|
|
|||
|
|
## 🚀 快速解决方案
|
|||
|
|
|
|||
|
|
### 方案1：使用占位图片（临时）
|
|||
|
|
|
|||
|
|
在开发阶段，可以先使用纯色占位图片：
|
|||
|
|
|
|||
|
|
1. 使用在线工具生成占位图：
|
|||
|
|
- https://placeholder.com/
|
|||
|
|
- https://via.placeholder.com/
|
|||
|
|
|
|||
|
|
2. 或者使用uni-app的图标字体代替
|
|||
|
|
|
|||
|
|
### 方案2：使用iconfont图标（推荐）
|
|||
|
|
|
|||
|
|
1. 访问 https://www.iconfont.cn/
|
|||
|
|
2. 搜索并下载需要的图标
|
|||
|
|
3. 放入对应目录
|
|||
|
|
|
|||
|
|
### 方案3：设计图标
|
|||
|
|
|
|||
|
|
使用设计工具（如Figma、Sketch）设计图标
|
|||
|
|
|
|||
|
|
## 📝 临时解决方案
|
|||
|
|
|
|||
|
|
如果暂时没有图标，可以修改`pages.json`使用文字代替：
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"tabBar": {
|
|||
|
|
"color": "#999999",
|
|||
|
|
"selectedColor": "#4a9b9f",
|
|||
|
|
"backgroundColor": "#ffffff",
|
|||
|
|
"borderStyle": "black",
|
|||
|
|
"list": [
|
|||
|
|
{
|
|||
|
|
"pagePath": "pages/index/index",
|
|||
|
|
"text": "首页"
|
|||
|
|
// 暂时不设置iconPath
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎯 推荐的图标资源网站
|
|||
|
|
|
|||
|
|
1. **iconfont** - https://www.iconfont.cn/
|
|||
|
|
- 阿里巴巴矢量图标库
|
|||
|
|
- 免费、资源丰富
|
|||
|
|
|
|||
|
|
2. **IconPark** - https://iconpark.oceanengine.com/
|
|||
|
|
- 字节跳动图标库
|
|||
|
|
- 可自定义颜色
|
|||
|
|
|
|||
|
|
3. **Flaticon** - https://www.flaticon.com/
|
|||
|
|
- 国际图标库
|
|||
|
|
- 需要注册
|
|||
|
|
|
|||
|
|
4. **Icons8** - https://icons8.com/
|
|||
|
|
- 多种风格图标
|
|||
|
|
- 部分免费
|
|||
|
|
|
|||
|
|
## ⚠️ 注意事项
|
|||
|
|
|
|||
|
|
1. **图片格式**：推荐使用PNG格式（支持透明）
|
|||
|
|
2. **图片大小**：控制在100KB以内
|
|||
|
|
3. **命名规范**：使用小写字母和连字符
|
|||
|
|
4. **路径引用**：使用相对路径，不要以`/`开头
|
|||
|
|
|
|||
|
|
## 🔧 当前状态
|
|||
|
|
|
|||
|
|
- ✅ 目录已创建
|
|||
|
|
- ⏳ 图标文件待添加
|
|||
|
|
- ⏳ 图片资源待添加
|
|||
|
|
|
|||
|
|
## 📌 下一步操作
|
|||
|
|
|
|||
|
|
1. 准备图标文件
|
|||
|
|
2. 放入对应目录
|
|||
|
|
3. 重新编译项目
|
|||
|
|
4. 测试显示效果
|
|||
|
|
|