全部开发者教程

企业级在线办公系统

一、跳转到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标签,看看页面是否发生跳转。