125 lines
4.6 KiB
Markdown
125 lines
4.6 KiB
Markdown
# 小程序图标修复清单
|
||
|
||
## 修复时间
|
||
2026年2月9日（最后更新）
|
||
|
||
## 问题
|
||
所有图标在小程序预览中都无法显示
|
||
|
||
## 根本原因
|
||
1. 使用了相对路径 `../../assets/icons/` 而不是绝对路径
|
||
2. 某些图标文件名包含空格（如 `icons_idx _32.svg`），在某些情况下可能导致路径解析问题
|
||
|
||
## 解决方案
|
||
|
||
### 1. 图标路径修复
|
||
所有图标路径已从相对路径改为绝对路径：
|
||
- ❌ 旧: `../../assets/icons/xxx.svg`
|
||
- ✅ 新: `/assets/icons/xxx.svg`
|
||
|
||
### 2. Logo 更新
|
||
- ✅ 右上角 logo 已改用 `webicon.png`
|
||
- 路径: `/assets/icons/webicon.png`
|
||
|
||
### 3. 图标映射（最新）
|
||
已使用的图标及其用途：
|
||
|
||
| 图标文件 | 用途 | 位置 |
|
||
|---------|------|------|
|
||
| `webicon.png` | 应用 Logo | 顶部导航栏左上角 |
|
||
| `font-size-decrease.svg` | 减小字号 | 字体大小滑块左侧 |
|
||
| `font-size-increase.svg` | 增大字号 | 字体大小滑块右侧 |
|
||
| `choose-color.svg` | 颜色选择器 | 顶部导航栏右侧 |
|
||
| `font-icon.svg` | 字体图标 | 预览列表、字体树列表项 |
|
||
| `checkbox.svg` | 复选框选中状态 | 字体选择复选框（选中时显示） |
|
||
| `checkbox-no.svg` | 复选框未选中状态 | 字体选择复选框（未选中时显示） |
|
||
| `expand.svg` | 展开/收起 | 字体分类树 |
|
||
| `selectall.svg` | 全选图标 | 分类标题右侧（未全选时显示） |
|
||
| `unselectall.svg` | 取消全选图标 | 分类标题右侧（已全选时显示） |
|
||
| `favorite.svg` | 未收藏 | 收藏按钮（白色心形） |
|
||
| `favorite-red.svg` | 已收藏 | 收藏按钮（红色心形） |
|
||
| `download.svg` | 下载图标 | 预览项导出按钮区域 |
|
||
| `export-svg-s.svg` | SVG 导出 | 预览项 SVG 导出按钮 |
|
||
| `export-png-s.svg` | PNG 导出 | 预览项 PNG 导出按钮 |
|
||
| `search.svg` | 搜索图标 | 搜索框右侧按钮 |
|
||
| `content.svg` | 内容图标 | 输入框左侧 |
|
||
|
||
### 4. 复选框实现（已更新）
|
||
复选框现在始终显示图标，根据状态切换不同图标：
|
||
|
||
```xml
|
||
<view class="font-checkbox" bindtap="onToggleFont" data-font-id="{{item.id}}">
|
||
<image class="checkbox-icon-sm" src="{{item.selected ? icons.checkboxChecked : icons.checkbox}}" />
|
||
</view>
|
||
```
|
||
|
||
图标配置（index.js）：
|
||
```javascript
|
||
const LOCAL_ICON_PATHS = {
|
||
checkbox: '/assets/icons/checkbox-no.svg', // 未选中
|
||
checkboxChecked: '/assets/icons/checkbox.svg', // 选中
|
||
// ...
|
||
}
|
||
```
|
||
|
||
### 5. 收藏图标实现
|
||
收藏按钮根据状态显示不同颜色的心形图标：
|
||
|
||
```xml
|
||
<view class="favorite-btn" bindtap="onToggleFavorite" data-font-id="{{font.id}}">
|
||
<image class="favorite-icon" src="{{font.isFavorite ? icons.favoriteRedIcon : icons.favoriteIcon}}" />
|
||
</view>
|
||
```
|
||
|
||
## 修改的文件
|
||
|
||
1. **index.wxml**
|
||
- 所有图标路径更新为绝对路径
|
||
- Logo 改为 webicon.png
|
||
- 复选框结构简化（始终显示图标）
|
||
- 收藏图标根据状态切换
|
||
- 新增版权说明
|
||
|
||
2. **index.wxss**
|
||
- 统一边框颜色为 `#3EE4C3`
|
||
- 优化选择/已收藏区域布局（flex fill）
|
||
- 统一容器 padding 为 8rpx
|
||
- 新增版权样式
|
||
|
||
3. **index.js**
|
||
- LOCAL_ICON_PATHS 配置更新
|
||
- 搜索框默认展开（showSearch: true）
|
||
- bootstrap() 中修复字体选中状态同步
|
||
|
||
## 验证清单
|
||
|
||
请在微信开发者工具中验证以下内容：
|
||
|
||
- [ ] 顶部 Logo (webicon.png) 正常显示
|
||
- [ ] 字体大小增减图标正常显示
|
||
- [ ] 颜色选择图标正常显示
|
||
- [ ] 预览列表中的字体图标正常显示
|
||
- [ ] 预览列表中的导出按钮（download、SVG、PNG）正常显示
|
||
- [ ] 搜索框默认完整展开显示
|
||
- [ ] 字体选择列表中的展开/收起图标正常显示
|
||
- [ ] 字体选择列表中的复选框正常显示（选中/未选中两种状态）
|
||
- [ ] 字体选择列表中的收藏图标正常显示（红心/白心）
|
||
- [ ] 分类标题右侧的全选/取消全选图标正常显示
|
||
- [ ] 已收藏字体列表中的所有图标正常显示
|
||
- [ ] 预览区和选择区边框颜色为 #3EE4C3
|
||
- [ ] 底部版权说明正常显示
|
||
|
||
## 注意事项
|
||
|
||
1. **路径规范**：小程序中使用绝对路径 `/assets/icons/xxx.svg` 会从项目根目录开始查找
|
||
2. **SVG 支持**：微信小程序的 `<image>` 组件支持 SVG 格式
|
||
3. **文件名**：避免使用包含空格的文件名，可能在某些情况下导致问题
|
||
4. **图标尺寸**：所有图标已按照 Figma 设计稿的尺寸设置 CSS
|
||
|
||
## 如果图标仍不显示
|
||
|
||
1. 清除缓存：微信开发者工具 -> 工具 -> 清除缓存
|
||
2. 重新编译：点击"编译"按钮
|
||
3. 检查控制台：查看是否有资源加载错误
|
||
4. 验证文件：确认 `/miniprogram/assets/icons/` 目录下所有图标文件存在
|