应用场景如下图：
在NFC按钮可能在被频繁开启的情况下，NFC会出现标签靠近一次，会触发N次重复识别的情况，咱上代码，闭坑。
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">开始NFC监听</button>
<button @tap="stopNFC" v-else>停止NFC监听</button>
</view>
</view>
</template>
js内容：
<script>
let vm
let NFC
export default {
data() {
return {
uid: [],
openNFC: false
}
},
onShow() {
vm = this
},
onUnload() {
vm.stopNFC()
},
methods: {
// 开始监听NFC
startNFC() {
//不支持ios平台
if (uni.getSystemInfoSync().platform == 'ios') {
uni.showToast({
title: '不支持IOS设备',
icon: 'none'
})
return
}
NFC = wx.getNFCAdapter()
// 开始监听
NFC.startDiscovery({
success() {
vm.openNFC = true
// 绑定监听 NFC Tag
NFC.onDiscovered(vm.onDiscoveredCallBack)
},
fail(err) {
if (err.errCode === 13000) {
uni.showToast({
title: '当前设备不支持NFC功能',
icon: 'none'
})
} else if (err.errCode === 13001) {
uni.showToast({
title: '请在设备上开启NFC功能',
icon: 'none'
})
} else {
vm.openNFC = false
console.log('未建立NFC功能监听:', err)
}
}
})
},
// onDiscovered回调函数
onDiscoveredCallBack(res) {
vm.serializeUID(res)
},
// 拼装UID
serializeUID(res) {
// 回调函数中res有3个属性，id,techs,messages,因为我们要获取NFC Tag,所以只处理id
// 返回的id属性值是一个ArrayBuffer类型
// 使用 new Uint8Array处理返回一个数组
const data = new Uint8Array(res.id)
let str = []
data.forEach(e => {
// 因为我们的卡号是16位制的，所以这里选择转换成16位数字
let item = e.toString(16)
if (item.length == 1) {
item = '0' + item
}
// 因为我们需要的是大写，所以要转
item = item.toUpperCase()
str.push(item)
})
// 最终结果
const code = str.join('')
const has = vm.uid.some(item => item.code == code)
if (!has) {
vm.uid.push({
code
})
} else {
uni.showToast({
title: '重复添加',
icon: 'none'
})
}
},
// 停止监听
stopNFC() {
// 取消监听 NFC Tag
NFC.offDiscovered(vm.onDiscoveredCallBack)
// 停止监听贴卡
NFC.stopDiscovery()
// 重置 NFC 实例
NFC = null
//NFC按钮开关
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 {
//浮动到底部
position: fixed;
bottom: 50rpx;
left: 0;
right: 0;
padding: 20rpx 100rpx;
}
</style>
坑点：onDiscovered的回调一定要另外写一个，具体参照上述代码，不能直接这样写
onDiscovered(res => {
//TODO
})
一旦这样写了，offDiscovered就无法销毁onDiscovered，在多次点击开关后，标签会出发多次，产生BUG，切记，切记，切记；
以上就是今天的分享，希望能帮到各位道友，如有异议，以你为准；
