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

最新推荐文章于 2025-04-10 15:13:26 发布
最新推荐文章于 2025-04-10 15:13:26 发布
阅读量5.4k 收藏 20
点赞数 3
分类专栏： 微信小程序 Vue起步学习 前端开发 文章标签： vue.js 前端 uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36451496/article/details/124967006
版权

微信小程序官方文档中提供了调用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中：


                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

				
					
uniapp调用原生安卓读写NFC解决方案

				
			

			

				

					weixin_35677054的博客
				

				

					05-14
					
					3960
					
				

			

		

		

			
				
主要解决uniapp调用原生安卓SDK实现读取RFID标签的功能，能识别多种NFC芯片，并支持相互传参。

			
		

	



                

            
              



	

		

			

				
					
uniapp调用Android原生NFC进行读写操作

				
			

			

				

					qq_45020145的博客
				

				

					01-20
					
					6720
					
				

			

		

		

			
				
在uniapp中实现NFC读写操作（NfcV格式/ISO15693）

			
		

	



              


  
              

                


	

		

			

				
					
vue、H5、移动端 读取NFC

				
			

			

				

					lys20000913的博客
				

				

					09-15
					
					1万+
					
				

			

		

		

			
				
拷贝走直接用
ps：测试时需在移动端测试 PC测试无效

              document.addEventListener("plusready", function() { 
                   // NFC监听
                   monitorNFC() 
    		}

            function monitorNFC(t){ 
                let NfcAdapter;
                let N

			
		

	





	

		

			

				
					
使用 Spring Boot 和 Uniapp 搭建 NFC 读取系统

					
最新发布

				
			

			

				

					邓邓子的博客
				

				

					04-10
					
					1338
					
				

			

		

		

			
				
本文聚焦于通过 Spring Boot 读取 NFC 实例的开发实践。开篇深入剖析 NFC 技术原理，涵盖概念、工作模式及丰富应用场景。随后详细阐述 Spring Boot 开发环境搭建，以及读取 NFC 数据的具体实现过程，包括设备连接、数据解析与存储。前端采用 Uniapp 进行界面开发，设计布局并实现与后端接口交互。完成前后端联调与功能测试后，对项目进行总结，分析成果与不足，同时展望未来优化方向与应用前景，为相关开发者提供全面参考。

			
		

	



		

			
		



	

		

			

				
					
uniapp nfc读写

				
			

			

				

					风花一世月
				

				

					12-21
					
					2122
					
				

			

		

		

			
				
1.先添加权限

"<uses-permission android:name=\"android.permission.NFC\"/>"

2.添加NFC调用js

import store from '@/store/index.js'

// 包路径
const package_NdefRecord = 'android.nfc.NdefRecord';
const packa...

			
		

	





	

		

			

				
					
分享通过Uniapp调用NFC读取身份证信息

				
			

			

				

					qq_33714389的博客
				

				

					01-16
					
					4321
					
				

			

		

		

			
				
通过 uniapp 调用手机NFC功能读取二代居民身份证，还支持其他证件读取（社保卡、绿城通、超级SIM卡、IC卡、银行卡、外国人永久居住证、港澳台居住证）

			
		

	





	

		

			

				
					
关于uni-app手机nfc开启、读取、写入功能

				
			

			

				

					qq_45511353的博客
				

				

					12-01
					
					1万+
					
				

			

		

		

			
				
关于手机开启nfc功能
nfc功能开启，分为开启手机的nfc功能和开启app的nfc功能。
那么app端会用到的nfc功能有哪些呢?
有nfc读取身份证内容，手机读取nfc签的内容，手机更改nfc签的内容，手机写入nfc签内容。
关于nfc读取身份证内容，uni-app插件市场有相关插件，可以拿来使用。
关于手机读取nfc签的内容，手机更改nfc签的内容，手机写入nfc签内容，需要相关js文件来配合app开启nfc、读取、写入等功能，当然需要及时关闭app   nfc功能。

...

			
		

	





	

		

			

				
					
NFC标签读取和写入数据demo

				
			

			

				

					11-15
				

			

		

		

			
				
一、NFC读取  1. NFC标签类型：NFC标签通常分为Type 1到Type 5五种类型，每种类型有不同的存储容量和功能。Type 4标签基于ISO/IEC 14443标准，与Android系统兼容性最好，通常用于手机应用。  2. 读取API：在Android...

			
		

	





	

		

			

				
					
uniapp使用nfc功能及详解

					
热门推荐

				
			

			

				

					GhostPaints的博客
				

				

					11-21
					
					1万+
					
				

			

		

		

			
				
uniapp实现nfc读取功能

			
		

	





	

		

			

				
					
uni-app安卓appNFC读卡

				
			

			

				

					皮皮的博客
				

				

					09-27
					
					3890
					
				

			

		

		

			
				
uni-app安卓appNFC读取RFID标签的UID
第一步：配置NFC权限

第二步：vue文件
<template>
  <view>
    <view class="uni-padding-wrap">
      NFC
      <view class="uni-common-mt" style="background: #fff; padding: 20upx">
        <text>
          UID:{{ U

			
		

	





	

		

			

				
					
mui nfc 功能读写操作

				
			

			

				

					06-11
				

			

		

		

			
				
基于mui框架的NFC功能开发，可读可写，使用简单
用时只需传入用于接收读取到的NFC数据的方法即可，“写”操作则是提供了方法，需自己稍微加工下

			
		

	





	

		

			

				
					
UNIAPP安卓NFC写入包名跳转APP

				
			

			

				

					07-07
				

			

		

		

			
				
UNIAPP里面的插件市场和文档对于NFC的支持非常少，包括网址的写入和包名的写入基本上没有，最近刚好有这方面的需求，就花了不少时间研究这个东西，然后把他整出来了，希望能帮到你们，如果使用有问题可以加我Q:3372945813,
uniapp nfc写入网址
uniapp nfc写入包名跳转应用

			
		

	





	

		

			

				
					
UNIAPP NFC 读写

				
			

			

				

					子盛
				

				

					10-27
					
					1792
					
				

			

		

		

			
				
uniapp 实现nfc读写

			
		

	





	

		

			

				
					
Native.js 读写NFC数据

				
			

			

				

					weixin_34362790的博客
				

				

					02-22
					
					4114
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
uniapp中NFC功能的实现

				
			

			

				

					weixin_43825389的博客
				

				

					10-23
					
					9435
					
				

			

		

		

			
				
uniapp 中实现NF功能
一、前期准备


1、在manifest.json文件中开发NCF权限


2、需要注意这里更改了manifest.json中的内容需要整包更新客户端包才能生效，如果是服务器热更新下载的包不生效



二、实现示例
<template>
	<!-- 标签绑定-明细 -->
	<view id="page">
			<view class="list-item flex align-items justify-between">
	

			
		

	





	

		

			

				
					
uni-app调用NFC读写加密扇区功能。

				
			

			

				

					weixin_44766849的博客
				

				

					12-21
					
					2069
					
				

			

		

		

			
				
uniapp  nfc读写功能

			
		

	





	

		

			

				
					
Uniapp插件如何通过NFC读取多种证卡信息？

				
			

			

				

					证卡识读张工的博客
				

				

					12-12
					
					2414
					
				

			

		

		

			
				
nfc读卡uniapp插件，由中软高科进行开发，主要是通过NFC读取居民身份证、港澳台居住证、外国人居住证、护照等证卡的信息。经过多个版本的升级更新，目前性能已趋于稳定，并且读卡速度较之最初版本有了大的提升。

			
		

	





	

		

			

				
					
uniapp获取NFC

				
			

			

				

					02-20
				

			

		

		

			
				
为了实现在页面加载时自动调用 `testNFC` 方法来读取 NFC 数据，在 Vue 组件生命周期钩子函数 `mounted()` 中可以直接调用该方法[^1]。  #### 实现步骤说明  #### 初始化并注册 NFC 事件监听器  要使应用程序能够...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 4

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值