当前位置：首页 > 文章列表 > 文章 > 前端 > JS搞起WebNFC！手把手教你5种方式玩转近场通信

JS搞起WebNFC！手把手教你5种方式玩转近场通信

2025-06-23 13:21:25 0浏览收藏

想用JS玩转Web NFC近场通信吗？本文将手把手教你如何利用Web NFC API，通过JavaScript与NFC硬件交互，实现读取、写入和格式化NFC标签等功能。文章深入解析了Web NFC API的核心作用，并提供了多种实用方法，包括使用NDEFReader对象进行标签读取和写入，以及如何利用第三方库简化操作。同时，还探讨了Web NFC API的兼容性问题，以及如何处理NFC标签的多种数据格式。更重要的是，文章强调了Web NFC的安全性，并提供了降低安全风险的实用建议，助你安全、高效地开发Web NFC应用。无论是开发者还是对NFC技术感兴趣的读者，都能从中获益。

Web NFC API是实现浏览器直接操作NFC标签的核心。它允许通过JavaScript与NFC硬件交互，支持读取、写入和格式化标签等功能。使用时需用户授权，并且仅在HTTPS环境下运行以确保安全性。目前Chrome在Android上支持较好，而iOS和桌面浏览器支持有限。开发者可通过检测NDEFReader是否存在来判断兼容性，并提供回退机制。处理多种数据格式时，如文本、URI、MIME类型或自定义数据，应根据recordType和mediaType进行解析并妥善处理错误。为降低安全风险，应验证标签来源、加密数据传输、谨慎处理敏感信息，并保持浏览器更新。第三方库可简化开发流程，模拟器则有助于无硬件环境下的调试。

js如何操作Web NFC标签 5种NFC读写方法实现近场通信

直接操作Web NFC标签，本质上就是利用JavaScript与NFC硬件进行交互，实现近场通信。这涉及到读取、写入、格式化NFC标签等操作。下面介绍几种常用的实现方法。

解决方案

Web NFC API：核心所在

Web NFC API是浏览器提供的官方接口，允许Web应用直接访问NFC设备。要使用它，首先要确保你的浏览器支持Web NFC（目前支持度还不够广泛）。

读取NFC标签：

   async function readNFC() {
     try {
       const ndef = new NDEFReader();
       await ndef.scan();

       ndef.onreadingerror = (event) => {
         console.log("读取NFC时发生错误！", event);
       };

       ndef.onreading = (event) => {
         const message = event.message;
         for (const record of message.records) {
           console.log("记录类型:  " + record.recordType);
           console.log("MIME 类型: " + record.mediaType);
           console.log("记录 ID:   " + record.id);
           console.log("数据: " + new TextDecoder().decode(record.data));
         }
       };
     } catch (error) {
       console.log("初始化NDEFReader失败。", error);
     }
   }

   readNFC();

这段代码会尝试扫描附近的NFC标签，并在控制台输出标签的内容。注意，用户需要授权Web应用访问NFC设备。NDEFReader是核心类，scan()方法启动扫描，onreading事件处理读取到的数据。

写入NFC标签：

   async function writeNFC(text) {
     try {
       const ndef = new NDEFReader();
       await ndef.write({ records: [{ recordType: "text", data: text }] });
       console.log("NFC标签写入成功！");
     } catch (error) {
       console.log("NFC标签写入失败。", error);
     }
   }

   writeNFC("Hello, NFC!");

这段代码会将"Hello, NFC!"写入NFC标签。同样，需要用户授权。ndef.write()方法接受一个包含NFC记录的数组。

使用第三方库：简化操作

虽然Web NFC API功能强大，但直接使用可能比较繁琐。一些第三方库可以简化NFC操作，例如nfc-reader (这只是一个示例名称，实际可能需要搜索并选择合适的库)。

引入库：

   <script src="nfc-reader.js"></script>

使用库：

   const reader = new NFCReader();

   reader.on('tag', tag => {
     console.log('NFC Tag detected', tag);
     // 处理标签数据
   });

   reader.start();

这些库通常提供更简洁的API，并处理了底层的一些细节。

模拟NFC环境：开发调试利器

在没有NFC硬件的情况下，可以使用模拟器进行开发和调试。一些浏览器插件或桌面应用可以模拟NFC标签，方便测试Web NFC应用。

权限问题：安全至上

Web NFC API的使用需要用户授权，这是出于安全考虑。用户可以随时撤销授权，因此Web应用需要妥善处理权限问题，避免出现意外情况。

兼容性：逐步完善

Web NFC API的兼容性还在逐步完善中。在使用之前，务必检查目标浏览器是否支持Web NFC，并提供相应的fallback机制。

Web NFC API的兼容性如何？哪些浏览器支持？

Web NFC API的兼容性是目前开发者面临的一个重要挑战。虽然Web NFC代表了未来的趋势，但并非所有浏览器都已完全支持。

Chrome: Chrome浏览器在Android平台上对Web NFC API的支持相对较好。从Chrome 89开始，Android设备上的Chrome已经默认启用了Web NFC功能。这意味着，如果你的用户使用Android Chrome浏览器，他们可以直接体验你的Web NFC应用。
其他浏览器: 在iOS平台上，由于苹果的限制，Web NFC API的支持仍然有限。Safari浏览器目前尚未原生支持Web NFC。不过，一些第三方浏览器可能会提供对NFC的支持，但这通常需要用户安装特定的插件或应用。
桌面浏览器: 桌面浏览器对Web NFC的支持更加有限。通常需要借助特定的硬件设备和驱动程序才能实现NFC功能。

因此，在开发Web NFC应用时，务必进行充分的兼容性测试。可以使用NDEFReader对象是否存在来检测浏览器是否支持Web NFC。

if ("NDEFReader" in window) {
  console.log("Web NFC API is supported!");
} else {
  console.log("Web NFC API is not supported.");
  // 提供替代方案或提示用户更换浏览器
}

如果浏览器不支持Web NFC，可以考虑提供替代方案，例如使用传统的NFC应用或提示用户更换浏览器。

如何处理NFC标签的多种数据格式？

NFC标签可以存储多种数据格式，例如文本、URI、MIME类型等。Web NFC API通过NDEFRecord对象来表示不同的数据格式。

文本数据: 文本数据是最常见的NFC数据格式之一。可以使用TextDecoder对象将NDEFRecord.data转换为字符串。
```
const text = new TextDecoder().decode(record.data);
console.log("文本数据:", text);
```
URI数据: URI数据表示一个URL地址。可以直接将NDEFRecord.data转换为字符串，并将其用作URL。
```
const uri = new TextDecoder().decode(record.data);
window.location.href = uri; // 跳转到该URI
```

MIME类型数据: MIME类型数据表示一种特定的数据类型，例如图片、音频或视频。需要根据MIME类型选择合适的处理方式。

if (record.mediaType === "image/jpeg") {
  // 将数据转换为图片并显示
  const blob = new Blob([record.data], { type: "image/jpeg" });
  const imageUrl = URL.createObjectURL(blob);
  const img = document.createElement("img");
  img.src = imageUrl;
  document.body.appendChild(img);
}