Ionic 使用 NFC

Ionic 使用 NFC

哎哟喂，因为项目需要使用 Ionic 调用手机 NFC 功能，踩了好多坑，真的是，不过终于不负众望拿到了id。现在就记录一下我的步骤和踩过的坑！

步骤

我装的Ionic可能是最新的，然后用到的调用NFC的插件是phonegap-nfc。

首先就是正常的创建项目，对了，我用的Angular 。

给一下ionic官网是怎么说的，但是我觉得这个官网作用不大，但是还是贴一下吧

https://ionicframework.com/docs/v3/native/nfc/

然后项目创建完成起来了之后去安装插件。

用下面两条命令安装插件：

ionic cordova plugin add phonegap-nfc

npm install @ionic-native/nfc

安装完成需要在项目里面注入依赖，首先是 app.module.ts 文件里面，引入插件

import {NFC, Ndef} from '@ionic-native/nfc/ngx';

然后在 @NgModule 里面的 providers 里面加入 NFC 和 Ndef，就像这个样子：

providers: [
        ···
        NFC,
        Ndef,
        ···
    ],

然后在需要调用的页面里面引入插件，注入一下依赖：

import {NFC, Ndef} from '@ionic-native/nfc/ngx';

在构造函数里面加点东西：

constructor(private nfc: NFC, private ndef: Ndef) {}

最后监听 NFC 就可以了，可以写一个方法，都行，开心就好。

	    this.nfc.addTagDiscoveredListener(() => {
            console.log('successfully attached ndef listener');
            alert('启动监听nfc');
        }, (err) => {
            alert('监听nfc失败' + err);
            console.log('error attaching ndef listener', err);
        }).subscribe((event) => {
            this.tag = event.tag;
            this.id = this.nfc.bytesToHexString(event.tag.id);
        });

这样子的话，打一个包，直接生成apk文件，找一个有 NFC 的手机就可以测试一下了，NFC的权限不用管，默认都给了，不用额外加权限。

还有 addTagDiscoveredListener 方法是 为匹配任何标签类型的标签注册一个事件侦听器。

如果需要其他的监听类型可以修改，下面是官方的文档，有很多类型根据自己的需要改吧！

https://github.com/chariotsolutions/phonegap-nfc#nfcaddndeflistener

应该没问题！

踩过的坑

首先我没在 app.module.ts 文件里面注入依赖

其次我最开是根据 ionic NFC 官网写的 ，但是官网写的监听事件是 addNdefListener ：为任何NDEF标签注册一个事件监听器。，巧就巧在我直接找了张卡去读，结果显示监听是没问题的，但是卡贴上手机就是不走回调，就看github，然后改了个监听的方式，换成了 addTagDiscoveredListener：为匹配任何标签类型的标签注册一个事件侦听器 来监听，就OK了，所以说根据实际的需求，去github也就是上边那个链接选择自己合适的监听事件来监听NFC的消息。就是这样。

结束！