当前位置：首页 > 文章列表 > 文章 > 前端 > WebNFCAPI近场通信实现教程

WebNFCAPI近场通信实现教程

2025-10-01 18:35:30 0浏览收藏

**Web NFC API实现近场通信教程：打造轻量级网页交互新体验** 想让你的网页与现实世界互动吗？Web NFC API为你打开了一扇窗！本教程将带你了解如何利用Web NFC API，在支持NFC的Android设备上通过Chrome浏览器实现网页对NFC标签的读写操作。你需要确保设备支持NFC并已开启，使用HTTPS协议访问网页，并获得用户的授权。通过NDEFReader，你可以轻松读取NFC标签中的文本或URL数据；利用NDEFWriter，则可以将多种类型的信息写入标签。无论是智能海报、设备配对，还是更多创意应用，Web NFC都能帮你实现。但请注意，所有操作必须由用户主动触发，并受到严格的安全策略保护，以确保用户隐私。快来探索Web NFC的无限可能，为你的网页应用增添更多趣味和实用性吧！

Web NFC API可在支持的Android设备上通过Chrome浏览器实现网页读写NFC标签，需满足设备支持NFC、使用HTTPS、用户授权等条件，利用NDEFReader读取文本或URL数据，通过NDEFWriter写入多种类型信息，适用于智能海报、设备配对等场景，操作须由用户触发且受安全策略保护隐私。

如何用Web NFC API实现近场通信交互？

Web NFC API 允许网页在支持的设备上读取和写入 NFC（近场通信）标签，实现与物理世界的轻量级交互。目前该功能主要在部分 Android 设备上的 Chrome 浏览器中可用，且需要用户主动触发操作（如点击按钮）才能启动 NFC 通信。

启用 Web NFC 的前提条件

要使用 Web NFC API，需满足以下条件：

设备支持 NFC 硬件并已开启
浏览器支持 Web NFC（目前主要是 Chrome for Android 89+）
网站通过 HTTPS 提供服务（本地开发可使用 localhost）
用户已授予网站 NFC 权限

读取 NFC 标签内容

通过 NDEFReader 接口可以监听来自 NFC 标签的数据。常见用途是读取 URL、文本或自定义数据。

if ('NDEFReader' in window) {
  const ndef = new NDEFReader();
  button.addEventListener('click', async () => {
    try {
      await ndef.scan();
      ndef.onreading = event => {
        const decoder = new TextDecoder();
        if (event.message.records[0].recordType === 'text') {
          const text = decoder.decode(event.message.records[0].data);
          console.log('收到文本:', text);
        } else if (event.message.records[0].recordType === 'url') {
          const url = decoder.decode(event.message.records[0].data);
          console.log('打开链接:', url);
          window.open(url, '_blank');
        }
      };
    } catch (err) {
      console.error('扫描失败:', err);
    }
  });
} else {
  console.log('当前浏览器不支持 Web NFC');
}

向 NFC 标签写入数据

使用 NDEFWriter 可将信息写入空白或可写的 NFC 标签，适合配置设备或分享信息。

const ndef = new NDEFReader();
buttonWrite.addEventListener('click', async () => {
  try {
    await ndef.write({
      records: [
        { recordType: "url", data: "https://example.com" },
        { recordType: "text", data: "欢迎使用 Web NFC" }
      ]
    });
    console.log("数据写入成功");
  } catch (err) {
    console.error("写入失败:", err);
  }
});