# CDN 图标部署指南

## 📦 部署流程

### 1. 部署图标到服务器

```bash
cd /Users/gavin/font2svg
./scripts/deploy-assets.sh
```

部署脚本会自动：
- 上传所有 SVG 图标到 `fonts.biboer.cn/assets/icons/`
- 上传 PNG logo 到 `fonts.biboer.cn/assets/`
- 设置正确的文件权限
- 验证部署结果

### 2. 验证部署

部署完成后，可以通过浏览器访问以下地址验证：

```
https://fonts.biboer.cn/assets/webicon.png
https://fonts.biboer.cn/assets/icons/export.svg
https://fonts.biboer.cn/assets/icons/font-icon.svg
```

### 3. 测试小程序

在微信开发者工具中：
1. 点击「详情」- 「本地设置」
2. ✅ 勾选「不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书」（开发阶段）
3. 点击「编译」重新加载页面
4. 检查图标是否正常显示

### 4. 配置服务器域名（生产环境）

在微信小程序后台配置：
1. 登录 [微信公众平台](https://mp.weixin.qq.com/)
2. 开发管理 → 开发设置 → 服务器域名
3. 将 `https://fonts.biboer.cn` 添加到：
   - **request 合法域名**
   - **downloadFile 合法域名**
4. 保存配置，等待生效（可能需要几分钟）

## 🎯 优势对比

### 使用 CDN 方案
✅ **小程序包体积减小** - 图标不占用包大小  
✅ **SVG 高清显示** - 网络地址支持 SVG 格式  
✅ **便于更新维护** - 更新图标无需重新发布小程序  
✅ **统一资源管理** - 字体和图标同一个 CDN  

### 本地资源方案
❌ 占用包大小（约 50KB 图标）  
❌ 需要使用 PNG 格式（SVG 不支持本地）  
❌ 更新需要重新发布  
✅ 离线可用  

## 📝 配置文件说明

### `/miniprogram/config/cdn.js`
统一管理所有 CDN 资源路径：

```javascript
const ICON_PATHS = {
  logo: 'https://fonts.biboer.cn/assets/webicon.png',
  fontSizeDecrease: 'https://fonts.biboer.cn/assets/icons/font-size-decrease.svg',
  // ... 其他图标
}
```

### `/miniprogram/pages/index/index.js`
引入配置并添加到 data：

```javascript
const { ICON_PATHS } = require('../../config/cdn')

Page({
  data: {
    icons: ICON_PATHS,
    // ...
  }
})
```

### `/miniprogram/pages/index/index.wxml`
使用数据绑定引用图标：

```xml
<image src="{{icons.logo}}" />
<image src="{{icons.export}}" />
```

## 🔄 更新图标流程

1. 修改本地 `assets/icons/` 中的 SVG 文件
2. 运行部署脚本：`./scripts/deploy-assets.sh`
3. 小程序无需重新发布，刷新即可看到新图标

## 🚨 注意事项

1. **HTTPS 要求**：小程序只能加载 HTTPS 资源
2. **域名配置**：生产环境必须在小程序后台配置合法域名
3. **缓存策略**：CDN 资源可能有缓存，更新后清除浏览器缓存
4. **文件大小**：建议 SVG 图标控制在 10KB 以内，确保快速加载
5. **兼容性**：保留本地 PNG 作为备用方案（可选）

## 📊 性能对比

| 项目 | 本地 PNG | CDN SVG |
|------|---------|---------|
| 包大小影响 | +50KB | 0KB |
| 首次加载 | 立即显示 | ~100ms（网络） |
| 图标清晰度 | 一般 | 高清 |
| 更新成本 | 重新发布 | 无需发布 |

## 🛠️ 故障排查

### 图标不显示
1. 检查网络请求：开发者工具 → Network
2. 验证 CDN 地址：浏览器直接访问
3. 检查域名配置：后台是否添加合法域名
4. 清除缓存：微信开发者工具「清除缓存」

### 部署失败
1. 检查 SSH 连接：`ssh gavin@fonts.biboer.cn`
2. 检查目录权限：服务器上 `/home/gavin/font2svg/assets/`
3. 检查本地文件：`assets/icons/` 是否存在

## 📦 服务器目录结构

```
/home/gavin/font2svg/
├── assets/
│   ├── webicon.png          # 小程序 logo
│   └── icons/
│       ├── export.svg
│       ├── export-svg.svg
│       ├── export-png.svg
│       ├── font-icon.svg
│       ├── expand.svg
│       ├── font-size-decrease.svg
│       ├── font-size-increase.svg
│       ├── choose-color.svg
│       ├── selectall.svg
│       ├── unselectall.svg
│       └── checkbox.svg
├── fonts/                   # 字体文件
└── fonts.json              # 字体列表
```