# 🔍 图标显示问题排查指南

## 问题现象
微信开发者工具中看不到图标和 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. 是否有任何报错信息