我构建了一个 QR Code API,以下是我的收获

发布: (2025年12月18日 GMT+8 04:19)
4 min read
原文: Dev.to

Source: Dev.to

《我构建了一个二维码 API 并分享我的学习心得》封面图片

API

极其简单。只有一个端点:

GET https://api.qrcodeapi.io/generate?data=&size=

它返回一个二维码图片。

参数选项

参数
formatpngsvgbase64
size1001000 px
color二维码的十六进制颜色(例如 #8b5cf6
bgColor背景的十六进制颜色(或 transparent
errorCorrectionLMQH

示例(紫色二维码在透明背景上)

curl "https://api.qrcodeapi.io/generate?data=hello&color=8b5cf6&bgColor=transparent&format=svg"

动态二维码

静态二维码在目标 URL 不需要更改时可以使用——但一旦需要更改目标 URL,就必须重新打印所有内容。动态二维码指向您可控制的重定向 URL,这样您可以随时更改目标,而无需触碰已打印的二维码。

创建动态链接

// Create a dynamic link
const response = await fetch('https://api.qrcodeapi.io/links', {
  method: 'POST',
  headers: { 'X-API-Key': 'your-key' },
  body: JSON.stringify({ url: 'https://example.com/campaign-v1' })
});
// Returns a short code like "abc123"
// QR code points to: https://qr.qrcodeapi.io/abc123

稍后更新目标

await fetch('https://api.qrcodeapi.io/links/abc123', {
  method: 'PUT',
  headers: { 'X-API-Key': 'your-key' },
  body: JSON.stringify({ url: 'https://example.com/campaign-v2' })
});

扫描分析

每次对动态链接的扫描都会被跟踪:

  • 设备类型(移动/平板/桌面)
  • 国家和城市(通过 IP 地理定位)
  • 引荐来源
  • 时间戳

不使用 Cookie,也不进行指纹识别——仅使用基本的 HTTP 请求数据,尊重隐私。

const stats = await fetch('https://api.qrcodeapi.io/analytics/abc123', {
  headers: { 'X-API-Key': 'your-key' }
});

// Example response:
{
  totalScans: 1247,
  uniqueScans: 892,
  byDevice: { mobile: 743, desktop: 401, tablet: 103 },
  byCountry: { US: 521, UK: 234, DE: 189, /* ... */ },
  byDay: [{ date: '2025-12-15', scans: 87 }, /* ... */]
}

Tech Stack

  • Runtime: Vercel Serverless Functions
  • Database: Supabase (PostgreSQL)
  • QR Generation: qrcode npm package
  • Image Processing: sharp (for logo overlays)
  • Geo‑IP: geoip-lite
  • Payments: Stripe

The whole thing is ~15 API endpoints consolidated into 9 serverless functions (Vercel Hobby plan has a 12‑function limit 😅).

TypeScript SDK

npm 包也已发布:

npm install qrcode-api-sdk
import { QRCodeAPI } from 'qrcode-api-sdk';

const client = new QRCodeAPI({ apiKey: 'your-key' });

// Generate QR code
const qr = await client.generate({
  data: 'https://dev.to/',
  format: 'svg',
  color: '#000000'
});

// Create dynamic link
const link = await client.links.create({
  url: 'https://example.com/'
});

// Get analytics
const stats = await client.analytics.get(link.shortCode);

已包含完整的 TypeScript 类型。

定价

计划价格每月二维码数量功能
免费$0100(无需信用卡)基础生成
入门版$9/月5,000动态链接
专业版$29/月50,000分析 + 动态链接

免费层对大多数副项目来说已经足够;付费层的定价面向独立开发者。

我会做的不同之处

  • 首先实现动态二维码 —— 这才是人们真正付费的功能。静态生成已经是商品化的了。
  • 更早构建 SDK —— 一个带类型的完整 TypeScript SDK 能显著提升开发者体验。
  • 不要低估 SEO —— 我一半的流量来自于 “QR code API Node.js” 或 “dynamic QR code API” 等搜索。花一个周末做 SEO 着陆页就收到了回报。

Try It Out

  • 🌐 网站:
  • 📚 文档:
  • 📦 npm 包:

我很想收到反馈,尤其是关于定价和功能想法的反馈。我正在考虑:

  • 批量生成端点(ZIP 文件,包含多个二维码)
  • 二维码模板 / 样式
  • 扫描事件的 Webhook 通知

告诉我哪些会有用! 🙏

Back to Blog

相关文章

阅读更多 »