152 lines
4.2 KiB
Markdown
152 lines
4.2 KiB
Markdown
# 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 # 字体列表
|
||
```
|