NFC读写实现方法全解析

本文深入解析了Web NFC在HTML中的实际应用限制与关键实现细节，明确指出它仅支持NDEF标准标签（如NTAG213/215/216），完全无法读写身份证、门禁卡等普通IC卡；必须运行在HTTPS或localhost安全环境下，且目前仅有Chrome for Android v95+稳定支持，iOS及其他主流浏览器均不兼容。文章手把手讲解了如何正确检测API可用性、初始化NDEFReader、处理单次扫描的时机与事件绑定、安全解码ArrayBuffer数据，以及write()操作必须满足的三大硬性条件（用户手势触发、标签可写、显式权限授权），并特别强调Web NFC根本无法获取卡片UID——这一常见误区背后是Web层与原生NFC能力的本质隔离，帮助开发者避开高发坑点，理性评估技术可行性。

Web NFC 在绝大多数真实设备上无法直接读写普通 IC 卡（如身份证、门禁卡），它只支持符合 NDEF 标准的标签，且必须运行在安全上下文（https 或 localhost）中。浏览器支持极有限——目前仅 Chrome for Android（v95+）稳定支持 NDEFReader 和 NDEFWriter，iOS 完全不开放 Web NFC API。

如何检测和初始化 NDEFReader

别跳过检测步骤，否则用户点按钮时静默失败。先确认全局对象存在，再检查是否在 HTTPS 下运行：

• 'NDEFReader' in window 为 false 时，说明浏览器不支持（包括所有 Safari、Firefox、Edge 桌面版）
• 即使支持，location.protocol !== 'https:' && location.hostname !== 'localhost' 也会导致 new NDEFReader() 抛出 SecurityError
• 建议把初始化逻辑包裹在按钮点击中，避免页面加载即报错；不要在 DOMContentLoaded 里直接 new 实例

scan() 调用后没反应？注意权限与触发时机

ndef.scan() 不是“一直监听”，而是单次扫描会话，持续约数秒，超时自动结束。常见失效场景：

• 用户未在系统设置中开启 NFC 开关（Android 设置 > 连接 > NFC）
• 页面未获得焦点：Chrome 要求 tab 处于激活态，切到后台或锁屏后扫描立即中断
• 标签类型不兼容：仅支持 NDEF 格式标签（如 NTAG213/215/216、MIFARE Ultralight C），不支持 Classic、DESFire、身份证等非 NDEF 卡
• 未正确处理 reading 事件：事件只触发一次，需在 scan() 后立即绑定，不能延迟注册

读取到的数据是 ArrayBuffer，不是明文字符串

即使标签存的是文本，record.data 返回的也是 ArrayBuffer，必须用 TextDecoder 解码，且要留意编码声明：

• 记录中的 record.encoding 字段可能为 'utf-8' 或 'utf-16'，但很多标签不写该字段，实际按 UTF-8 存储
• 错误写法：String.fromCharCode(...new Uint8Array(record.data)) —— 会乱码，尤其含中文时
• 正确写法：new TextDecoder(record.encoding || 'utf-8').decode(record.data)
• 若解码后为空字符串，先检查 record.data.byteLength 是否为 0，再确认标签是否真写了 NDEF 数据（可用 NFC Tools App 验证）

write() 写入失败的三个硬性限制

NDEFWriter.write() 比读取更受限，失败几乎必然发生，除非同时满足：

• 用户主动触发（必须是用户手势，如 click/tap，不能由定时器或 Promise resolve 触发）
• 标签处于可写状态（NTAG213 默认可写，但部分已锁定或格式化为其他协议的标签会拒绝）
• Chrome 设置中已授权该站点使用 NFC（首次调用会弹出权限提示，用户拒绝后无二次提示）
• 写入内容必须符合 NDEF 规范：例如文本记录需带 encoding 和 language 字段，URI 记录需以 http:// 等标准 scheme 开头

最常被忽略的一点：Web NFC 不提供 UID 读取能力。所谓“读取卡片号”，对非 NDEF 标签（如大多数门禁卡）根本不可行——那需要原生 Android 的 NfcA/MifareClassic API，Web 层完全不可见。

今天关于《NFC读写实现方法全解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！