uni-app实现NFC读取功能_javascript技巧

这篇文章主要为大家详细介绍了uni-app实现NFC读取功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了uni-app实现NFC读取功能的具体代码，供大家参考，具体内容如下

好久没有写博客了，今天难得有空重新记录自己学习的点点滴滴。

1、NFC方法.js

// 包路径
const package_NdefRecord = \’android.nfc.NdefRecord\’;
const package_NdefMessage = \’android.nfc.NdefMessage\’;
const package_TECH_DISCOVERED = \’android.nfc.action.TECH_DISCOVERED\’;
const package_Intent = \’android.content.Intent\’;
const package_Activity = \’android.app.Activity\’;
const package_PendingIntent = \’android.app.PendingIntent\’;
const package_IntentFilter = \’android.content.IntentFilter\’;
const package_NfcAdapter = \’android.nfc.NfcAdapter\’;
const package_Ndef = \’android.nfc.tech.Ndef\’;
const package_NdefFormatable = \’android.nfc.tech.NdefFormatable\’;
const package_Parcelable = \’android.os.Parcelable\’;
const package_String = \’java.lang.String\’;

let NfcAdapter;
let NdefRecord;
let NdefMessage;
let readyRead = true; //开启读
let noNFC = false;
let techListsArray = [
[\’android.nfc.tech.IsoDep\’],
[\’android.nfc.tech.NfcA\’],
[\’android.nfc.tech.NfcB\’],
[\’android.nfc.tech.NfcF\’],
[\’android.nfc.tech.Nfcf\’],
[\’android.nfc.tech.NfcV\’],
[\’android.nfc.tech.NdefFormatable\’],
[\’android.nfc.tech.MifareClassi\’],
[\’android.nfc.tech.MifareUltralight\’]
];
// 要写入的数据
let text = \'{id:8888,name:nfc,stie:wangqin.com}\’;
let readResult = \’\’;

export default {
listenNFCStatus: function() {
console.log(\”———listenNFCStatus————–\”)
let that = this;
try {
let main = plus.android.runtimeMainActivity();
let Intent = plus.android.importClass(\’android.content.Intent\’);
let Activity = plus.android.importClass(\’android.app.Activity\’);
let PendingIntent = plus.android.importClass(\’android.app.PendingIntent\’);
let IntentFilter = plus.android.importClass(\’android.content.IntentFilter\’);
NfcAdapter = plus.android.importClass(\’android.nfc.NfcAdapter\’);
let nfcAdapter = NfcAdapter.getDefaultAdapter(main);
if (nfcAdapter == null) {
uni.showToast({
title: \’设备不支持NFC！\’,
icon: \’none\’
})
noNFC = true;
return;
}
if (!nfcAdapter.isEnabled()) {
uni.showToast({
title: \’请在系统设置中先启用NFC功能！\’,
icon: \’none\’
});
noNFC = true;
return;
} else {
noNFC = false;
}

let intent = new Intent(main, main.getClass());
intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);
let pendingIntent = PendingIntent.getActivity(main, 0, intent, 0);
let ndef = new IntentFilter(\”android.nfc.action.TECH_DISCOVERED\”);
ndef.addDataType(\”*/*\”);
let intentFiltersArray = [ndef];

//重点部分代码
const promise = new Promise((resolve, reject) => {
plus.globalEvent.addEventListener(\’newintent\’, function() {
// 轮询调用 NFC
// setTimeout(that.nfcRuning(resolve), 1000);
setTimeout(() => {
that.nfcRuning(resolve)
}, 1000);
});
})

nfcAdapter.enableForegroundDispatch(main, pendingIntent, intentFiltersArray, techListsArray);
return promise
} catch (e) {
}
},
nfcRuning: function(resolve) {
// console.log(\”————–nfcRuning—————\”)
NdefRecord = plus.android.importClass(\”android.nfc.NdefRecord\”);
NdefMessage = plus.android.importClass(\”android.nfc.NdefMessage\”);
let main = plus.android.runtimeMainActivity();
let intent = main.getIntent();
let that = this;
if (package_TECH_DISCOVERED == intent.getAction()) {
if (readyRead) {
//这里通过read方法拿到NFC数据
const id = that.read(intent);
// readyRead = false;
//将数据返回出去
resolve(id)
}
}
},

read(intent) {
// toast(\’请勿移开标签正在读取数据\’);
let that = this;
// NFC id
let bytesId = intent.getByteArrayExtra(NfcAdapter.EXTRA_ID);
let nfc_id = that.byteArrayToHexString(bytesId);

return nfc_id;
},
byteArrayToHexString: function(inarray) { // converts byte arrays to string
let i, j, inn;
let hex = [\”0\”, \”1\”, \”2\”, \”3\”, \”4\”, \”5\”, \”6\”, \”7\”, \”8\”, \”9\”, \”A\”, \”B\”, \”C\”, \”D\”, \”E\”, \”F\”];
let out = \”\”;

for (j = 0; j < inarray.length; ++j) {
inn = inarray[j] & 0xff;
i = (inn >>> 4) & 0x0f;
out += hex[i];
i = inn & 0x0f;
out += hex[i];
}
return out;
},

}

function toast(content) {
uni.showToast({
title: content,
icon: \’none\’
})
}

2、在用NFC的页面调用方法

<view class=\”flex nfc-ewm\”>
<view class=\”nfc-ewm-item\” style=\”border-right: 1px solid #ccc;\” @click=\”testNFC\”>
<image src=\”@/assets/images/application/icon-nfc.png\” alt=\”\”></image>NFC感应
</view>
<view class=\”nfc-ewm-item\” @click=\”openScanCode\”>
<image src=\”@/assets/images/application/icon-ewm.png\” alt=\”\”></image>二维码扫描
</view>
</view>

import testtest from \”../../../../../components/hexiii-nfc/hexiii-nfc.js\”

methods：{
async testNFC() {
//这里用异步获取读取到的NFC数据
const nfcId = await testtest.listenNFCStatus();
//console.log(nfcId )

//以下数据是我的业务逻辑代码，如果只要读取NFC数据上面那一行代码即可了。
const arr = []
this.list2.forEach(e => {
arr.push(e.code)
})
if(!nfcId) return
if ( arr.indexOf(nfcId) === -1) {
uni.showToast({
icon: \’none\’,
title: \’未找到对应巡检点!\’,
duration: 2000
});
} else {
uni.showToast({
icon: \’none\’,
title: \’识别成功!\’,
duration: 2000
});
uni.navigateTo({
url: `/pages/application/XunJianGuanLi/XunJianRenWu/KaiShiXunJian3/index?id=${this.id}&spotCode=${nfcId}&delta=${this.delta+1}`,
});
}
},
}

3、页面效果图

4、总结

以上就是我读取NFC数据的实现了，根据用户扫描NFC读取的数据自动跳转到对应的签到巡检点。代码还有待完善，请多多指导，第一部分中NFC的方法，因为我只需要读取代码，所以很多多余的、不用的代码已被我删除了，只留下了需要的代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持3399IT网。

本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com