uni-appがNFC読み取り機能を実装

uni-appがNFC読み取り機能を実装

この記事では、参考までに、NFC読み取り機能を実装するためのuni-appの具体的なコードを紹介します。具体的な内容は次のとおりです。

長い間ブログを書いていませんでした。今日は、学んだことをすべて記録する貴重な時間があります。

1. NFCメソッド.js

//パッケージパス const package_NdefRecord = 'android.nfc.NdefRecord';
定数 package_NdefMessage = 'android.nfc.NdefMessage';
パッケージ TECH_DISCOVERED は 'android.nfc.action.TECH_DISCOVERED' です。
定数 package_Intent = 'android.content.Intent';
定数 package_Activity = 'android.app.Activity';
パッケージのPendingIntentを'android.app.PendingIntent'に変更します。
定数 package_IntentFilter = 'android.content.IntentFilter';
定数 package_NfcAdapter = 'android.nfc.NfcAdapter';
定数 package_Ndef = 'android.nfc.tech.Ndef';
定数 package_NdefFormatable = 'android.nfc.tech.NdefFormatable';
定数 package_Parcelable = 'android.os.Parcelable';
定数 package_String = 'java.lang.String';

NfcAdapter を作成します。
NdefRecord を作成します。
NdefMessage を作成します。
let readyRead = true; //読み取りを開始します let noNFC = false;
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}';
readResult = '' とします。

エクスポートデフォルト{
 listenNFCStatus: 関数() {
  console.log("--------- listenNFCStatus--------------")
  that = this とする;
  試す {
   main を plus.android.runtimeMainActivity() にします。
   Intent を plus.android.importClass('android.content.Intent') に設定します。
   Activity を plus.android.importClass('android.app.Activity') とします。
   PendingIntent を plus.android.importClass('android.app.PendingIntent') に設定します。
   IntentFilter を plus.android.importClass('android.content.IntentFilter') に設定します。
   NfcAdapter は、plus.android.importClass('android.nfc.NfcAdapter') からインポートされます。
   nfcAdapter を NfcAdapter.getDefaultAdapter(main); にします。
   nfcAdapterがnullの場合
    uni.showToast({
     タイトル: 「デバイスは NFC をサポートしていません!」 '、
     アイコン: 'なし'
    })
    NFCなし = true;
    戻る;
   }
   nfcAdapter.isEnabled() の場合 {
    uni.showToast({
     タイトル: まずシステム設定でNFC機能を有効にしてください! '、
     アイコン: 'なし'
    });
    NFCなし = true;
    戻る;
   } それ以外 {
    noNFC = 偽;
   }

   intent = new Intent(main, main.getClass()); を記述します。
   Intent.FLAG_ACTIVITY_SINGLE_TOP にフラグを追加します。
   pendingIntent を PendingIntent.getActivity(main, 0, intent, 0); とします。
   ndef = new IntentFilter("android.nfc.action.TECH_DISCOVERED");
   ndef.addDataType("*/*");
   intentFiltersArray = [ndef] とします。

   //キーコード const promise = new Promise((resolve, reject) => {
    plus.globalEvent.addEventListener('newintent', 関数() {
     // ポーリングコール NFC
     // タイムアウトを設定します(that.nfcRuning(resolve), 1000);
     タイムアウトを設定する(() => {
         that.nfc実行中(解決)
     }, 1000);
    });
   })
   
   nfcAdapter.enableForegroundDispatch(main、pendingIntent、intentFiltersArray、techListsArray);
   返品の約束
  } キャッチ (e) {
  }
 },
 nfc実行中: function(resolve) {
  // console.log("--------------nfc実行中---------------")
  NdefRecord = plus.android.importClass("android.nfc.NdefRecord");
  NdefMessage は plus.android.importClass("android.nfc.NdefMessage");
  main を plus.android.runtimeMainActivity() にします。
  main.getIntent() を呼び出します。
  that = this とする;
  (package_TECH_DISCOVERED == intent.getAction()) の場合 {
    読み取り準備完了の場合
     //ここでは、読み取りメソッドを通じて NFC データを取得します。const id = that.read(intent);
    // readyRead = false;
    //データを返すresolve(id)
   }
  }
 },
 
 読み取り(意図) {
  // toast('ラベルを削除しないでください。データが読み取られています');
  that = this とする;
  // NFC ID
  bytesId を intent.getByteArrayExtra(NfcAdapter.EXTRA_ID); に設定します。
  nfc_id を that.byteArrayToHexString(bytesId) とします。

  nfc_id を返します。
 },
 byteArrayToHexString: function(inarray) { // バイト配列を文字列に変換します  
  i、j、inn とします。
  hex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"] とします。
  出す = "";

  (j = 0; j < inarray.length; ++j) の場合 {
   inn = inarray[j] & 0xff;
   i = (inn >>> 4) & 0x0f;
   出力 += 16進数[i];
   i = イン & 0x0f;
   出力 += 16進数[i];
  }
  戻る;
 },

}

関数トースト(コンテンツ) {
 uni.showToast({
  タイトル: コンテンツ、
  アイコン: 'なし'
 })
}

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>QR コードのスキャン</view>
</ビュー>


「../../../../../components/hexiii-nfc/hexiii-nfc.js」からtesttestをインポートします。

 メソッド: {
  非同期テストNFC() {
   //ここでは、非同期メソッドを使用して読み取った NFC データを取得します。const nfcId = await testtest.listenNFCStatus();
   //コンソール.log(nfcId)

   //次のデータはビジネス ロジック コードです。NFC データのみを読み取る必要がある場合は、上記のコード行で十分です。
   定数arr = []
   this.list2.forEach(e => {
    arr.push(e.code)
   })
   if(!nfcId) 戻り値
   (arr.indexOf(nfcId) === -1)の場合{
    uni.showToast({
     アイコン: 'なし'、
     タイトル: 「対応する検査ポイントが見つかりません!」
     期間: 2000
    });
   } それ以外 {
    uni.showToast({
     アイコン: 'なし'、
     タイトル: 「認識に成功しました!」
     期間: 2000
    });
    uni.navigateTo({
     url: `/pages/application/XunJianGuanLi/XunJianRenWu/KaiShiXunJian3/index?id=${this.id}&spotCode=${nfcId}&delta=${this.delta+1}`,
    });
   }
  },
}

3. ページレンダリング

4. まとめ

上記はNFCデータの読み取りの実装です。ユーザーがNFCをスキャンして読み取ったデータに応じて、対応するチェックイン検査ポイントに自動的にジャンプします。コードを改善する必要があるので、さらに指導してください。NFC メソッドの最初の部分では、コードを読み取るだけでよいため、多くの冗長な未使用のコードが削除され、必要なコードだけが残されています。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScriptはクッキーの書き込み、読み取り、削除機能を実装します
  • JavaScriptはクリップボードを読み取り、スクリーンショットをWebページに貼り付ける機能を実装します

<<:  MySQL mysqldump の使い方の詳しい説明

>>:  Ubuntuのソースリスト(ソースリスト)を変更する方法詳細説明

推薦する

MySql 5.7.17 無料インストール構成チュートリアルの詳細な説明

1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...

Linux カーネル デバイス ドライバー システム コールに関する注意事項

/**************************** * システムコール**********...

CSS変数を使用してダークモードを実装するためのサンプルコード

最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...

CSS でより美しいリンクプロンプト効果をカスタマイズする方法

提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。デフォルトでは、&l...

HTMLは角丸四角形を簡単に実装します

質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?ソリューション...

LinuxベースのLVMシームレスディスク水平拡張の詳細な説明

環境名前財産CPU 5650 円メモリ4Gディスク20G+4TB この時点で、サーバーにはすでに次の...

Docker ベースの MySQL マスタースレーブレプリケーション環境を構築するための実装手順

1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...

DockerにTensorFlow環境を素早くインストールする方法

Docker に TensorFlow 環境をすばやくインストールし、TensorFlow を使用し...

DockerHubを自分で構築する方法

先ほど使用したDocker HubはDockerによって提供されています。独自のDockerを構築す...

この記事では、jsのデータ型とデータ構造の世界を紹介します。

目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...

JavaScript のショートカットのヒント

目次1. 配列を結合する2. 配列をマージする(最初に) 3. 配列の複製4. 構造化分解割り当て5...

MySQL での GROUP_CONCAT の使用例の分析

この記事では、例を使用して、MySQL で GROUP_CONCAT を使用する方法について説明しま...

ECMAScript の演算子を理解するための記事

目次単項演算子ブール演算子乗算演算子加法演算子関係演算子等価演算子条件演算子代入演算子カンマ演算子要...

Vue の echarts ツールチップにクリック イベントを追加する詳細な説明

目次必要回避策1. ツールチップを設定する2. hookToolTip変数を定義する3. メソッド内...

CSS マージンの重複とその防止方法

2 つ以上のブロックレベル ボックスの垂直に隣接するエッジが重なり合っています。結果として得られる境...