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

方便我们直接在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码了。