一、跳转到NFC扫码页面
在小程序的mine.vue
页面上有NFC扫码选项,我们需要添加点击事件回调函数。
首先我们看一下页面视图层的标签,如下:
<uni-list-item title="NFC" clickable @click="scanNFC"></uni-list-item>
我们要定义scanNFC()
函数,跳转到nfc.vue
页面。
scanNFC: function() {
uni.navigateTo({
url: '../nfc/nfc'
});
}
二、理解扫码页面
小程序的nfc.vue
页面内容比较简单,只包含了图片和提示文字,所以视图层标签页相对简单。
<view>
<image src="../../static/NFC.png" mode="widthFix" class="img"></image>
<view class="desc">请把手机靠近读卡器或者NFC标签</view>
</view>
三、往NFC标签中写入数据
NFC标签的功能有两种,一个是签到,另一个是查看会议室状态。我们先来做一个查询会议室状态的NGC标签,往NFC标签中写入MRIF#5
,其中数字5代表的是线下会议室的ID,你自己从tb_meeting_room
数据表中找一个会议室的ID就可以。必须先格式化NFC标签,然后写入上面的字符串,会议室ID你自己规定。
四、小程序识别NFC标签
所有的NFC卡片前8个字节都是UID信息,包含了标准、生产厂商等信息,这些我们可以略过不用不去管,读取数据的时候,我们直接略过这8个字节数据即可。我们要在nfc.vue
页面中写入下面的内容:
因为读取NFC标签的指令和读取的数据都要用上Uint8Array格式,所以我们需要有一个能把Uint8Array转换成普通文本的函数。
methods: {
Uint8ArrayToString: function(fileData) {
var dataString = '';
for (let i = 0; i < fileData.length; i++) {
dataString += String.fromCharCode(fileData[i]);
}
return dataString;
}
},
把读取NFC标签数据的代码写到nfc.vue
页面的onLoad()
回调函数中。
onLoad: function() {
let that = this;
let NFCAdapter = wx.getNFCAdapter();
//开启小程序NFC功能
NFCAdapter.startDiscovery({
//开启NFC功能成功的回调函数
success: function(resp) {
},
//开启NFC失败的回调函数
fail: function(error) {
}
});
//与NFC握手成功的回调函数
NFCAdapter.onDiscovered(function(resp) {
let NfcA = NFCAdapter.getNfcA();
//创建于NFC的数据通道
NfcA.connect({
success: function() {
//字节命令,0x3a是读取数据指令,0x07和0x14是跳过前8个字节,往后读少个字节
let dataBytes = [0x3a, 0x07, 0x14];
//把Uint8Array格式的命令转换成普通文本
let dataBuffer = new Uint8Array(dataBytes).buffer;
//开始执行数据读取命令
NfcA.transceive({
data: dataBuffer, //要执行的命令
success: function(resp) {
//处理读取的数据,过滤掉无用字符
let temp = new Uint8Array(resp.data);
temp = temp.slice(2);
temp = temp.filter(function(one) {
return one != 0 && one != 254;
});
temp = that.Uint8ArrayToString(temp); //处理好的文本
console.log(temp)
let module = temp.split('#')[0];
let id = temp.split('#')[1];
//如果字符串以MRIF开头,就跳转到会议室详情页面
if (module == 'MRIF') {
uni.navigateTo({
url: '../../meeting/meeting_room?meetingRoomId=' + id
});
}
//如果字符串以MTCK开头,就跳转到会议签到页面
if (module == 'MTCK') {
uni.navigateTo({
url: '../../meeting/meeting_checkin?meetingRoomId=' + id
});
}
},
fail: function(error) {
console.log('发送数据失败', error);
},
complete: function() {
NfcA.close();
}
});
}
});
});
}
代码写好之后,先把emos-wx-api运行起来,然后正常运行小程序,用手机扫描NFC标签,看看页面是否发生跳转。