uniapp开发NFC碰一碰功能教程

环境准备

确保设备支持NFC功能,Android需在manifest.json中配置NFC权限。示例配置如下:

{
  "permissions": {
    "android": [
      "android.permission.NFC"
    ]
  }
}

NFC基础API调用

使用uniapp的plus.nfc模块实现NFC读写操作。初始化NFC适配器并检测设备支持情况:

// 检查NFC是否可用
if (!plus.nfc.isSupported()) {
  console.error('设备不支持NFC');
  return;
}
const nfcAdapter = plus.nfc.getNfcAdapter();

监听NFC标签

通过注册NDEF消息监听实现碰一碰响应:

plus.nfc.onNdefMessage(function(res) {
  const records = res.records;
  records.forEach(record => {
    console.log('收到NFC数据:', record.payload);
  });
});

写入NFC标签

构建NDEF消息并写入标签:

const textRecord = {
  tnf: 1,  // TNF_WELL_KNOWN
  type: 'T',  // 文本类型
  payload: 'Hello NFC'  // 写入内容
};
plus.nfc.writeNdefMessage([textRecord], () => {
  console.log('写入成功');
}, (err) => {
  console.error('写入失败:', err);
});

处理NDEF格式数据

解析和构造NDEF记录时需注意编码格式。文本记录需包含语言码和实际内容:

// 解析文本记录
function parseTextRecord(record) {
  const payload = new Uint8Array(record.payload);
  const languageCodeLength = payload[0];
  const languageCode = String.fromCharCode(...payload.slice(1, 1 + languageCodeLength));
  const text = String.fromCharCode(...payload.slice(1 + languageCodeLength));
  return { languageCode, text };
}

平台差异处理

Android和iOS的NFC实现存在差异:

  • Android需要前台调度系统(Foreground Dispatch)优先处理NFC事件
  • iOS仅支持有限NFC功能,需在manifest.json中添加NFCReaderSession描述
调试技巧

使用以下方法提高开发效率:

  • 通过plus.nfc.getCachedNdefMessage()获取缓存的标签数据
  • 在真机测试时确保屏幕亮起且应用处于前台
  • 使用NFC Tools等辅助工具验证标签写入结果
注意事项
  • 部分Android设备需要开启"NFC"和"Android Beam"功能
  • NFC标签类型需兼容(建议使用NTAG213及以上版本)
  • 写入操作需要物理接触保持1-2秒直至振动反馈
  • iOS系统需要用户明确授权NFC访问权限
完整示例代码
export default {
  methods: {
    initNFC() {
      if (!plus.nfc.isSupported()) {
        uni.showToast({ title: '设备不支持NFC', icon: 'none' });
        return;
      }
      
      plus.nfc.onNdefMessage(res => {
        const record = res.records[0];
        if (record.type === 'T') {
          const { text } = this.parseTextRecord(record);
          uni.showModal({ content: `读取到NFC内容: ${text}` });
        }
      });
    },
    
    writeToNFC(content) {
      const payload = this.buildTextRecord('en', content);
      const record = {
        tnf: 1,
        type: 'T',
        payload: payload
      };
      
      plus.nfc.writeNdefMessage([record], 
        () => uni.showToast({ title: '写入成功' }),
        err => uni.showToast({ title: `写入失败: ${err.code}` })
      );
    },
    
    buildTextRecord(lang, text) {
      const langBytes = Array.from(lang).map(c => c.charCodeAt(0));
      const textBytes = Array.from(text).map(c => c.charCodeAt(0));
      return new Uint8Array([lang.length, ...langBytes, ...textBytes]);
    }
  },
  
  mounted() {
    this.initNFC();
  }
}

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐