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. 测试显示效果
|
||
|