uniapp中如何使用NFC功能

在uniapp中如何使用NFC功能？需要引入哪些插件或模块？具体实现步骤是什么？是否支持Android和iOS双平台？有没有完整的代码示例可以参考？

2 回复

在uniapp中，使用NFC功能需调用uni.readNdefMessage()读取NFC标签数据，或uni.writeNdefMessage()写入数据。注意：仅App端支持，且需设备硬件支持NFC。


在 UniApp 中，NFC 功能主要通过调用原生 API 实现，因为 UniApp 本身不直接提供 NFC API，需要借助条件编译和插件扩展。以下是详细步骤和示例代码：

实现步骤：

  1. 平台判断：NFC 功能通常仅支持 Android 和部分 iOS 设备，需使用条件编译。
  2. 调用原生方法：通过 uni.requireNativePlugin() 引入原生插件，或使用 plus.nfc API（HBuilderX 环境）。
  3. 权限配置：在 Android 平台需添加 NFC 权限。

示例代码（H5+ 环境）：

// 仅 Android 示例，在页面中调用
export default {
  methods: {
    initNFC() {
      // 判断平台
      if (uni.getSystemInfoSync().platform === 'android') {
        const nfc = plus.nfc;
        
        // 监听 NFC 标签
        nfc.addEventListener("discovered", (result) => {
          uni.showToast({ title: `检测到NFC标签: ${result.tag.id}`, icon: 'none' });
          // 可读取或写入数据（需具体实现）
        }, false);
        
        // 开始监听
        nfc.startDiscovery((res) => {
          console.log('NFC监听启动成功');
        }, (err) => {
          uni.showToast({ title: 'NFC启动失败', icon: 'none' });
        });
      } else {
        uni.showToast({ title: '当前设备不支持NFC', icon: 'none' });
      }
    }
  },
  onLoad() {
    this.initNFC();
  },
  onUnload() {
    // 停止监听并移除事件
    if (uni.getSystemInfoSync().platform === 'android') {
      plus.nfc.stopDiscovery();
      plus.nfc.removeEventListener("discovered");
    }
  }
}

注意事项：

  • 权限配置：在 manifest.json 的 Android 配置中添加：
    "permissions": ["NFC"]
  • iOS 限制：iOS 仅支持部分 NFC 场景（如 NDEF 读取），且需要描述文件配置。
  • 插件扩展：如需复杂功能（如写入数据），可封装原生插件或使用社区 NFC 插件。

扩展建议：

  • 对于读写操作，需参考具体 NFC 协议（如 NDEF）。
  • 真机调试时确保设备开启 NFC 功能。

通过以上步骤，即可在 UniApp 中实现基础的 NFC 标签检测功能。

回到顶部