121 lines
4.2 KiB
Markdown
121 lines
4.2 KiB
Markdown
# miniprogram
|
||
|
||
`miniprogram/` 是 `font2svg` 的微信小程序版本，面向移动端提供字体预览与导出能力。
|
||
|
||
## 已实现能力
|
||
|
||
- 文本输入 + 字体选择（搜索/分类/收藏）
|
||
- 远端 API 生成 SVG（服务端读取字体并渲染）
|
||
- SVG 预览
|
||
- 导出 SVG 并调用 `wx.shareFileMessage` 分享
|
||
- 远端 API 生成 PNG，保存到系统相册
|
||
|
||
## 目录说明
|
||
|
||
```text
|
||
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.json`（A、B 都部署）示例：
|
||
|
||
```json
|
||
{
|
||
"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`）
|
||
- 配置只在首次加载生效，后续始终使用用户本地已保存配置（选择、收藏、颜色、字号、内容）
|
||
|
||
示例：
|
||
|
||
```json
|
||
{
|
||
"inputText": "星程字体转换",
|
||
"fontSize": 50,
|
||
"textColor": "#dc2626",
|
||
"selectedFontIds": ["0001"],
|
||
"favoriteFontIds": ["0001"]
|
||
}
|
||
```
|
||
|
||
## 调试命令（仓库根目录）
|
||
|
||
```bash
|
||
pnpm run mp:syntax
|
||
pnpm run mp:lint
|
||
pnpm run mp:test
|
||
```
|