應(yīng)用場(chǎng)景如下圖：
在NFC按鈕可能在被頻繁開(kāi)啟的情況下，NFC會(huì)出現(xiàn)標(biāo)簽靠近一次悠菜，會(huì)觸發(fā)N次重復(fù)識(shí)別的情況舰攒，咱上代碼，閉坑悔醋。
demo布局：
<template>
????<view class="content">
????????<view class="uid-list">
????????????????<view class="item" v-for="(item,index) in uid" :key="index">
????????????????????<text>{{item.code}}</text>
????????????????????<text @tap="remove(item.code)">刪除</text>
? ? ? ?</view>
????????</view>
????????<view class="btn-group">
????????????<button @tap="startNFC" v-if="!openNFC">開(kāi)始NFC監(jiān)聽(tīng)</button>
????????????<button @tap="stopNFC" v-else>停止NFC監(jiān)聽(tīng)</button>
? ? ?????</view>
????</view>
</template>
js內(nèi)容：
<script>
let vm
let NFC
export default {
????data() {
????????return {
????????????uid: [],
????????????openNFC: false
????????}
????},
????onShow() {
????????vm = this
????},
????onUnload() {
????????vm.stopNFC()
????},
????methods: {
????????// 開(kāi)始監(jiān)聽(tīng)NFC
????????startNFC() {
????????????//不支持ios平臺(tái)
????????????if (uni.getSystemInfoSync().platform == 'ios') {
????????????????uni.showToast({
????????????????title: '不支持IOS設(shè)備',
????????????????????icon: 'none'
????????????????})
????????????????return
????????????}
????????????NFC = wx.getNFCAdapter()
????????????// 開(kāi)始監(jiān)聽(tīng)
????????????NFC.startDiscovery({
????????????????success() {
????????????????????vm.openNFC = true
????????????????????// 綁定監(jiān)聽(tīng) NFC Tag
????????????????????NFC.onDiscovered(vm.onDiscoveredCallBack)
????????????????},
????????????????fail(err) {
????????????????????if (err.errCode === 13000) {
????????????????????uni.showToast({
????????????????????????title: '當(dāng)前設(shè)備不支持NFC功能',
????????????????????????icon: 'none'
????????????????????})
????????????????} else if (err.errCode === 13001) {
????????????????????uni.showToast({
????????????????????????title: '請(qǐng)?jiān)谠O(shè)備上開(kāi)啟NFC功能',
????????????????????????icon: 'none'
????????????????????})
????????????????} else {
? ? ? ? ? ? ? ? ? ?vm.openNFC = false
???????????????????console.log('未建立NFC功能監(jiān)聽(tīng):', err)
????????????????}
????????????}
????????})
????},
????// onDiscovered回調(diào)函數(shù)
????onDiscoveredCallBack(res) {
????????vm.serializeUID(res)
????},
????// 拼裝UID
????serializeUID(res) {
????????// 回調(diào)函數(shù)中res有3個(gè)屬性芒率，id,techs,messages,因?yàn)槲覀円@取NFC Tag,所以只處理id
????????// 返回的id屬性值是一個(gè)ArrayBuffer類型
????????// 使用 new Uint8Array處理返回一個(gè)數(shù)組
????????const data = new Uint8Array(res.id)
????????let str = []
????????data.forEach(e => {
????????????// 因?yàn)槲覀兊目ㄌ?hào)是16位制的，所以這里選擇轉(zhuǎn)換成16位數(shù)字
????????????let item = e.toString(16)
????????????if (item.length == 1) {
????????????????item = '0' + item
????????????}
????????????// 因?yàn)槲覀冃枰氖谴髮?xiě)篙顺，所以要轉(zhuǎn)
????????????item = item.toUpperCase()
????????????str.push(item)
????????})
????????// 最終結(jié)果
????????const code = str.join('')
????????const has = vm.uid.some(item => item.code == code)
????????if (!has) {
????????????vm.uid.push({
????????????????code
????????????})
????????} else {
????????????uni.showToast({
????????????????title: '重復(fù)添加',
????????????????icon: 'none'
????????????})
????????}
????},
????????// 停止監(jiān)聽(tīng)
????????stopNFC() {
????????????// 取消監(jiān)聽(tīng) NFC Tag
????????????NFC.offDiscovered(vm.onDiscoveredCallBack)
????????????// 停止監(jiān)聽(tīng)貼卡
????????????NFC.stopDiscovery()
????????????// 重置 NFC 實(shí)例
????????????NFC = null
????????????//NFC按鈕開(kāi)關(guān)
????????????vm.openNFC = false
????????},
????????// 移除
????????remove(code) {
????????????this.uid = this.uid.filter(item => item.code != code)
????????},
????}
}
</script>
demo的css：
<style lang="scss">
.content {
????margin: 25rpx;
}
.uid-list {
????display: flex;
????flex-direction: column;
????align-items: center;
????justify-content: center;
????margin: 0 0 20rpx;
????.item {
????????display: flex;
????????flex-direction: row;
????????align-items: center;
????????justify-content: space-between;
????????margin: 20rpx 0;
????????padding: 20rpx;
????????border: 1rpx solid #ccc;
????????border-radius: 10rpx;
????????width: 100%;
????????box-sizing: border-box;
????}
}
.num {
????padding: 20rpx 0;
}
.btn-group {
????//浮動(dòng)到底部
????position: fixed;
????bottom: 50rpx;
????left: 0;
????right: 0;
????padding: 20rpx 100rpx;
}
</style>
坑點(diǎn)：onDiscovered的回調(diào)一定要另外寫(xiě)一個(gè)，具體參照上述代碼充择，不能直接這樣寫(xiě)
onDiscovered(res => {
? ? //TODO
})
一旦這樣寫(xiě)了德玫，offDiscovered就無(wú)法銷(xiāo)毀onDiscovered，在多次點(diǎn)擊開(kāi)關(guān)后椎麦，標(biāo)簽會(huì)出發(fā)多次宰僧，產(chǎn)生BUG，切記观挎，切記琴儿，切記段化；
以上就是今天的分享，希望能幫到各位道友造成，如有異議显熏，以你為準(zhǔn)；
