gavin/font2pic

Fork 0

Files

douboer 0f5a7f0d85 update at 2026-02-08 18:28:39

2026-02-08 18:28:39 +08:00

4.2 KiB

Raw Blame History

CDN 图标部署指南

📦 部署流程

1. 部署图标到服务器

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. 测试小程序

在微信开发者工具中：

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

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

在微信小程序后台配置：

登录微信公众平台
开发管理 → 开发设置 → 服务器域名
将 https://fonts.biboer.cn 添加到：
- request 合法域名
- downloadFile 合法域名
保存配置，等待生效（可能需要几分钟）

🎯 优势对比

使用 CDN 方案

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

本地资源方案

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

📝 配置文件说明

`/miniprogram/config/cdn.js`

统一管理所有 CDN 资源路径：

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：

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

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

`/miniprogram/pages/index/index.wxml`

使用数据绑定引用图标：

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

🔄 更新图标流程

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

🚨 注意事项

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

📊 性能对比

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

🛠️ 故障排查

图标不显示

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

部署失败

检查 SSH 连接：ssh gavin@fonts.biboer.cn
检查目录权限：服务器上 /home/gavin/font2svg/assets/
检查本地文件：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              # 字体列表

4.2 KiB Raw Blame History Unescape Escape