坑
在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而不放在构造函数中,是为了防止下一个页面返回时不会重新构造,但是可以响应以上两个函数。