坑
在ionic扫一扫与NFC功能开发要点我们介绍了如何引入NFC插件，即通过NFC的addNdefListener事件来监听，下面我们来说说这个插件踩了哪些坑
多次响应
我们通过this.nfc.addNdefListener().subscribe()来对nfc返回的observer对象注册回调，然而实际调试过程中，一次NFC接触事件竟然调用回调函数多次，没办法，我们只好通过flag来控制，回调过一次以后，就不让其执行了，并且在合适的地方重置该状态。
console.log("接收到NFC事件，此时标记为" + this.global.NfcFlag);
if (!this.global.NfcFlag) {
console.log("请等待上一次处理结束");
return false;
}
this.global.NfcFlag = false;
console.log("识别到的NFC标记为:" + JSON.stringify(data));
if (data && data.tag && data.tag.id && data.tag.ndefMessage && data.tag.ndefMessage.length) {
let payload = data.tag.ndefMessage[0]["payload"];
//标记语言字段的长度
let langLength = payload[0] & 63;
//跳过语言标记
let tagContent = this.nfc.bytesToString(payload).slice(langLength + 1);
console.log('成功扫描到NFC标签内容：' + tagContent);
if (tagContent) {
//拿到tagContent，解析id
let ucode = this.getCode(tagContent, 'ucode');
if (ucode) {
//解析到正确的ucode,开始鉴权
this.checkLegality(ucode);
} else {
//解析失败
this.errorUcode(tagContent);
}
} else {
this.errorUcode(tagContent);
}
} else {
//无法识别的tag
this.errorUcode("");
}
第一次进入页面不响应
这个问题确实困扰了我比较长时间，通过android studio查看日志发现，第一次其实有响应，只是没有进入我们在subscribe里注册的回调。后来查阅相关资料(请见参考文献)才发现，在插件的java实现中，第一次解析到的是ACTION_NDEF_DISCOVERED，此时addTagDiscoveredListener能捕获到该实际，而addNdefListener并不响应！然而addTagDiscoveredListener无法得到ndef数据，只能得到tag信息。通过比较和实验，最后我们绑定原生事件来解决该问题：
document.addEventListener("ndef-mime", this.nfcListenerSubscribe.bind(this), false);
document.addEventListener("tag", this.nfcListenerSubscribe.bind(this), false);
这里我们也绑定了tag事件，来对非ndef标签也进行监听，这样即便是空白卡，或者其他卡比如公交卡，也会进入到我们的应用而不会启动应用询问窗口了。
多次写数据会crash
主要可能还是内存问题，我们需要在页面离开时，取消事件绑定：
ionViewWillLeave() {
document.removeEventListener("ndef-mime", this.nfcListenerSubscribe, false);
document.removeEventListener("tag", this.nfcListenerSubscribe, false);
}
NFC识别后结果页动画异常
这个问题比较诡异，直接从NFC跳转过来，对数据进行处理并做一定的动画来演示整个过程，第一遍是可以的，反复执行动画则出现动画卡顿异常。然而从其他页面跳转则无此问题，初步分析是因为页面和NFC插件共享一个进程导致资源不足，这里我们经过反复测试，用一个hack来解决。具体方案是定义一个标志位，当NFC识别成功后修改该标志位。在页面ionViewDidEnter中，定义一个定时器，监控到该值改变即跳转页面：
let timer = setInterval(()=>{
if(this.chipInfo.tagid) {
clearInterval(timer);
timer = null;
this.navCtrl.push(BarcodeResultPage, {
tagid: this.chipInfo.tagid,
signature: this.chipInfo.signature,
ucode: this.chipInfo.ucode
});
}
}, 80);
这里使用Observable或者事件通知更优雅，然而这两种方式没有解决该问题，具体原因可能还是之前分析的，和NFC模块共享进程资源所导致。
其他
我们刚刚提到了在合适的时候重置状态位，由于我们的操作都是页面跳转，因此我们在离开页面和进入页面时进行状态为设置，即
ionViewWillLeave() {
console.log("即将离开NFC页面");
this.global.NfcFlag = false;
}
ionViewDidEnter() {
this.global.NfcFlag = true; //允许NFC
console.log("在进入页面时重置flag为true，又可以处理NFC事件了！");
}
这里使用ionViewDidEnter或者ionViewWillEnter而不放在构造函数中，是为了防止下一个页面返回时不会重新构造，但是可以响应以上两个函数。
网友评论