miniprogram
miniprogram/ 是 font2svg 的微信小程序版本,面向移动端提供字体预览与导出能力。
已实现能力
- 文本输入 + 字体选择(搜索/分类/收藏)
- 远端 API 生成 SVG(服务端读取字体并渲染)
- SVG 预览
- 导出 SVG 并调用
wx.shareFileMessage分享 - 远端 API 生成 PNG,保存到系统相册
目录说明
miniprogram/
├── pages/
│ ├── index/ # 首页:输入、预览、导出
│ └── font-picker/ # 字体选择页
├── config/
│ └── server.js # 远端地址/端口/API 路径统一配置
├── utils/
│ ├── core/ # 纯算法模块
│ └── mp/ # 小程序 API 适配层(含 route-manager)
├── assets/fonts.json # 字体清单(由脚本生成)
├── assets/default.json # 首次加载默认配置(内容/颜色/字号/默认字体)
├── assets/route-config.json # 手动切换 A/B 服务器配置
├── app.js / app.json / app.wxss
└── project.config.json
使用步骤
- 在仓库根目录执行
pnpm run prepare-fonts,同步字体清单。 - 打开微信开发者工具,导入
miniprogram/目录。 - 在小程序后台配置合法域名(
request+downloadFile)。 - 部署并启动
apiserver/(详见apiserver/README.md)。 - Nginx 配置
/api/反向代理到渲染服务。 - 编译运行。
服务器配置(换服务器只改一处)
修改 miniprogram/config/server.js 中的 SERVER_CONFIG:
protocol:https/httphost: 服务器域名port: 端口(默认 443/80 可留空)apiPrefix: API 前缀(默认/api)fontsManifestPath: 字体清单路径(默认/miniprogram/assets/fonts.json)defaultConfigPath: 默认配置路径(默认/miniprogram/assets/default.json)routeConfigPath: 路由配置路径(默认/miniprogram/assets/route-config.json)
app.js 和 API 调用会自动使用该配置生成完整 URL。
手动切换 A/B 服务器(无需发版)
远端 route-config.json(A、B 都部署)示例:
{
"active": "A",
"cooldownMinutes": 10,
"servers": {
"A": { "baseUrl": "https://fonts.biboer.cn" },
"B": { "baseUrl": "https://mac-tunnel.biboer.cn" }
}
}
- 冷启动时先读取当前服务器的
route-config.json。 - 若发现
active指向另一台服务器,会读取目标服务器配置做“双确认”。 - 仅当目标服务器也返回相同
active,并且满足cooldownMinutes,才切换。 - 回前台会按 60 秒节流检查一次;API/配置请求失败时会触发一次兜底检查。
导出说明
SVG:受微信限制,shareFileMessage需由单次点击直接触发,建议逐个字体导出。PNG:由服务端POST /api/render-png直接返回二进制,小程序仅负责保存到相册。
字体清单格式(由服务端解析)
assets/fonts.json 每项字段:
id: 字体唯一 IDname: 字体显示名category: 分类path: 字体地址(支持相对路径或完整 URL)
如果 path 是相对路径(例如 /fonts/a.ttf),服务端会根据静态根目录拼接到实际文件路径。
推荐部署结构:
- 字体目录统一放在服务器根目录:
/fonts/ - Web 配置文件独立管理:
/fonts.json(可选/default.json) - 小程序配置文件独立管理:
/miniprogram/assets/fonts.json、/miniprogram/assets/default.json
首次默认配置(default.json)
- 默认配置文件与
fonts.json同目录:由config/server.js自动拼接(默认是https://fonts.biboer.cn/miniprogram/assets/default.json) - 小程序会在首次加载时读取该配置(远端失败则回退本地
miniprogram/assets/default.js) - 配置只在首次加载生效,后续始终使用用户本地已保存配置(选择、收藏、颜色、字号、内容)
示例:
{
"inputText": "星程字体转换",
"fontSize": 50,
"textColor": "#dc2626",
"selectedFontIds": ["0001"],
"favoriteFontIds": ["0001"]
}
调试命令(仓库根目录)
pnpm run mp:syntax
pnpm run mp:lint
pnpm run mp:test