Vue:uniapp实现NFC标签读取功能

微信小程序官方文档中提供了调用NFC功能的基础库:

NFC - wx.getNFCAdapter - 《微信小程序官方开发文档(全) - 20210305》 - 书栈网 · BookStackNFCAdapter wx.getNFCAdapter()返回值NFCAdapter错误示例代码 微信小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。本手册整理于2021年3月份,内容包含微信小程序开发指南、微信小程序框架、微信小程序组件、微信小程序API、微信小程序服务端文档、微信小程序开飞工具、微信小程序云开发以及微信小程序扩icon-default.png?t=M4ADhttps://www.bookstack.cn/read/miniprogram-guide-20210305/04db66f176e57bc8.md方便我们直接在uniapp小程序中直接调用NFC的功能

所以我们在用到NFC读取功能的页面中,写一个方法把NFC相关权限进行打开,写在methods中:

testNFC() {
				const nfc = wx.getNFCAdapter()
				this.nfc = nfc
				let _this = this

				function discoverHandler(res) {
					const data = new Uint8Array(res.id)
					let str = ""
					data.forEach(e => {
						let item = e.toString(16)
						if (item.length == 1) {
							item = '0' + item
						}
						item = item.toUpperCase()
						str += item
					})
					/* 这里获取的str就是我们读取出的UID码了 */
					
					/* ------这里是我的项目中拿到NFC的UID码之后的业务逻辑,可以忽略------ */
					if (str) {
						uni.showLoading({
							title: '解析中'
						});
					}
					/* ------------------------------------------------------------------ */
				}
				nfc.startDiscovery({
					success(res) {
						uni.showToast({
							title: 'NFC读取功能已开启!',
							icon: 'none'
						})
						nfc.onDiscovered(discoverHandler)
					},
					fail(err) {
						if (!err.errCode) {
							uni.showToast({
								title: '请检查NFC功能是否正常!',
								icon: 'none'
							})
							return
						}
					}
				})
			},

因为我们想要在打开当前页面后,就可以直接用手机读取NFC码,不需要其他的动作进行触发,所以我们在页面加载的时候,就调用上面的testNFC方法:

mounted() {
			this.testNFC()
		},

效果:

打开当前页面后,有NFC功能的手机会进行NFC相关功能权限的授权,会提示“NFC读取功能已开启!”

把NFC标签靠近手机NFC感应器,就可以正确获取UID码了。

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在Vue 3中实现NFC读取身份证号功能,你需要使用Web NFC API。这个API允许网页应用程序与NFC标签进行通信并读取数据。以下是实现这一功能的简单步骤: 1. 首先,在Vue 3项目中安装必要的依赖项,包括 @vue/web-api 和 nfc-pcsc。 ``` npm install @vue/web-api nfc-pcsc ``` 2. 在Vue组件中导入所需的依赖项,并在mounted钩子中初始化NFC读卡器。 ```javascript import { defineComponent } from 'vue' import { useNfc } from '@vue/web-api' import nfcPcsc from 'nfc-pcsc' export default defineComponent({ mounted() { const { reader, reading } = useNfc(nfcPcsc) // 初始化读卡器 reader.value .init() .then(() => console.log('NFC Reader initialized!')) .catch(err => console.error('Failed to initialize NFC Reader', err)) } }) ``` 3. 在模板中添加按钮或其他元素来触发读取身份证号的操作,并使用v-if指令根据读取状态控制元素的显示。 ```html <template> <div> <button @click="readCard" v-if="!reading">读取身份证号</button> <span v-if="reading">正在读取,请靠近身份证</span> <div v-if="cardNumber">身份证号:{{ cardNumber }}</div> </div> </template> ``` 4. 在Vue组件中添加读取身份证号的方法,该方法将使用NFC读卡器来获取身份证号。 ```javascript export default defineComponent({ data() { return { reading: false, cardNumber: null } }, methods: { async readCard() { this.reading = true try { // 获取NFC标签 const tag = await reader.value.scan() // 读取身份证号 const response = await tag.sendCommand([0x00, 0xCA, 0x01, 0x00, 0x00]) // 将身份证号存储在组件数据中 this.cardNumber = String.fromCharCode(...response.slice(0, 16)) } catch (err) { console.error('Failed to read card', err) } this.reading = false } } }) ``` 这就是如何在Vue 3中使用Web NFC API实现读取身份证号的简单步骤。请注意,Web NFC API目前仅适用于Android设备和Chrome浏览器。要在其他设备和浏览器上使用NFC,您需要使用其他API或库。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值