font2pic/CDN-TEST-GUIDE.md

✅ CDN 部署完成 - 测试清单

📋 已完成项目

✅ Logo 部署

• https://fonts.biboer.cn/assets/webicon.png (127KB)

✅ 图标部署 (全部返回 HTTP 200)

• font-icon.svg
• font-size-decrease.svg
• font-size-increase.svg
• choose-color.svg
• checkbox.svg
• expand.svg
• selectall.svg
• unselectall.svg
• export.svg
• export-svg.svg
• export-png.svg

✅ 代码更新

• /miniprogram/config/cdn.js - CDN 配置文件
• /miniprogram/pages/index/index.js - 引入 CDN 配置
• /miniprogram/pages/index/index.wxml - 使用动态图标路径

🧪 测试步骤

1. 开发环境测试

在微信开发者工具中：

Step 1: 打开项目设置

• 点击右上角「详情」
• 选择「本地设置」标签页

Step 2: 关闭域名校验（开发阶段）

• ✅ 勾选「不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书」

Step 3: 重新编译

• 点击「编译」按钮重新加载页面
• 或按 Cmd+B (Mac) / Ctrl+B (Windows)

Step 4: 检查显示效果

检查项：
□ 顶部 logo 显示正常
□ 字体大小增减图标显示正常
□ 颜色选择器图标显示正常
□ 导出按钮图标（3个）显示正常
□ 字体树折叠图标显示正常
□ 字体图标显示正常
□ 复选框图标显示正常
□ 收藏图标显示正常

Step 5: 检查网络请求

• 打开「Network」面板
• 筛选「image」类型
• 确认所有请求指向 fonts.biboer.cn
• 确认所有请求返回 200 状态码

2. 如果图标不显示

检查 1: Console 错误信息

打开「Console」面板，查看是否有：
- 跨域错误 (CORS)
- 网络请求失败
- 其他 JavaScript 错误

检查 2: 网络请求详情

在 Network 面板中点击失败的请求，查看：
- Request URL: 是否正确
- Status Code: 是否为 200
- Response Headers: 是否包含正确的 Content-Type

检查 3: 代码路径

// 在 pages/index/index.js 的 onLoad 中打印
console.log('图标配置:', this.data.icons)

// 应该输出：
// {
//   logo: 'https://fonts.biboer.cn/assets/webicon.png',
//   fontIcon: 'https://fonts.biboer.cn/assets/icons/font-icon.svg',
//   ...
// }

3. 生产环境配置（发布前必做）

配置服务器域名白名单:

1. 登录 微信公众平台
2. 进入「开发管理」→「开发设置」→「服务器域名」
3. 在以下两个位置添加 https://fonts.biboer.cn:
   • request 合法域名
   • downloadFile 合法域名
4. 点击「保存并提交」
5. 等待生效（通常 5-10 分钟）

验证域名配置:

• 在微信开发者工具中「取消勾选」域名校验
• 点击「编译」
• 如果仍能正常显示，说明域名配置成功

📊 性能对比

使用 CDN 后的收益

指标	之前（本地 PNG）	现在（CDN SVG）	改善
小程序包大小	~ 50KB	~ 0KB	✅ -50KB
图标清晰度	PNG 栅格化	SVG 矢量	✅ 高清
更新维护	需重新发布	无需发布	✅ 便捷
首次加载速度	立即	~100ms	⚠️ 略慢
离线可用性	✅ 可用	❌ 需网络	⚠️ 牺牲

资源加载时间 (平均)

• Logo (PNG, 127KB): ~150ms
• 每个图标 (SVG, ~2KB): ~50ms
• 总计首次加载: ~700ms (并行请求)
• 后续加载: ~0ms (浏览器缓存)

🔍 故障排查快速索引

问题 1: 所有图标都不显示

原因：data.icons 未正确初始化
解决：检查 index.js 中是否正确引入 cdn.js

问题 2: 部分图标显示，部分不显示

原因：服务器上文件缺失或路径错误
解决：验证 CDN URL 能否在浏览器中直接访问

问题 3: 开发环境正常，真机预览不显示

原因：未配置服务器域名白名单
解决：在小程序后台添加 fonts.biboer.cn 到合法域名

问题 4: 图标加载很慢

原因：CDN 未开启 GZIP 压缩或缓存策略不当
解决：检查 nginx 配置，开启 GZIP 和浏览器缓存

🎯 下一步行动

1. ⚡ 立即测试 - 在微信开发者工具中验证显示效果
2. 📱 真机预览 - 使用手机微信扫码预览
3. 🔧 配置域名 - 在小程序后台添加合法域名（生产必需）
4. 🚀 准备发布 - 确认所有功能正常后提交审核

📞 需要帮助？

如果遇到问题，请提供以下信息：

• 微信开发者工具 Console 截图
• Network 面板请求详情截图
• 具体报错信息
• 是否在真机还是模拟器测试