几木木1. 项目背景与核心需求
最近在开发一个需要快速生成二维码的小工具，正好看到Cursor这个新兴的AI编程助手，决定用它来尝试构建一个轻量级的二维码生成网页。二维码在现代生活中的应用场景非常广泛——从支付码到WiFi连接，从产品溯源到活动签到，几乎无处不在。但每次需要生成二维码时，要么依赖在线工具（有隐私风险），要么要手动调用库（不够便捷），于是萌生了开发一个本地化、可自定义的二维码生成器的想法。
这个项目的核心需求很明确：
- 通过网页表单接收用户输入的文本/URL
- 实时生成对应的二维码图像
- 支持基础自定义（颜色、尺寸、容错率）
- 纯前端实现，无需后端服务
- 部署简单，单HTML文件即可运行
选择Cursor作为开发工具的原因在于它集成了GPT-4级别的代码生成能力，可以大幅减少基础代码的编写时间，特别适合这种小型工具的原型开发。下面记录整个开发过程中的关键技术点和踩坑经验。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术选型与方案设计
2.1 核心库选择
二维码生成的核心算法实现有多种方案，经过对比后选择了以下技术栈：
-
QR Code生成库：
- QRious.js：轻量（仅5KB），API简单，支持Canvas和SVG输出
- 对比过qrcode.js（功能更全但体积较大）和jQuery.qrcode（依赖jQuery）
- 选择理由：本项目不需要高级功能（如LOGO嵌入），轻量化优先
-
UI框架：
- 纯原生HTML/CSS/JS实现
- 考虑过使用Vue/React，但考虑到工具的单页特性，引入框架反而增加复杂度
- 使用Flexbox布局确保响应式设计
-
开发工具：
- Cursor作为主IDE，利用其AI辅助功能
- Live Server插件用于实时预览
- 最终打包为单HTML文件，内联所有JS/CSS
2.2 功能模块设计
整个应用分为三个核心模块：
mermaid复制graph TD
A[输入模块] -->|文本/URL| B(生成模块)
B -->|二维码数据| C[输出模块]
C -->|图像数据| D[下载/分享]
具体功能点包括：
- 文本输入验证（长度限制、URL格式检测）
- 生成参数控制（尺寸200-1000px、颜色HEX值、容错等级L/M/Q/H）
- 实时预览机制（防抖处理，避免频繁重绘）
- 导出功能（PNG/SVG格式选择）
3. 核心实现过程
3.1 基础结构搭建
首先创建基础HTML骨架：
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code生成器</title>
<style>
/* 这里添加CSS样式 */
body {
font-family: 'Segoe UI', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.control-panel {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
#qrcode {
margin-top: 20px;
borde