Y Yuan Tools
2026/7/4

第二个工具：二维码生成器的设计与实现

第二个小工具选择做二维码生成器，是因为它足够日常、足够轻量，也很适合验证 Web 在线版和 Windows 桌面版的复用开发流程。

第二个工具：二维码生成器的设计与实现

做完第一个“图片打码工具”之后，我开始考虑第二个小工具应该选什么。

第一个工具偏图片处理，有导入、多图列表、画布编辑、撤销、保存状态这些交互细节。它证明了一件事：我可以把一个真实需求做成 Web 在线版和 Windows 桌面版。第二个工具我想换一个方向，做一个更轻、更日常、更容易被访问者马上理解的小工具。

最后我选了二维码生成器。

项目名：

yuan-qr-generator

中文名：

二维码生成器

本地目录：

D:\dev\yuan-tools\yuan-qr-generator

为什么是二维码生成器

二维码是一个很适合作为小工具的题目。

它不需要复杂的账号体系，也不需要后端服务。用户打开页面，输入内容，马上看到结果，然后导出 PNG 或 SVG。这种工具特别适合放在个人博客里：访问者不需要下载，不需要注册，进来就能用。

从使用场景看，二维码也足够广：

  • 分享个人主页或文章链接。
  • 分享 Wi-Fi 网络。
  • 分享联系方式。
  • 分享地图位置。
  • 分享日历活动。
  • 分享文件、应用、加群、作品集等链接。
  • 临时生成一段文本或自定义内容。

这类工具的价值不在于概念新，而在于它是不是足够顺手、足够快、足够清楚。

先确定支持哪些二维码类型

我一开始的要求是：分析什么东西可以生成二维码，然后把所有常见类型都加上。

最终第一版支持 11 类：

类型用途
纯文本短文字、口令、备注
网址网页、文章、个人主页、在线工具
邮箱收件人、主题、正文草稿
电话扫码后直接拨号
短信手机号和短信内容
Wi-Fi扫码连接无线网络
联系人 vCard姓名、电话、邮箱、公司、网站
地理位置经纬度定位
日历事件活动标题、时间、地点和说明
分享链接社交主页、文件下载、支付收款、应用下载、加群邀请、作品集
原始内容高级用户直接输入完整二维码内容

这个分类的好处是，它既覆盖了普通用户最常见的需求，也给高级用户留了一个“原始内容”的出口。

工具流程

这个工具的主流程很短：

flowchart LR
  A["选择二维码类型"] --> B["填写内容"]
  B --> C["实时生成预览"]
  C --> D["调整尺寸、颜色、纠错等级"]
  D --> E["导出 PNG 或 SVG"]

交互上我刻意避免把它做成复杂的表单系统。左侧是模板列表，中间是当前模板的输入项和样式设置，右侧是二维码预览和导出按钮。

这种三栏结构在桌面端很清楚：用户先选类型，再填内容，最后看结果。移动端则会自动变成纵向布局。

为什么坚持本地生成

二维码里可能包含很多敏感内容，比如 Wi-Fi 密码、手机号、邮箱、联系人信息、内部链接。

所以这个工具默认不上传用户输入。Web 版在浏览器中生成，桌面版在本地 WebView 中生成。对一个小工具来说，这不仅是技术选择，也是产品信任的一部分。

我在使用说明里也写清楚了：工具不会主动上传内容，但二维码图片本身包含用户输入的信息。如果用户把二维码公开分享，对方扫码就能读取其中内容。

技术实现

这个项目仍然沿用当前的标准小工具架构：

Svelte + TypeScript + Vite
Tauri v2 + Rust
Vitest

二维码编码没有手写，而是使用成熟的 qrcode npm 包。二维码这种领域已经有稳定库，自己从零实现编码规则没有必要，也容易出错。

我把内容拼接和校验逻辑放在：

src/lib/core/qr-content.ts

里面负责几类事情：

  • 不同二维码类型的默认表单值。
  • URL 自动补全 https://。
  • Wi-Fi、vCard、geo、VEVENT 等格式拼接。
  • 必填项校验。
  • 经纬度范围校验。
  • 导出文件名生成。

核心逻辑有对应的 Vitest 测试：

tests/qr-content.test.ts

测试覆盖了 URL 规范化、Wi-Fi 特殊字符转义、vCard 拼接、坐标校验和导出文件名。

Web 和桌面版输出

这个项目仍然保持统一 release 目录：

release/html
release/win

Web 版构建时继续使用 Vite 的相对资源路径：

base: "./"

这样生成的 index.html 不会引用 /assets/...，后续放到博客平台的子路径里也不会出现 CSS 和 JS 404。

桌面版通过 Tauri 打包，release 版 EXE 仍然配置为隐藏终端窗口：

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

本次本地已经生成：

D:\dev\yuan-tools\yuan-qr-generator\release\html
D:\dev\yuan-tools\yuan-qr-generator\release\win\yuan-qr-generator.exe

发布地址

这次工具发布到独立 GitHub 仓库：

https://github.com/yuan0727/yuan-qr-generator

第一版 Release：

https://github.com/yuan0727/yuan-qr-generator/releases/tag/v0.1.0

Release 里包含三个文件：

  • yuan-qr-generator-win-v0.1.0.exe
  • yuan-qr-generator-web-v0.1.0.zip
  • yuan-qr-generator-guide-v0.1.0.md

这次相比第一个工具更顺的一点

做第二个工具时，我明显感觉到流程已经在复用。

第一个工具时，需要一边做功能，一边讨论项目目录、中文命名、README、使用说明、release 目录、EXE 隐藏终端、GitHub 仓库策略、博客平台接入方式。

到了二维码生成器，很多事情已经变成规则：

  • 项目目录直接放在 D:\dev\yuan-tools。
  • 项目名用英文：yuan-qr-generator。
  • 用户看到的工具名用中文：二维码生成器。
  • Web 和桌面共用一套 UI。
  • README.md 放项目根目录，不打包进 release。
  • 工具使用说明.md 复制到 Web 和 Windows release。
  • Web 静态包必须能在博客子路径加载。
  • 后续发布到独立 GitHub 仓库，再更新 yuan-tools 总索引。

这就是流程沉淀的意义：每次都做新工具，但不是每次都从零开始。

后续可以继续增强什么

二维码生成器第一版已经够用，但它还有很自然的增强方向：

  • 增加批量生成。
  • 增加 Logo 嵌入。
  • 增加圆点、圆角定位点等样式。
  • 增加扫码校验提示。
  • 增加本地最近使用记录。
  • 增加更多业务模板，比如收款码说明页、活动报名页、名片页。

这些增强可以等工具上线后，根据访问和使用情况再决定优先级。第一版最重要的目标，是把常见二维码类型覆盖完整，把在线版和桌面版都交付出来。

小结

二维码生成器是 yuan-tools 的第二个真实工具。

它比图片打码工具更轻，但覆盖面更广；它没有复杂图像编辑，却更适合在线访问和日常分享。对我的长期计划来说，它补上了一个很重要的工具类型：简单、快速、低门槛、容易被博客流量使用。

这次发布完成后，yuan-tools 就不再只有一个工具。它开始从“第一条链路跑通”，进入“持续增加工具库”的阶段。