ionic框架NFC插件的坑

ionic掃一掃與NFC功能開發(fā)要點(diǎn)我們介紹了如何引入NFC插件,即通過NFC的addNdefListener事件來監(jiān)聽楣颠,下面我們來說說這個(gè)插件踩了哪些坑

多次響應(yīng)

我們通過this.nfc.addNdefListener().subscribe()來對(duì)nfc返回的observer對(duì)象注冊回調(diào)笛洛,然而實(shí)際調(diào)試過程中夏志,一次NFC接觸事件竟然調(diào)用回調(diào)函數(shù)多次,沒辦法苛让,我們只好通過flag來控制沟蔑,回調(diào)過一次以后,就不讓其執(zhí)行了狱杰,并且在合適的地方重置該狀態(tài)溉贿。

    console.log("接收到NFC事件,此時(shí)標(biāo)記為" + this.global.NfcFlag);
    if (!this.global.NfcFlag) {
        console.log("請(qǐng)等待上一次處理結(jié)束");
        return false;
    }
    this.global.NfcFlag = false;
    console.log("識(shí)別到的NFC標(biāo)記為:" + JSON.stringify(data));
    if (data && data.tag && data.tag.id && data.tag.ndefMessage && data.tag.ndefMessage.length) {
        let payload = data.tag.ndefMessage[0]["payload"];
        //標(biāo)記語言字段的長度
        let langLength = payload[0] & 63;
        //跳過語言標(biāo)記
        let tagContent = this.nfc.bytesToString(payload).slice(langLength + 1);
        console.log('成功掃描到NFC標(biāo)簽內(nèi)容:' + tagContent);
        if (tagContent) {
            //拿到tagContent浦旱,解析id
            let ucode = this.getCode(tagContent, 'ucode');
            if (ucode) {
                //解析到正確的ucode,開始鑒權(quán)
                this.checkLegality(ucode);
            } else {
                //解析失敗
                this.errorUcode(tagContent);
            }
        } else {
            this.errorUcode(tagContent);
        }
    } else {
        //無法識(shí)別的tag
        this.errorUcode("");
    }

第一次進(jìn)入頁面不響應(yīng)

這個(gè)問題確實(shí)困擾了我比較長時(shí)間宇色,通過android studio查看日志發(fā)現(xiàn),第一次其實(shí)有響應(yīng)颁湖,只是沒有進(jìn)入我們在subscribe里注冊的回調(diào)宣蠕。后來查閱相關(guān)資料(請(qǐng)見參考文獻(xiàn))才發(fā)現(xiàn),在插件的java實(shí)現(xiàn)中抢蚀,第一次解析到的是ACTION_NDEF_DISCOVERED,此時(shí)addTagDiscoveredListener能捕獲到該實(shí)際镰禾,而addNdefListener并不響應(yīng)皿曲!然而addTagDiscoveredListener無法得到ndef數(shù)據(jù)吴侦,只能得到tag信息备韧。通過比較和實(shí)驗(yàn)织堂,最后我們綁定原生事件來解決該問題:

    document.addEventListener("ndef-mime", this.nfcListenerSubscribe.bind(this), false);
    document.addEventListener("tag", this.nfcListenerSubscribe.bind(this), false);

這里我們也綁定了tag事件易阳,來對(duì)非ndef標(biāo)簽也進(jìn)行監(jiān)聽潦俺,這樣即便是空白卡拒课,或者其他卡比如公交卡徐勃,也會(huì)進(jìn)入到我們的應(yīng)用而不會(huì)啟動(dòng)應(yīng)用詢問窗口了。

多次寫數(shù)據(jù)會(huì)crash

主要可能還是內(nèi)存問題捕发,我們需要在頁面離開時(shí),取消事件綁定:

ionViewWillLeave() {
document.removeEventListener("ndef-mime", this.nfcListenerSubscribe, false);
document.removeEventListener("tag", this.nfcListenerSubscribe, false);
}

NFC識(shí)別后結(jié)果頁動(dòng)畫異常

這個(gè)問題比較詭異很魂,直接從NFC跳轉(zhuǎn)過來扎酷,對(duì)數(shù)據(jù)進(jìn)行處理并做一定的動(dòng)畫來演示整個(gè)過程,第一遍是可以的遏匆,反復(fù)執(zhí)行動(dòng)畫則出現(xiàn)動(dòng)畫卡頓異常法挨。然而從其他頁面跳轉(zhuǎn)則無此問題,初步分析是因?yàn)轫撁婧蚇FC插件共享一個(gè)進(jìn)程導(dǎo)致資源不足幅聘,這里我們經(jīng)過反復(fù)測試凡纳,用一個(gè)hack來解決。具體方案是定義一個(gè)標(biāo)志位帝蒿,當(dāng)NFC識(shí)別成功后修改該標(biāo)志位荐糜。在頁面ionViewDidEnter中,定義一個(gè)定時(shí)器葛超,監(jiān)控到該值改變即跳轉(zhuǎn)頁面:

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或者事件通知更優(yōu)雅暴氏,然而這兩種方式?jīng)]有解決該問題,具體原因可能還是之前分析的绣张,和NFC模塊共享進(jìn)程資源所導(dǎo)致答渔。

其他

我們剛剛提到了在合適的時(shí)候重置狀態(tài)位,由于我們的操作都是頁面跳轉(zhuǎn)侥涵,因此我們在離開頁面和進(jìn)入頁面時(shí)進(jìn)行狀態(tài)為設(shè)置沼撕,即

ionViewWillLeave() {
    console.log("即將離開NFC頁面");
    this.global.NfcFlag = false;
}

ionViewDidEnter() {
    this.global.NfcFlag = true; //允許NFC
    console.log("在進(jìn)入頁面時(shí)重置flag為true,又可以處理NFC事件了芜飘!");
}

這里使用ionViewDidEnter或者ionViewWillEnter而不放在構(gòu)造函數(shù)中务豺,是為了防止下一個(gè)頁面返回時(shí)不會(huì)重新構(gòu)造,但是可以響應(yīng)以上兩個(gè)函數(shù)嗦明。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末冲呢,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子招狸,更是在濱河造成了極大的恐慌敬拓,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,039評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件裙戏,死亡現(xiàn)場離奇詭異乘凸,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)累榜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門营勤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來灵嫌,“玉大人,你說我怎么就攤上這事葛作∈傩撸” “怎么了?”我有些...
    開封第一講書人閱讀 165,417評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵赂蠢,是天一觀的道長绪穆。 經(jīng)常有香客問我,道長虱岂,這世上最難降的妖魔是什么玖院? 我笑而不...
    開封第一講書人閱讀 58,868評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮第岖,結(jié)果婚禮上难菌,老公的妹妹穿的比我還像新娘。我一直安慰自己蔑滓,他們只是感情好郊酒,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著键袱,像睡著了一般猎塞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上杠纵,一...
    開封第一講書人閱讀 51,692評(píng)論 1 305
  • 那天荠耽,我揣著相機(jī)與錄音,去河邊找鬼比藻。 笑死铝量,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的银亲。 我是一名探鬼主播慢叨,決...
    沈念sama閱讀 40,416評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼务蝠!你這毒婦竟也來了拍谐?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,326評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤馏段,失蹤者是張志新(化名)和其女友劉穎轩拨,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體院喜,經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡亡蓉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了喷舀。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片砍濒。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡淋肾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出爸邢,到底是詐尸還是另有隱情樊卓,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評(píng)論 5 346
  • 正文 年R本政府宣布杠河,位于F島的核電站碌尔,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏感猛。R本人自食惡果不足惜七扰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3 331
  • 文/蒙蒙 一奢赂、第九天 我趴在偏房一處隱蔽的房頂上張望陪白。 院中可真熱鬧,春花似錦膳灶、人聲如沸咱士。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽序厉。三九已至,卻和暖如春毕箍,著一層夾襖步出監(jiān)牢的瞬間弛房,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評(píng)論 1 272
  • 我被黑心中介騙來泰國打工而柑, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留文捶,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3 373
  • 正文 我出身青樓媒咳,卻偏偏與公主長得像粹排,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子涩澡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,167評(píng)論 25 707
  • 1.利用三方庫的支持三方demo點(diǎn)這里 2.將demo中SSKeychain.h SSKeychain.m文件拖入...
    ControlM閱讀 4,532評(píng)論 1 4
  • 題目1: jQuery 中顽耳, $(document).ready()是什么意思?所有包括在$(document)....
    好好頑閱讀 259評(píng)論 0 1
  • 2017.06.26《活法》學(xué)習(xí):鍥而不舍干到底妙同,結(jié)果只能是成功射富。契而不舍的精神在大發(fā)發(fā)展過程隨去可見。例如:我們...
    sandy201704閱讀 158評(píng)論 0 0