二维码生成器：一键把文字变成扫码图案

二维码生成器：一键把文字变成扫码图案

一段需求，码道自动写出 596 行、约 17 KB 的单文件二维码生成器——输入即实时生成、尺寸/颜色/纠错级别可调、PNG 下载与复制、6 个示例快捷填充、生成次数统计持久化，双击 HTML 就能用

分类: ai-development
标签: CodeArts, AI编程, QRCode, 网页应用, qrcodejs
难度: 初级
读者: 前端开发者、编程学习者、技术写作者

---

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个二维码生成器（QR Code Generator）网页应用，单个 HTML 文件即可运行……」约 2 分 44 秒后，一个 596 行、约 17 KB 的完整二维码生成器就自动生成了：输入框实时生成二维码（250ms 防抖），尺寸 120~480px 滑块可调，前景色/背景色支持颜色选择器与十六进制输入双向同步，纠错级别 L/M/Q/H 可选；二维码下方提供「下载 PNG」和「复制图片」按钮，复制优先走 Clipboard API、不支持时自动回退复制文本；内置网址、WiFi 配置、文本、邮箱、短信等 6 个示例快捷填充；生成次数用 localStorage 持久化并可一键重置。双击 HTML 就能用。

---

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

---

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 自然语言编程：我说「二维码生成器网页应用」，码道直接理解成实时生成 + 自定义选项 + 下载复制 + 示例填充 + 统计持久化一整套方案
• 自主技术选型：引入 qrcodejs（davidshimjs）作为唯一 CDN 依赖，把复杂的 QR 编码算法交给成熟库，自己专注 UI 与交互
• 工程细节到位：输入 250ms 防抖、颜色选择器与十六进制文本框双向同步、PNG 下载带时间戳文件名、复制失败自动回退
• 容错与收尾：前景背景同色提示、内容过长捕获异常、空内容占位提示，生成后自行验证文件并逐条汇报功能清单

---

4. 任务描述

我想要一个二维码生成器（QR Code Generator）网页应用，具体要求：

• 单个 HTML 文件即可运行，不需要任何构建步骤
• 输入文本或网址后实时生成二维码
• 支持自定义尺寸、前景色/背景色、纠错级别（L/M/Q/H）
• 二维码下方提供 PNG 下载按钮和复制到剪贴板按钮
• 内置 6 个示例内容快捷填充（如网址、WiFi 配置、文本等）
• 统计生成次数用 localStorage 持久化
• 界面简洁现代，浅色主题，支持移动端触屏操作

---

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道开始拆解需求并生成代码：

生成过程中，码道编写输入防抖、颜色同步、QRCode 初始化等逻辑，代码逐行可见：

约 2 分 44 秒后，码道汇报完成，输出功能清单，并提示文件位置：

双击生成的 qr-generator.html 在浏览器中直接运行，输入网址后二维码实时生成，尺寸、颜色、纠错级别控件与「下载 PNG」「复制图片」按钮都正常：

---

6. 代码解析

码道生成的代码是一个自包含的单页应用，核心逻辑非常清晰：

实时生成：输入框监听 input 事件，250ms 防抖后重建二维码，避免频繁重绘：

input.addEventListener('input', debounceGenerate);
function debounceGenerate() {
  clearTimeout(timer);
  timer = setTimeout(generate, 250);
}

二维码生成：调用 qrcodejs 的 QRCode 构造器，尺寸、颜色、纠错级别全部动态传入，生成前先清空容器：

qrWrap.innerHTML = '';
qr = new QRCode(qrWrap, {
  text: content,
  width: size,
  height: size,
  colorDark: fgColor,
  colorLight: bgColor,
  correctLevel: QRCode.CorrectLevel[level]
});

下载与复制：下载走 canvas toDataURL 触发 a 标签下载；复制优先 Clipboard API 复制 PNG blob，失败时回退复制纯文本：

canvas.toBlob(blob => {
  navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])
    .catch(() => navigator.clipboard.writeText(content));
});

统计持久化：仅当内容变化时才累加生成次数，写入 localStorage，提供重置按钮：

function saveCount() {
  localStorage.setItem('qr_count', String(count));
}

从这些代码可以看出，码道不只把功能拼出来，防抖、颜色双向同步、复制回退、计数去重这些影响体验的细节也都处理得比较到位。

---

7. 真实运行效果

双击 qr-generator.html 即可开始使用：页面顶部是「二维码生成器」标题，输入框下方是网址、WiFi、文本、邮箱、短信等 6 个示例按钮，点击即自动填充并生成；下方是尺寸滑块（120~480px）、前景色/背景色选择器（带十六进制文本框同步）、纠错级别下拉（默认 H 高纠错）；右侧是实时渲染的黑白二维码，底部有蓝色「下载 PNG」和「复制图片」按钮；最下方显示「累计生成 N 次」并可重置。示例「网址」填充 https://www.huaweicloud.com 后，二维码立即出现，扫描即可打开网页。浅色卡片式布局，移动端窄屏自动重排，触屏操作顺畅。

---

8. 能力总结

• 一次生成完整可用：从需求到可双击运行的单文件应用，全程约 3 分钟，无需手工补代码
• 技术含量扎实：qrcodejs 集成、实时防抖生成、PNG 下载与剪贴板复制、纠错级别映射，方案专业
• 交互细节到位：示例一键填充、颜色双向同步、计数去重、复制失败回退，体验闭环完整
• 工程习惯良好：生成/下载/复制/统计函数职责清晰、常量集中、移动端响应式适配，代码结构清晰可读

---

9. 总结

用码道开发二维码生成器这类网页应用，最大的感受是「需求即产品」：把功能要点说清楚，码道就能给出包含完整技术方案与视觉风格的成品。对想快速做一个二维码小工具、或者刚学前端想看看「第三方库集成 + 画布输出是怎么写的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。