我如何打造了一个隐私优先的 vCard QR码生成器（无需后端）

Source: Dev.to

为什么我会构建它

我尝试的每个二维码生成器都要我提供邮箱、推送订阅，或把我的联系信息存到他们的服务器上。 我需要一种简单的方式，通过二维码在名片上分享我的联系信息，而不出现这些缺点。

限制条件

• 无后端 —— 所有操作都在浏览器中完成。
• 你的联系信息永远不会离开你的设备。

技术栈

• HTML/CSS – 原生，无框架
• Tailwind CSS – 通过 CDN 引入进行样式化
• qrcode.js – 客户端二维码生成
• qr-code-styling – 用于徽标叠加功能
• GitHub Pages + Cloudflare – 免费托管并使用全球 CDN

什么是 vCard

vCard 只是一种纯文本格式，用于存储联系信息。例如：

john@example.com

当这段字符串被编码成二维码时，手机会识别出 vCard 格式并提供保存联系人选项。

示例代码（JavaScript）

// Generate a vCard string
const generateVCard = (name, phone, email, company) => {
  const [first, ...rest] = name.split(' ');
  const last = rest.join(' ');

  return `BEGIN:VCARD
VERSION:3.0
N:${last};${first};;;
FN:${name}
ORG:${company}
TEL;TYPE=WORK:${phone}
EMAIL:${email}
END:VCARD`;
};

// Generate QR code client‑side
const qrcode = new QRCode(document.getElementById('qr'), {
  text: generateVCard('John Doe', '+15551234567', 'john@example.com', 'Acme'),
  width: 256,
  height: 256,
  correctLevel: QRCode.CorrectLevel.H
});

就这么简单——没有 API 调用，没有数据库，没有用户账户。

变现（无需订阅）

• 徽标叠加 – 在二维码上添加你的公司徽标。

我的收获

如果你想了解实现细节，源码已在 GitHub 上公开（请替换为实际的仓库 URL）。