javascript操作nfc主要通过web nfc api实现，需在https安全上下文下由用户手势触发，使用ndefreader对象读写ndef格式数据；2. 读取标签需创建ndefreader实例，监听onreading事件并调用scan()方法；3. 写入数据通过write()方法将包含文本、url等记录的消息写入标签；4. 可调用makereadonly()方法将标签设为只读；5. 该api不支持低级apdu命令、nfc卡模拟、点对点通信及后台扫描；6. 浏览器支持有限，主要适用于android的chrome和edge，ios safari不支持；7. 开发需注意权限请求、兼容性检测、ndef格式处理、异步错误捕获及真实设备调试；8. 替代方案包括原生开发、混合框架插件、二维码或ble技术，选择应基于具体需求和目标平台。
JavaScript操作NFC，目前主要是通过Web NFC API来实现的。它允许Web应用在安全上下文（HTTPS）中，通过用户手势来读取和写入NFC标签。这并不是对NFC硬件的底层控制，而是更高层级的、针对NDEF（NFC Data Exchange Format）消息的交互。
解决方案
要使用JavaScript操作NFC，你需要依赖浏览器提供的Web NFC API。核心对象是
NDEFReader
。
首先，确保你的页面运行在HTTPS协议下，并且用户有明确的交互行为（比如点击按钮），因为NFC操作需要用户授权。
读取NFC标签：
async function readNfcTag() { if ('NDEFReader' in window) { try { const ndef = new NDEFReader(); ndef.onreading = event => { console.log("NFC标签被读取！"); const message = event.message; for (const record of message.records) { // 尝试解码文本记录 if (record.recordType === "text") { const textDecoder = new TextDecoder(record.encoding); console.log(`文本内容: ${textDecoder.decode(record.data)}`); } // 尝试解码URL记录 if (record.recordType === "url") { const urlDecoder = new TextDecoder(); console.log(`URL内容: ${urlDecoder.decode(record.data)}`); } // 处理其他类型的记录，例如自定义类型 if (record.recordType === "mime") { const decoder = new TextDecoder(); console.log(`MIME类型: ${record.mediaType}, 数据: ${decoder.decode(record.data)}`); } } }; ndef.onreadingerror = error => { console.error("读取NFC标签时出错:", error); }; await ndef.scan(); console.log("请将NFC标签靠近设备..."); } catch (error) { console.error("启动NFC扫描失败:", error); // 常见错误：NotAllowedError (用户拒绝权限), NotSupportedError (浏览器不支持) } } else { console.warn("当前浏览器不支持Web NFC API。"); }}// 示例：用户点击按钮后开始扫描document.getElementById('scanButton').addEventListener('click', readNfcTag);
写入NFC标签：
async function writeNfcTag() { if ('NDEFReader' in window) { try { const ndef = new NDEFReader(); // 准备要写入的数据，这里是一个简单的文本记录 const message = { records: [ { recordType: "text", data: "Hello from Web NFC!", lang: "en" // 语言代码，可选 }, { recordType: "url", data: "https://www.example.com" } ] }; await ndef.write(message); console.log("数据已成功写入NFC标签。"); } catch (error) { console.error("写入NFC标签失败:", error); // 常见错误：NotAllowedError, NotSupportedError, InvalidStateError (标签只读) } } else { console.warn("当前浏览器不支持Web NFC API。"); }}// 示例：用户点击按钮后开始写入document.getElementById('writeButton').addEventListener('click', writeNfcTag);
让NFC标签只读：
某些场景下，你可能希望标签一旦写入就不能再被修改。
async function makeNfcTagReadOnly() { if ('NDEFReader' in window) { try { const ndef = new NDEFReader(); await ndef.makeReadOnly(); console.log("NFC标签已设置为只读。"); } catch (error) { console.error("设置NFC标签为只读失败:", error); } } else { console.warn("当前浏览器不支持Web NFC API。"); }}// 示例：用户点击按钮后设置只读document.getElementById('readOnlyButton').addEventListener('click', makeNfcTagReadOnly);
NFC与Web NFC API：它到底能做什么，又不能做什么？
Web NFC API的出现，确实让Web应用与物理世界有了更直接的交互，但它能做的和不能做的，界限还是挺清晰的。
能做什么：
Web NFC主要聚焦于NDEF（NFC Data Exchange Format）消息的读写。这意味着你可以：
读取NFC标签上的NDEF数据：比如一个URL、一段文本、或者一些结构化的自定义数据（例如JSON字符串，通常作为MIME类型记录）。想象一下，用户手机轻轻一碰，就能打开一个网页、显示产品信息，或者自动填充表单。写入NDEF数据到NFC标签：你可以把URL、文本、或者你的应用需要识别的特定数据写入空白或可擦写的NFC标签。这对于智能海报、资产追踪、简单门禁卡（非安全级别）等场景非常有用。将NFC标签设置为只读：一旦数据写入，你可以选择锁定标签，防止数据被意外或恶意修改。
不能做什么（或者说，目前不直接支持）：
说实话，Web NFC API在安全性和隐私方面做了很多限制，所以它并不是N能做的一切都能在浏览器里实现。
低级别APDU命令交互：如果你需要与智能卡（如银行卡、身份证）进行复杂的、基于APDU命令的交互，或者执行加密操作，Web NFC API是无法满足的。它不提供访问NFC控制器底层协议的接口。NFC卡片模拟（Host-based Card Emulation, HCE）：Web NFC不能让你的手机浏览器模拟一张NFC卡片，比如用于支付或门禁。这通常需要操作系统层级的支持和权限，出于安全考虑，浏览器是不会开放的。点对点（Peer-to-Peer, P2P）模式：Web NFC目前不支持设备之间直接的NFC数据交换，也就是两部手机NFC互相碰一下传文件那种。后台扫描：NFC操作必须由用户明确的交互行为触发，并且在页面处于活动状态时进行。你不能让一个后台Tab持续扫描NFC标签。这主要是为了保护用户隐私和设备电量。广泛的浏览器和设备支持：目前，Web NFC API主要在Android平台上的Chrome和Edge浏览器中得到较好的支持。iOS设备虽然有NFC硬件，但Apple对Web NFC的支持非常有限，通常需要通过特定的原生应用或私有API来实现NFC功能。这意味着你的Web NFC应用在iOS上可能无法运行。
总的来说，Web NFC API是一个“刚刚好”的工具，它让Web应用能够触及NFC的简单读写功能，为很多轻量级的应用场景打开了大门，但对于那些需要深度集成或高安全性的NFC应用，原生开发仍然是不可替代的选择。
实际开发中遇到的坑与应对策略
在实际用JavaScript操作NFC时，我个人遇到过不少让人头疼的“坑”，有些是技术限制，有些是用户体验上的挑战。
1. 权限与HTTPS的“坎”
最大的一个坎就是权限。Web NFC API是高度敏感的，它必须在HTTPS安全上下文中运行，并且每次操作（扫描或写入）都需要用户明确的手势触发（比如点击按钮）。如果你在HTTP页面尝试调用，或者没有用户手势，它会直接抛出
NotAllowedError
或
SecurityError
。
应对策略：全程HTTPS：这是硬性要求，没得商量。明确的用户交互：设计清晰的UI，让用户知道他们正在触发一个NFC操作。比如，一个“开始扫描”或“写入数据”的按钮，而不是自动开始扫描。友好的错误提示：当用户拒绝权限时，不要只是默默失败，而是给出明确的提示，解释为什么需要权限，并引导用户去浏览器设置中开启（虽然这通常很难）。
2. 浏览器与设备兼容性的“泥潭”
Web NFC API的兼容性远不如你想象的那么好。它主要在Android上的Chrome和Edge浏览器工作得比较好。iOS设备虽然有NFC硬件，但Safari浏览器目前压根不支持Web NFC。这就意味着你的应用在iPhone上是无法使用Web NFC功能的。
应对策略：特性检测：在调用NFC API之前，务必检查
'NDEFReader' in window
。如果不支持，就隐藏相关功能或提供替代方案。明确告知用户：在应用界面上，明确告知用户哪些设备和浏览器支持NFC功能，哪些不支持。提供降级方案：对于不支持NFC的设备，考虑使用二维码、条形码或其他方式来完成类似的数据传输任务。
3. NDEF数据格式的“迷雾”
NFC标签上的数据并不是随便存的，它通常遵循NDEF（NFC Data Exchange Format）规范。处理文本、URL还好，但如果你要处理更复杂的自定义数据，比如JSON，就需要将其编码为适当的MIME类型记录，并在读取时正确解码。编码和解码的字符集（如UTF-8）也得注意。
应对策略：统一数据格式：在你的应用中，约定好写入NFC标签的数据格式，比如总是使用UTF-8编码的JSON字符串，并将其作为
application/json
的MIME类型记录。严谨的解析逻辑：读取数据时，使用
TextDecoder
等API，并根据
recordType
和
mediaType
进行条件判断，确保正确解析。
4. 异步操作的“深坑”
所有的NFC操作都是异步的，基于Promise。这本身不是问题，但如果你不习惯异步编程，或者在处理多个NFC操作链时，可能会遇到竞态条件或逻辑混乱。
应对策略：拥抱
async/await
：使用
async/await
可以使异步代码看起来更像同步代码，提高可读性和可维护性。细致的错误处理：为每个
Promise
操作都加上
try...catch
块，捕获并处理可能发生的错误。
5. 调试的“盲区”
调试Web NFC应用有点麻烦，因为你必须依赖真实的NFC标签和支持NFC的设备。Chrome DevTools虽然强大，但它无法完全模拟NFC硬件交互。
应对策略：真实设备测试：尽早且频繁地在真实设备上进行测试。日志记录：在代码中加入大量的
console.log
和
console.error
，记录NFC操作的每一步状态和任何错误信息。模拟数据：在开发阶段，可以先用模拟数据来测试UI和业务逻辑，减少对真实NFC硬件的依赖。
面对这些挑战，关键在于预见性、防御性编程和对用户体验的重视。不要指望Web NFC能解决所有问题，它只是一个特定场景下的解决方案。
Web NFC的未来展望与替代方案
Web NFC API的出现，无疑是Web技术向物理世界拓展的重要一步。我个人觉得，它代表了一种趋势：让浏览器不仅仅是一个信息展示平台，更能成为连接数字与现实的桥梁。
未来展望：
更广泛的浏览器支持：我希望未来Safari和其他主流浏览器能加入对Web NFC的完整支持，这将极大地扩大其应用范围。毕竟，如果一个功能只能在Android上用，那它的“Web”属性就大打折扣了。增强的功能集：虽然出于安全和隐私考虑，Web NFC不会开放所有底层NFC功能，但我期待它能在现有基础上，增加一些更灵活的读写选项，或者对更多NFC标签类型提供支持。更多标准化和最佳实践：随着API的成熟，社区会形成更多的标准化实践，帮助开发者更好地利用这一技术。
替代方案：
话说回来，Web NFC目前毕竟还有局限性。如果你的项目对NFC功能有更高要求，或者需要跨平台支持，那么你可能需要考虑以下替代方案：
原生移动应用开发：这是最直接、最强大的方案。通过iOS的Core NFC和Android的NFC API，你可以获得对NFC硬件的完全控制，包括卡片模拟、点对点通信、更复杂的APDU命令交互等。如果你需要实现支付、门禁、高安全等级的身份验证等功能，原生应用几乎是唯一的选择。混合开发框架（如React Native, Flutter, Cordova/Capacitor）：这些框架允许你用Web技术栈（或类似JS的语言）开发应用，并通过插件调用原生的NFC功能。例如，Capacitor就有NFC插件，可以让你在Webview中调用原生NFC API。这是一种折衷方案，既能利用Web开发的效率，又能触及原生功能。二维码/条形码：对于简单的URL跳转、文本传递、产品识别等场景，二维码和条形码是NFC最常见、最普及的替代品。它们无需特殊硬件，兼容性极佳，用户使用习惯也已养成。蓝牙低功耗（BLE）：如果你的需求是近距离的设备间通信，而不仅仅是与无源标签交互，BLE可能是一个更灵活的选择。它支持双向通信，可以传输更多数据，并且在移动设备上支持度很高。
最终选择哪种方案，真的取决于你的具体需求、目标用户群体和开发资源。Web NFC是一个不错的起点，它让一些轻量级的NFC应用变得触手可及，但它并非万能药。在技术选型时，务必结合实际情况，做出最务实、最有效的决策。
以上就是js如何操作nfc的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517047.html
微信扫一扫 
支付宝扫一扫 
