uni-app微信小程序识别NFC(基础版)
【摘要】本文介绍了在uni-app中实现NFC碰一碰功能的方法。通过uni.getNFCAdapter()获取NFC适配器,监听发现事件并解析NFC标签数据。关键点包括:1)启动NFC发现功能;2)处理包含NDEF格式的数据时,需使用TextDecoder解码;3)针对特殊格式数据(如自动添加的"en"前缀)设计解析逻辑。作者以写入{id:123,sort:9}的NFC标签为例
·
前言:手机在打开小程序的情况下识别NFC,实现碰一碰NFC,拿到NFC中的参数
难点:文档真的恶心啊
废话不多说直接上代码,写完比想象中的简单,也是最简单的,文档里还有很多玩法,比如NFC直接唤起小程序等等,又比这个麻烦
我的项目是uni-app,所以写法就是vue的
我在nfc中写入的是{id: 123, sort: 9} 这里是重点
onShow() {
// 我在nfc中写入的是{id: 123, sort: 9}
const nfc = uni.getNFCAdapter();
this.nfc = nfc;
nfc.onDiscovered(this.discoverHandler);
nfc.startDiscovery({
success(res) {
console.log('nfc启动成功', res);
},
fail(err) {
console.log('nfc启动失败', err);
},
});
},
methods: {
discoverHandler(res) {
console.log('res0:', res);
if (res.techs.includes(this.nfc.tech.ndef)) {
let Ndef = this.nfc.getNdef();
console.log(Ndef);
// 这层是死的,直接就能读到,仅限于简单的需求
let payload = res.messages[0].records[0].payload;
// 这里需要 pnpm add TextDecoder 小程序中没这个控件,但开发者工具有,很恶心
let text = new TextDecoder().decode(payload);
// text识别出来是"'en{id: 123, sort: 9}'",结构比较恶心,建议真机看log
// 我也不知道nfc这里怎么插入了一个en,费解,不过管他呢
if (text.includes('en')) {
// 这里得一步一步调试,如果你和我格式一样那这个方法直接拿来用就完了
let obj = this.convertStringToObjectManual(text);
console.log(obj); // 这里解析出来就是{id: 123, sort: 9}
// 接着写你的业务逻辑就行了............
}
return;
}
},
convertStringToObjectManual(str) {
const startIndex = str.indexOf('{');
const endIndex = str.lastIndexOf('}');
if (startIndex !== -1 && endIndex !== -1) {
const content = str.slice(startIndex + 1, endIndex);
const pairs = content.split(',');
const result = {};
pairs.forEach((pair) => {
const [key, value] = pair.split(':').map((item) => item.trim());
if (key && value) {
result[key] = parseInt(value) || value.replace(/['"]/g, '');
}
});
return result;
}
return null;
},
}
更多推荐
所有评论(0)