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

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

NFC - wx.getNFCAdapter - 《微信小程序官方开发文档(全) - 20210305》 - 书栈网 · BookStackNFCAdapter wx.getNFCAdapter()返回值NFCAdapter错误示例代码 微信小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。本手册整理于2021年3月份，内容包含微信小程序开发指南、微信小程序框架、微信小程序组件、微信小程序API、微信小程序服务端文档、微信小程序开飞工具、微信小程序云开发以及微信小程序扩https://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码了。