Files
font2pic/miniprogram
2026-02-11 12:10:49 +08:00
..
2026-02-10 17:57:43 +08:00
2026-02-10 14:10:20 +08:00
2026-02-08 18:28:39 +08:00
2026-02-11 12:10:49 +08:00
2026-02-11 12:10:49 +08:00
2026-02-10 14:10:20 +08:00
2026-02-08 18:28:39 +08:00
2026-02-08 18:28:39 +08:00
2026-02-08 18:28:39 +08:00
2026-02-09 10:22:44 +08:00
2026-02-10 17:03:44 +08:00
2026-02-08 18:28:39 +08:00
2026-02-09 10:22:44 +08:00

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

使用步骤

  1. 在仓库根目录执行 pnpm run prepare-fonts,同步字体清单。
  2. 打开微信开发者工具,导入 miniprogram/ 目录。
  3. 在小程序后台配置合法域名(request + downloadFile)。
  4. 部署并启动 apiserver/(详见 apiserver/README.md)。
  5. Nginx 配置 /api/ 反向代理到渲染服务。
  6. 编译运行。

服务器配置(换服务器只改一处)

修改 miniprogram/config/server.js 中的 SERVER_CONFIG

  • protocol: https / http
  • host: 服务器域名
  • 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.jsonA、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: 字体唯一 ID
  • name: 字体显示名
  • 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