微信小程序使用nfc读取

news2024/12/21 21:46:37

**

微信小程序开发nfc读取

**
在这里插入图片描述
(注释微信官方api,仅支持安卓,不支持苹果ios)官方文档

上代demo

<template>
	<div class="nfc">
		<u-navbar leftIcon="arrow-leftward" bgColor="#ffffff" leftIconColor="#000000" title="nfc管理" :autoBack="true"
			:safeAreaInsetTop="true" :placeholder="true" :fixed="true" titleStyle="font-size: 48rpx;color:#000000">
		</u-navbar>
		<button class="" @tap="read()">读取NFC</button>
		<textarea class="txtarea" disabled :value="readData" placeholder="nfc卡数据" />

		<textarea class="txtarea" style="margin-top: 26rpx;" v-model="writeTxt" maxlength="124"
			placeholder="请输入需要写入nfc的数据" />
		<button class="" @tap="write()">写入NFC</button>
		<button class="btn" @click="cleardata()">重置页面</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				nfc: null,
				readData: '',
				writeTxt: '',

			}
		},

		onLoad() {
			this.nfc = wx.getNFCAdapter()
			// 开始监听   不能缺少
			this.nfc.startDiscovery({
				success(res) {
					console.log("建立连接", res)
				},
				fail(err) {
					console.log('建立连接err:', err)
				}
			})
		},
		onShow() {

		},
		onReady() {},
		methods: {
			read() { //读取
				// 绑定监听 NFC 标签
				this.nfc.onDiscovered(res => {
					console.log("监听的数据", res)
					if (res.messages && res.messages[0].records && res.messages[0].records[0].payload) {
						this.getData(res.messages[0].records[0].payload)
					} else {
						uni.showToast({
							icon: 'none',
							title: '卡片中无数据'
						})
					}
				})
			},
			getData(buffer) { //解析nfc卡中的数据
				const view = new Uint8Array(buffer);
				const txt = decodeURIComponent(escape(String.fromCharCode(...view))) // 兼容性写法
				this.readData = txt
				uni.showToast({
					icon: 'none',
					title: '数据读取成功'
				})
				console.log(txt);
			},
			write() {
				// 获取NFC实例
				// 绑定监听 NFC 标签
				this.nfc.onDiscovered(res => {
					console.log("写入监听连接", res)
					const NFC = this.nfc.getNdef()
					//进行写入
					NFC.connect({
						success: () => {
							NFC.writeNdefMessage({
								uris: [this.writeTxt], //写入类型
								success: (res1) => {
									uni.showToast({
										icon: 'none',
										title: '数据写入成功'
									})
									console.log('数据写入成功', res1)
								},
								fail: () => {
									uni.showToast({
										icon: 'none',
										title: '数据写入失败'
									})
									console.log('数据写入失败')
								},

							})

						},

					})

				})
			},
			cleardata() {
				this.readData = ''
				this.writeTxt = ''
			},

		},
		onHide() {
			if (this.nfc) {
				this.nfc.stopDiscovery()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nfc {
		padding-bottom: 50rpx;
		height: calc(100vh - 50rpx);
		background: #FBFBFB;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 32rpx;

		.btn {
			margin-top: 26rpx;
		}

		.txtarea {
			border: 2rpx solid #d5d5d5;
			width: 100%;
		}
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2106631.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络安全服务基础Windows--第12节-域与活动目录

工作组 在Windows环境中配置⼯作组相对简单&#xff0c;适合⼩型⽹络环境&#xff0c;如家庭或⼩型办公室⽹络。⼯作组通过简单的⽹络共享和本地管理来实现资源共享&#xff0c;⽽不依赖于中央控制的服务器。 ● 定义&#xff1a;⼯作组是⼀种对等⽹络模型&#xff0c;在这种…

ASP源码 发布站改制最终版 原来3000ok网通大站的源程序

ASP源码 新服发布站改制最终版 原来3000ok网通大站的源程序 这个是非常完整 兼容性很强的。 后台地址&#xff1a;http://你的域名/admin 账号&#xff1a;admin 密码&#xff1a;admin 会员发布地址&#xff1a;http://你的域名/gamevip 源码下载&#xff1a;https://downlo…

【网络安全】IIS未授权访问敏感数据

未经许可,不得转载。 文章目录 正文攻击方法正文 IIS 是 Internet Information Services 的缩写,是微软开发的一个基于 Windows 的 Web 服务器。 HAProxy 是一个知名的高性能负载均衡器和代理服务器。它通常用于将流量分发到多个后端服务器,常与 Web 服务器(包括 IIS)一…

智匠MindCraft:一站式AI模型API调用平台

智匠MindCraft提供了一站式的AI模型解决方案&#xff0c;通过单一API接口&#xff0c;用户可以轻松调用多种主流AI模型&#xff0c;涵盖大语言模型、图片生成、视频生成、语音识别和语音合成等多个领域。以下是该平台的详细介绍&#xff1a; 1、平台概览 主页访问&#xff1a…

基于Qt设计的人脸课堂考勤机系统(219)

文章目录 一、前言1.1 项目介绍【1】开发背景【2】项目实现的功能1.2 设计思路【1】系统架构设计【2】流程设计【3】关键技术实现【2】整体构架1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献【4】摘要【5】项目背景1.4 开发工具的选择1.5 系统框架图1.6 系统功…

How to apply streaming in azure openai dotnet web application?

题意&#xff1a;"如何在 Azure OpenAI 的 .NET Web 应用程序中应用流式处理&#xff1f;" 问题背景&#xff1a; I want to create a web api backend that stream openai completion responses. "我想创建一个 Web API 后端&#xff0c;用于流式传输 OpenAI…

计算机领域学术会议(ICCBD+AI 2024)

第五届计算机、大数据与人工智能国际会议&#xff08;ICCBDAI 2024&#xff09;将于2024年11月1日-3日在江西景德镇召开。 本届会议由景德镇陶瓷大学主办&#xff0c;西安交通大学、暨南大学、南京邮电大学、景德镇学院、ELSP&#xff08;爱迩思出版社&#xff09;、ESBK国际学…

《中国储运》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答 问&#xff1a;《中国储运》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《中国储运》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a; 中储发展股份有限公司 主办单位&…

Openwrt远程唤醒Windows

OpenWrt 安装 luci-app-wol 安装 luci-app-wol&#xff0c;按下一节配置好Windows和主板。 电脑设置 参考 主板BIOS如何设置启用网络唤醒(WOL: Wake On Lan)功能远程唤醒远程控制——Windows 注意 关闭 “电源选项”下“电源按钮”的“启用快速启动”

微软的Teams只有会议号和密码怎么参会呢

客户只给了个会议邀请的截图&#xff0c;没有办法获取直接的参会链接&#xff0c;只能通过图上的会议号码和密码来进入会议&#xff0c;如果这样必须要先登录&#xff0c;但我不想登录怎么办呢&#xff1f; 可以通过以下链接来实现&#xff1a; https://www.microsoft.com/zh-c…

苹果永久删除的照片怎么恢复?这里有你需要的答案,秘籍大公开

“苹果手机里面的照片删除了怎么办&#xff1f;”相信您的第一反应一定是冲去最近删除的文件夹里&#xff0c;只需要轻轻一点就能恢复照片。但有时&#xff0c;我们已经将最近删除文件夹里的照片给清空了&#xff0c;又或者删除时间超过30天了。这时&#xff0c;苹果永久删除的…

解决 Android 上的 .NET MAUI/Xamarin.AndroidX 应用调用 ASP.NET Core API 端点时 SSL 连接被拒绝的问题

从虚拟机调用本地API报各种 SSL 连接不上的错误&#xff0c;这给本地调试造成了极大的不便&#xff0c;在被这个问题困扰了多日以后&#xff0c;终于在GitHub上找到答案 基于这个 帖子 &#xff0c;有一个回复 他写了一个帮助类&#xff0c;专门用来调试本地的API&#xff0c;…

002:显示DICOM图像(替换掉 vtkImageViewer2 )

VTK 医学图像处理---DICOM图像显示 对第一个DICOM显示例子的展开&#xff08;替换掉vtkImageViewer2类&#xff09; 两个例子实现的效果对比&#xff0c;其中右侧是对第一个例子展开后的显示效果&#xff0c;展示了一个完整的VTK渲染管线的过程。 目录 VTK 医学图像处理---DIC…

项目文章|PNAS:中国农大田见晖教授团队揭示DNA甲基化保护早期胚胎线粒体基因组稳定性

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 在早期哺乳动物胚胎中&#xff0c;线粒体氧化代谢增强是着床后生存和发育的重要特征&#xff1b;着床前期的线粒体重塑是正常胚胎发生的关键事件。在这些变化中&#xff0c;氧化磷酸化&a…

Java学习中如何分辨 = 和 == 及其使用方法

在学习Java编程语言时&#xff0c; 和 是两个非常基础的运算符&#xff0c;虽然它们看起来相似&#xff0c;但在语义和应用场景上却有明显的区别。理解并正确使用这两个符号对于编写正确且高效的Java代码至关重要。 1. 运算符&#xff1a;赋值运算符 在Java中是赋值运算符&a…

”wait”和“notify”为什么要在Synchronized代码块里面?

wait和notify用来实现多线程之间的协调&#xff0c;wait表示让线程进入到阻塞状态&#xff0c;notify表示让阻塞的线程唤醒。 wait和notify必然是成对出现的&#xff0c;如果一个线程被wait()方法阻塞&#xff0c;那么必然需要另外一个线程通过notify()方法来唤醒这个被阻塞的…

作为技术Leader如何带散一个团队

theme: channing-cyan 大家好&#xff0c;我是程序员凌览。 这个话题本身就很有趣——如何有效地带散一个团队&#xff0c;精选了两位网友的回答让我们一起来看看。 第一位网友的回答 1938年10月14日&#xff0c;毛泽东谈了如何把团队带好。你反着来&#xff0c;肯定能把团…

【计算机组成原理】 计算机发展历程

文章目录 计算机发展历程计算机系统的概念计算机硬件计算机软件 计算机硬件的发展计算机的四代变化计算机元件的更新换代 计算机软件的发展计算机的发展趋势 计算机发展历程 计算机系统的概念 计算机系统 计算机硬件 计算机软件 计算机硬件 计算机的实体&#xff0c;如主…

16、java 面向对象之三:方法参数的值传递机制(参数为基本数据类型、参数为引用数据类型的案例剖析及内存解析)

java 面向对象之三&#xff1a; Ⅰ、方法的参数传递&#xff1a;参数为基本数据类型1、基本数据类型的值传递&#xff1a;其一、代码为&#xff1a;其二、内存解析为&#xff1a;其三、截图为&#xff1a; Ⅱ、方法的参数传递&#xff1a;参数为引用数据类型1、引用数据类型的值…

docker镜像多阶段构建

Docker 多阶段构建是为了创建轻量化和更高效的 Docker 镜像而产生的一种技术。通过使用多阶段构建&#xff0c;可以将不同阶段的构建需求分离开来&#xff0c;最终结果只包含实际部署所需要的部分&#xff0c;从而缩小镜像的大小。 以下是使用多阶段构建的基本步骤&#xff1a…