Ionic 5中如何添加并使用非原生Cordova插件cordova-plugin-k-nfc-acr122u

1. 前置类型声明 #

该插件没有配套的Ionic Native封装，需要先添加全局类型声明避免TS编译报错：
在项目src目录下新建typings.d.ts文件，添加如下内容：

declare var KNfcAcr122U: any;

2. 正确调用逻辑 #

所有Cordova插件必须在Platform.ready回调触发后调用，此时插件才会完成挂载到全局对象：

import { Platform } from '@ionic/angular';

constructor(private platform: Platform) {}

ngOnInit() {
  this.platform.ready().then(() => {
    // 先校验插件是否正常加载
    if (window.KNfcAcr122U) {
      // 调用connect方法
      KNfcAcr122U.connect(
        (successRes) => {
          console.log('读卡器连接成功', successRes);
        },
        (errorRes) => {
          console.error('读卡器连接失败', errorRes);
        }
      );
    } else {
      console.error('NFC插件未加载，请检查运行环境');
    }
  });
}

3. 常见问题排查 #

• 必须在安卓真机环境运行，浏览器、模拟器均不支持该外接NFC读卡器插件，建议使用ionic cordova run android命令直接打包运行到真机
• 确保手机已经开启OTG功能，并且ACR122U读卡器已通过OTG线正常连接手机
• 首次连接时会弹出USB权限申请，务必允许APP访问USB设备
• 执行cordova plugin list命令，确认cordova-plugin-k-nfc-acr122u存在于已安装插件列表中

内容的提问来源于stack exchange，提问作者Josef11