167 lines
3.7 KiB
Markdown
167 lines
3.7 KiB
Markdown
# ⚡ 图标更新完整操作步骤
|
||
|
||
**时间：** 2026-01-26
|
||
**目标：** 更新家长端首页按钮图标
|
||
|
||
---
|
||
|
||
## ✅ 已完成的操作
|
||
|
||
1. ✅ 代码路径已更新为英文文件名
|
||
2. ✅ 图标文件已重命名为英文
|
||
3. ✅ 图标文件已从 `static/button/` 复制到 `src/static/button/`
|
||
|
||
---
|
||
|
||
## 🎯 接下来需要做的
|
||
|
||
### 方法 1：使用批处理脚本（推荐）
|
||
|
||
**双击运行：**
|
||
```
|
||
D:\project\peixu\Archive\peidu-temp-files\scripts\[一次性]清除缓存并重新编译-2026-01-26.bat
|
||
```
|
||
|
||
这个脚本会自动：
|
||
1. 删除 dist 目录
|
||
2. 删除 unpackage 目录
|
||
3. 删除 node_modules/.cache 目录
|
||
4. 重新编译项目
|
||
|
||
### 方法 2：手动操作
|
||
|
||
#### 步骤 1：删除编译产物
|
||
|
||
打开命令行，执行：
|
||
```bash
|
||
cd D:\project\peixu\peidu\uniapp
|
||
rmdir /s /q dist
|
||
rmdir /s /q unpackage
|
||
```
|
||
|
||
#### 步骤 2：重新编译
|
||
|
||
```bash
|
||
npm run dev:mp-weixin
|
||
```
|
||
|
||
#### 步骤 3：微信开发者工具
|
||
|
||
1. **清除缓存**
|
||
- 工具 → 清除缓存 → 清除全部缓存
|
||
|
||
2. **重新编译**
|
||
- 编译 → 重新编译
|
||
|
||
3. **强制刷新**
|
||
- 按 `Ctrl + Shift + R`
|
||
|
||
#### 步骤 4：查看效果
|
||
|
||
打开家长端首页，查看按钮图标是否已更新。
|
||
|
||
---
|
||
|
||
## 🔍 如果图标仍未更新
|
||
|
||
### 检查 1：确认文件内容
|
||
|
||
1. 打开 `D:\project\peixu\peidu\uniapp\src\static\button\`
|
||
2. 双击查看每个 .jpg 文件
|
||
3. 确认图片内容是否是你想要的
|
||
|
||
### 检查 2：确认文件名
|
||
|
||
确认以下文件都存在：
|
||
```
|
||
✓ companion.jpg
|
||
✓ summer-camp.jpg
|
||
✓ assessor.jpg
|
||
✓ planner.jpg
|
||
✓ parent-academy.jpg
|
||
✓ one-on-one.jpg
|
||
✓ study-tour.jpg
|
||
✓ special.jpg
|
||
✓ interest.jpg
|
||
✓ supervision.jpg
|
||
```
|
||
|
||
### 检查 3：重新复制文件
|
||
|
||
如果文件内容不对，手动复制：
|
||
|
||
1. 打开 `D:\project\peixu\peidu\uniapp\static\button\`
|
||
2. 选中所有 .jpg 文件
|
||
3. 复制（Ctrl + C）
|
||
4. 打开 `D:\project\peixu\peidu\uniapp\src\static\button\`
|
||
5. 粘贴并覆盖（Ctrl + V）
|
||
6. 重新执行清除缓存和编译
|
||
|
||
---
|
||
|
||
## 📊 目录结构说明
|
||
|
||
```
|
||
peidu/uniapp/
|
||
├── static/button/ ← 你的新图标存放位置
|
||
│ ├── companion.jpg
|
||
│ ├── summer-camp.jpg
|
||
│ └── ...
|
||
│
|
||
└── src/static/button/ ← 项目实际使用的位置 ⭐
|
||
├── companion.jpg ← 需要更新这里的文件
|
||
├── summer-camp.jpg
|
||
└── ...
|
||
```
|
||
|
||
**重要：** uni-app 项目使用的是 `src/static/` 目录！
|
||
|
||
---
|
||
|
||
## ✅ 完成标志
|
||
|
||
当你看到以下情况时，说明更新成功：
|
||
|
||
1. ✅ 微信开发者工具控制台无错误
|
||
2. ✅ 家长端首页10个按钮图标全部显示
|
||
3. ✅ 图标内容是新的图片（不是之前的图片）
|
||
4. ✅ 图标清晰，点击正常跳转
|
||
|
||
---
|
||
|
||
## 🎨 按钮对应关系
|
||
|
||
| 按钮位置 | 按钮标签 | 文件名 |
|
||
|---------|---------|--------|
|
||
| 第1行第1个 | 陪伴员 | companion.jpg |
|
||
| 第1行第2个 | 暑假营 | summer-camp.jpg |
|
||
| 第1行第3个 | 测评师 | assessor.jpg |
|
||
| 第1行第4个 | 成长规划师 | planner.jpg |
|
||
| 第1行第5个 | 家长学院 | parent-academy.jpg |
|
||
| 第2行第1个 | 一对一陪伴 | one-on-one.jpg |
|
||
| 第2行第2个 | 研学活动 | study-tour.jpg |
|
||
| 第2行第3个 | 专项突破 | special.jpg |
|
||
| 第2行第4个 | 兴趣培养 | interest.jpg |
|
||
| 第2行第5个 | 线上督学 | supervision.jpg |
|
||
|
||
---
|
||
|
||
## 💡 提示
|
||
|
||
### 缓存问题
|
||
微信小程序的缓存非常顽固，可能需要：
|
||
1. 清除微信开发者工具缓存
|
||
2. 删除编译产物（dist、unpackage）
|
||
3. 重新编译
|
||
4. 强制刷新（Ctrl + Shift + R）
|
||
|
||
### 图片格式
|
||
- 建议使用 .jpg 或 .png 格式
|
||
- 图片尺寸建议：200x200px 或更高
|
||
- 文件大小建议：小于 100KB
|
||
|
||
---
|
||
|
||
**创建时间：** 2026-01-26 18:05
|
||
**预计操作时间：** 3-5分钟
|