如何用Web NFC API实现近场通信交互？-js教程-PHP中文网

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

夜晨

发布： 2025-10-05 09:32:02

原创

876人浏览过

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 标签，适合配置设备或分享信息。

微信 WeLM

WeLM不是一个直接的对话机器人，而是一个补全用户输入信息的生成模型。

查看详情

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);
  }
});

登录后复制