uni-app实现NFC读取功能

本文实例为大家分享了uni-app实现NFC读取功能的具体代码,供大家参考,具体内容如下

好久没有写博客了,今天难得有空重新记录自己学习的点点滴滴。

1、NFC方法.js

// 包路径
const package_NdefRecord = 'android.nfc.NdefRecord';
const package_NdefMessage = 'android.nfc.NdefMessage';
const package_TECH_DISCOVERED = 'android.nfc.action.TECH_DISCOVERED';
const package_Intent = 'android.content.Intent';
const package_Activity = 'android.app.Activity';
const package_PendingIntent = 'android.app.PendingIntent';
const package_IntentFilter = 'android.content.IntentFilter';
const package_NfcAdapter = 'android.nfc.NfcAdapter';
const package_Ndef = 'android.nfc.tech.Ndef';
const package_NdefFormatable = 'android.nfc.tech.NdefFormatable';
const package_Parcelable = 'android.os.Parcelable';
const package_String = 'java.lang.String';

let NfcAdapter;
let NdefRecord;
let NdefMessage;
let readyRead = true; //开启读
let noNFC = false;
let techListsArray = [
 ['android.nfc.tech.IsoDep'],
 ['android.nfc.tech.NfcA'],
 ['android.nfc.tech.NfcB'],
 ['android.nfc.tech.NfcF'],
 ['android.nfc.tech.Nfcf'],
 ['android.nfc.tech.NfcV'],
 ['android.nfc.tech.NdefFormatable'],
 ['android.nfc.tech.MifareClassi'],
 ['android.nfc.tech.MifareUltralight']
];
// 要写入的数据
let text = '{id:8888,name:nfc,stie:wangqin.com}';
let readResult = '';

export default {
 listenNFCStatus: function() {
  console.log("---------listenNFCStatus--------------")
  let that = this;
  try {
   let main = plus.android.runtimeMainActivity();
   let Intent = plus.android.importClass('android.content.Intent');
   let Activity = plus.android.importClass('android.app.Activity');
   let PendingIntent = plus.android.importClass('android.app.PendingIntent');
   let IntentFilter = plus.android.importClass('android.content.IntentFilter');
   NfcAdapter = plus.android.importClass('android.nfc.NfcAdapter');
   let nfcAdapter = NfcAdapter.getDefaultAdapter(main);
   if (nfcAdapter == null) {
    uni.showToast({
     title: '设备不支持NFC!',
     icon: 'none'
    })
    noNFC = true;
    return;
   }
   if (!nfcAdapter.isEnabled()) {
    uni.showToast({
     title: '请在系统设置中先启用NFC功能!',
     icon: 'none'
    });
    noNFC = true;
    return;
   } else {
    noNFC = false;
   }

   let intent = new Intent(main, main.getClass());
   intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);
   let pendingIntent = PendingIntent.getActivity(main, 0, intent, 0);
   let ndef = new IntentFilter("android.nfc.action.TECH_DISCOVERED");
   ndef.addDataType("*/*");
   let intentFiltersArray = [ndef];

   //重点部分代码
   const promise = new Promise((resolve, reject) => {
    plus.globalEvent.addEventListener('newintent', function() {
     // 轮询调用 NFC
     // setTimeout(that.nfcRuning(resolve), 1000);
     setTimeout(() => {
         that.nfcRuning(resolve)
     }, 1000);
    });
   })

   nfcAdapter.enableForegroundDispatch(main, pendingIntent, intentFiltersArray, techListsArray);
   return promise
  } catch (e) {
  }
 },
 nfcRuning: function(resolve) {
  // console.log("--------------nfcRuning---------------")
  NdefRecord = plus.android.importClass("android.nfc.NdefRecord");
  NdefMessage = plus.android.importClass("android.nfc.NdefMessage");
  let main = plus.android.runtimeMainActivity();
  let intent = main.getIntent();
  let that = this;
  if (package_TECH_DISCOVERED == intent.getAction()) {
    if (readyRead) {
     //这里通过read方法拿到NFC数据
    const id = that.read(intent);
    // readyRead = false;
    //将数据返回出去
    resolve(id)
   }
  }
 },

 read(intent) {
  // toast('请勿移开标签正在读取数据');
  let that = this;
  // NFC id
  let bytesId = intent.getByteArrayExtra(NfcAdapter.EXTRA_ID);
  let nfc_id = that.byteArrayToHexString(bytesId);

  return nfc_id;
 },
 byteArrayToHexString: function(inarray) { // converts byte arrays to string
  let i, j, inn;
  let hex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
  let out = "";

  for (j = 0; j < inarray.length; ++j) {
   inn = inarray[j] & 0xff;
   i = (inn >>> 4) & 0x0f;
   out += hex[i];
   i = inn & 0x0f;
   out += hex[i];
  }
  return out;
 },

}

function toast(content) {
 uni.showToast({
  title: content,
  icon: 'none'
 })
}

2、在用NFC的页面调用方法

<view class="flex nfc-ewm">
  <view class="nfc-ewm-item" style="border-right: 1px solid #ccc;" @click="testNFC">
   <image src="@/assets/images/application/icon-nfc.png" alt=""></image>NFC感应
  </view>
  <view class="nfc-ewm-item" @click="openScanCode">
   <image src="@/assets/images/application/icon-ewm.png" alt=""></image>二维码扫描
  </view>
</view>

import testtest from "../../../../../components/hexiii-nfc/hexiii-nfc.js"

 methods:{
  async testNFC() {
   //这里用异步获取读取到的NFC数据
   const nfcId = await testtest.listenNFCStatus();
   //console.log(nfcId )

   //以下数据是我的业务逻辑代码,如果只要读取NFC数据上面那一行代码即可了。
   const arr = []
   this.list2.forEach(e => {
    arr.push(e.code)
   })
   if(!nfcId) return
   if ( arr.indexOf(nfcId) === -1) {
    uni.showToast({
     icon: 'none',
     title: '未找到对应巡检点!',
     duration: 2000
    });
   } else {
    uni.showToast({
     icon: 'none',
     title: '识别成功!',
     duration: 2000
    });
    uni.navigateTo({
     url: `/pages/application/XunJianGuanLi/XunJianRenWu/KaiShiXunJian3/index?id=${this.id}&spotCode=${nfcId}&delta=${this.delta+1}`,
    });
   }
  },
}

3、页面效果图

4、总结

以上就是我读取NFC数据的实现了,根据用户扫描NFC读取的数据自动跳转到对应的签到巡检点。代码还有待完善,请多多指导,第一部分中NFC的方法,因为我只需要读取代码,所以很多多余的、不用的代码已被我删除了,只留下了需要的代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • javascript在网页中实现读取剪贴板粘贴截图功能

    见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下. 可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好. 输入框的结构代码: 复制代码 代码如下: <input type="text" id="testInput" /> 为输入框绑定粘贴事件: 复制代码 代码如下: var input = document.getElemen

  • JavaScript实现cookie的写入、读取、删除功能

    在没介绍正文之前,先给大家介绍Cookie的基础知识 首先了解什么是cookie "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值." cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息. 从JavaScript的角度看,cookie 就是一些字符串信息.这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息. 在

  • uni-app实现NFC读取功能

    本文实例为大家分享了uni-app实现NFC读取功能的具体代码,供大家参考,具体内容如下 好久没有写博客了,今天难得有空重新记录自己学习的点点滴滴. 1.NFC方法.js // 包路径 const package_NdefRecord = 'android.nfc.NdefRecord'; const package_NdefMessage = 'android.nfc.NdefMessage'; const package_TECH_DISCOVERED = 'android.nfc.acti

  • uni app仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • android中NFC读写功能的实现方法

    本文实例为大家分享了android中NFC读写功能的具体代码,供大家参考,具体内容如下 首先检查一下设备是否支持NFC功能 private void checkNFCFunction() { // TODO Auto-generated method stub mNfcAdapter = NfcAdapter.getDefaultAdapter(this); // check the NFC adapter first if (mNfcAdapter == null) { // mTextVie

  • android实现通过NFC读取卡号

    本文实例为大家分享了android通过NFC读取卡号的具体代码,供大家参考,具体内容如下 1.获取权限 <uses-permission android:name="android.permission.NFC" /> <uses-feature android:name="android.hardware.nfc" android:required="true" /> 2.设置NFC活动页 <intent-filt

  • Android实现文件的保存与读取功能示例

    本文实例讲述了Android实现文件的保存与读取功能.分享给大家供大家参考,具体如下: 注: 在Activity中有 getFileDir() 和 getCacheDir(); 方法可以获得当前的手机自带的存储空间中的当前包文件的路径 getFileDir() ----- /data/data/cn.xxx.xxx(当前包)/files getCacheDir() ----- /data/data/cn.xxx.xxx(当前包)/cache 1. 编写文件读取与写入功能实现类 FileServi

  • Android实现NFC读取校园卡

    本文实例为大家分享了Android实现NFC读取校园卡的具体代码,供大家参考,具体内容如下 主程序: package com.nfclab.stuCard; import java.io.IOException; import android.app.Activity; import android.app.PendingIntent; import android.content.Intent; import android.content.IntentFilter; import andro

  • Android打造炫酷的电影票在线选座app在线选座功能

    不知道大家有没有用过,淘宝电影客户端(淘票票)买过电影票,纵观各类在线选座app的在线选座功能 淘宝在线选座功能用户体验最好,用起来最顺手,夸张点说已经到了炉火纯青的地步,下面我们看一下效果: 效果分析: 整个控件分成几个部分,座位图区域.座位缩略图区域.行号区域.屏幕区域 1.座位图可以自由的移动缩放,放大缩小移动后会自动回弹到合适的位置,选中座位会自动放大到合适比例. 2.行号部分跟着座位图缩放以及上下移动,屏幕区域跟着座位图左右移动缩放. 3.当手指按下的时候会出现缩略图,缩略图上有个红色

  • Java实现简单棋盘存档和读取功能

    最近实现研究了下五子棋的存档,主要实现是将残局的五子棋棋盘保存到本地文件中,需要读取棋局时能够从本地文件获取,并展示出原有的残局局面. 主要思路 如上图所示,第一个表格是11*11的棋局,可以转换成11行11列的二维数组,1代表黑子,2代表蓝子,转换成第二个表格所示的二维数组.在保存时,考虑到二维数组中0大部分是没有被占用的空间,所以我将二维数组转换成了一个n行3列的稀疏数组,将所占用的空间压缩,保存到本地文件中.其中稀疏数组的第一行row表示11行,col表示11列,val表示除0以外的有效数

  • iOS实现app间跳转功能

    本文为大家分享了iOS实现app间跳转功能的具体代码,供大家参考,具体内容如下 我们通过系统的openURL方法,可以从当前的app跳转到其他任意app去,包括系统自带的.以及我们开发的app. 本文模拟A app跳转到 B app A app代码: // A app // ViewController.m // 程序跳转 // // Created by hhg on 15/10/23. // Copyright (c) 2015年 hhg. All rights reserved. // #

  • PHP实现 APP端微信支付功能

    前面已经写了手机APP支付宝支付,今天再把手机APP微信支付补上,前期的准备工作在这里就不多说了,可以参考微信支付开发文档,一定要仔细阅读开发文档,可以让你少踩点坑:准备工作完成后就是配置参数,调用统一下单接口,支付后异步回调三部曲啦: 1.我封装好的一个支付类文件,多余的东西都去除掉了,并且把配置参数放到了这个支付类中,只需要修改Weixinpayandroid方法内的几个参数就可以直接复制使用: class Wxpayandroid { //参数配置 public $config = arr

随机推荐