182 lines
4.3 KiB
Markdown
182 lines
4.3 KiB
Markdown
# 🔍 图标显示问题排查指南
|
||
|
||
## 问题现象
|
||
微信开发者工具中看不到图标和 logo
|
||
|
||
## 📋 排查步骤
|
||
|
||
### Step 1: 检查开发者工具设置
|
||
|
||
1. 打开微信开发者工具
|
||
2. 点击右上角「详情」按钮
|
||
3. 选择「本地设置」标签
|
||
4. **必须勾选**：「不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书」
|
||
|
||
### Step 2: 查看 Console 日志
|
||
|
||
1. 打开「Console」面板（底部标签）
|
||
2. 点击「编译」重新加载页面
|
||
3. 查找以下输出：
|
||
|
||
```
|
||
========== 图标配置 ==========
|
||
icons: {logo: "https://fonts.biboer.cn/...", ...}
|
||
logo URL: https://fonts.biboer.cn/assets/webicon.png
|
||
============================
|
||
```
|
||
|
||
**如果看不到这些日志**：
|
||
- 说明 CDN 配置文件加载失败
|
||
- 检查 `/miniprogram/config/cdn.js` 文件是否存在
|
||
|
||
### Step 3: 检查 Network 请求
|
||
|
||
1. 打开「Network」面板
|
||
2. 筛选器选择「All」或「Img」
|
||
3. 重新编译页面
|
||
4. 查看是否有对 `fonts.biboer.cn` 的请求
|
||
|
||
**如果没有请求**：
|
||
- 说明 WXML 中没有正确绑定数据
|
||
- 检查 `{{icons.logo}}` 语法是否正确
|
||
|
||
**如果有请求但失败**：
|
||
- 查看 Status Code（应为 200）
|
||
- 查看错误信息（跨域/域名校验等）
|
||
|
||
### Step 4: 检查图片组件错误
|
||
|
||
在 WXML 中添加错误处理：
|
||
|
||
```xml
|
||
<image
|
||
class="logo"
|
||
src="{{icons.logo}}"
|
||
mode="aspectFit"
|
||
binderror="onImageError"
|
||
bindload="onImageLoad"
|
||
/>
|
||
```
|
||
|
||
在 JS 中添加：
|
||
|
||
```javascript
|
||
onImageError(e) {
|
||
console.error('图片加载失败:', e.detail)
|
||
},
|
||
|
||
onImageLoad(e) {
|
||
console.log('图片加载成功:', e.currentTarget.dataset)
|
||
}
|
||
```
|
||
|
||
## 🔧 快速修复方案
|
||
|
||
### 方案 A: 使用本地 PNG (临时方案)
|
||
|
||
如果 CDN 图标始终无法显示，先恢复使用本地 PNG：
|
||
|
||
```javascript
|
||
// pages/index/index.js 的 data 中
|
||
icons: {
|
||
logo: '/assets/icons/webicon.png',
|
||
fontIcon: '/assets/icons/font-icon.png',
|
||
export: '/assets/icons/export.png',
|
||
exportSvg: '/assets/icons/export-svg.png',
|
||
exportPng: '/assets/icons/export-png.png',
|
||
fontSizeDecrease: '/assets/icons/font-size-decrease.png',
|
||
fontSizeIncrease: '/assets/icons/font-size-increase.png',
|
||
chooseColor: '/assets/icons/choose-color.png',
|
||
expand: '/assets/icons/expand.png',
|
||
selectAll: '/assets/icons/selectall.png',
|
||
unselectAll: '/assets/icons/unselectall.png',
|
||
checkbox: '/assets/icons/checkbox.png'
|
||
}
|
||
```
|
||
|
||
删除 CDN 配置的引入：
|
||
```javascript
|
||
// 注释掉或删除这行
|
||
// const { ICON_PATHS } = require('../../config/cdn')
|
||
```
|
||
|
||
### 方案 B: 检查 CDN 配置加载
|
||
|
||
在 `pages/index/index.js` 第一行添加：
|
||
|
||
```javascript
|
||
console.log('开始加载页面模块...')
|
||
|
||
try {
|
||
const cdnConfig = require('../../config/cdn')
|
||
console.log('CDN 配置加载成功:', cdnConfig)
|
||
} catch (error) {
|
||
console.error('CDN 配置加载失败:', error)
|
||
}
|
||
```
|
||
|
||
## 🎯 常见错误及解决
|
||
|
||
### 错误 1: require is not defined
|
||
```
|
||
原因：路径错误或文件不存在
|
||
解决：确认 config/cdn.js 文件存在且路径正确
|
||
```
|
||
|
||
### 错误 2: Cannot read property 'logo' of undefined
|
||
```
|
||
原因：ICON_PATHS 没有正确导出或导入
|
||
解决：检查 cdn.js 的 module.exports 和引入语句
|
||
```
|
||
|
||
### 错误 3: net::ERR_CERT_AUTHORITY_INVALID
|
||
```
|
||
原因：HTTPS 证书问题
|
||
解决：勾选「不校验合法域名...」选项
|
||
```
|
||
|
||
### 错误 4: 图标显示为裂图/叉号
|
||
```
|
||
原因：
|
||
1. URL 错误（404）
|
||
2. 跨域问题
|
||
3. 图片格式不支持
|
||
|
||
解决：
|
||
1. 在浏览器中直接访问 URL 验证
|
||
2. 检查服务器 CORS 配置
|
||
3. 确认小程序支持该格式（PNG/SVG）
|
||
```
|
||
|
||
## 📱 测试命令
|
||
|
||
在终端测试 CDN 是否可访问：
|
||
|
||
```bash
|
||
# 测试 logo
|
||
curl -I https://fonts.biboer.cn/assets/webicon.png
|
||
|
||
# 测试图标
|
||
curl -I https://fonts.biboer.cn/assets/icons/export.svg
|
||
|
||
# 应该返回 HTTP/2 200
|
||
```
|
||
|
||
## 🚀 最终检查清单
|
||
|
||
在提交前确认：
|
||
|
||
- [ ] 微信开发者工具已勾选「不校验合法域名」
|
||
- [ ] Console 中输出了图标配置信息
|
||
- [ ] Network 中看到了对 fonts.biboer.cn 的请求
|
||
- [ ] 所有请求返回 200 状态码
|
||
- [ ] 图标在页面上正常显示
|
||
- [ ] 手机真机预览也能看到图标
|
||
|
||
## 💡 下一步
|
||
|
||
如果以上步骤都检查完毕仍无法显示，请提供：
|
||
1. Console 面板的完整输出
|
||
2. Network 面板的请求列表截图
|
||
3. 是否有任何报错信息
|