从 GLM-5 提示到上线：我用 HTML5 实现了 NFC 读卡转二维码

本文参与 AtomGit 「0daymodel」首发模型体验活动，聚焦 GLM-5 在前端开发中的实际赋能。

一、项目背景：用网页实现无接触交互

在智慧办公、门禁打卡等场景中，NFC 卡片因成本低、安全性高被广泛使用。但传统方案依赖专用读卡器或原生 App，部署复杂。
能否用一个普通网页，让用户仅用手机靠近卡片，就自动读取卡号并生成二维码？

目标很明确：纯前端、零后端、开箱即用。

二、AI 赋能：向 GLM-5 提出需求

我在 AtomGit AI 平台 向最新发布的 GLM-5 模型提出具体开发需求：

“请用 HTML 和 JavaScript 实现一个网页，当用户用支持 NFC 的手机靠近卡片时，自动读取卡号（UID），并用 qrcode.js 生成对应的二维码显示在页面上。要求代码完整、可运行。”

令人惊喜的是，GLM-5 不仅理解了上下文，还给出了结构完整、可直接运行的代码框架，包括：

• 正确调用 Web NFC 标准 API（NDEFReader）
• 安全提取 NFC 标签的 UID 字段
• 集成 qrcode.js 动态渲染二维码
• 基础错误处理与兼容性提示

图：GLM-5 在 AtomGit AI 平台给出的初始实现建议

这一过程大幅缩短了技术调研时间——原本需要查阅 MDN、Stack Overflow、GitHub 示例的数小时工作，在 1 分钟内获得可执行起点。

三、快速落地：基于 AI 建议完成 Demo

在 GLM-5 提供的代码基础上，我仅用半天时间完成了完整可运行版本，核心优化包括：

1. 健壮的 UID 解析逻辑

部分 NFC 卡片的 id 字段为空，需降级处理：

const uidArray = event.message.records[0]?.id || new Uint8Array();
const uid = Array.from(uidArray)
  .map(b => b.toString(16).padStart(2, '0'))
  .join(':') || 'unknown';

2. 用户友好界面

• 实时状态提示（“等待 NFC…” → “读取成功”）
• 二维码居中展示，尺寸适配移动端

3. 明确的环境限制说明

Web NFC 仅支持 Android Chrome 浏览器（需开启 NFC 权限），iOS 目前不支持。项目 README 中已明确标注。

图：Android 手机读取 NFC 卡后自动生成二维码

四、项目开源与价值总结

• 源码地址：https://atomgit.com/yourname/nfc-to-qrcode-web
• 技术栈：HTML5 + Vanilla JS + qrcode.js
• 适用场景：临时门禁登记、展会签到、设备绑定等轻量级无接触交互

GLM-5 带来的核心价值：

传统开发流程	使用 GLM-5 后
查文档 → 试错 → 调试（数小时）	输入需求 → 获取可运行代码（1 分钟）
依赖经验或社区碎片信息	获得结构化、上下文感知的解决方案
创意受限于技术实现成本	快速验证想法，聚焦业务逻辑

对于企业开发者而言，GLM-5 已不仅是对话模型，更是高效的编程协作者，尤其在探索新兴 Web API（如 Web NFC、Web Bluetooth）时优势显著。

---

参与说明：本文为 AtomGit「0daymodel」GLM-5 首发体验活动投稿。
相关链接：

• GLM-5 在线体验
• 项目源码（AtomGit）
• 技术讨论帖