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のソースリスト(ソースリスト)を変更する方法詳細説明

推薦する

VirtualBox Centos7 の NAT+ホストオンリーネットワークの落とし穴のまとめ

目次1. 問題の背景2. 仮想マシン ネットワーク カードの接続方法は何ですか? 2.1 NAT 2...

VScode リモート SSH リモート編集とデバッグコード

Visual Studio Code の最新の Insider バージョンには、コードのリモート デ...

MySQLの実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します

長い間 MySQL を使ってきたので、SQL 文はすでに覚えていると思います。そこで、その実行原理を...

Tomcat プロセスの CPU 使用率が高い場合の解決策

目次場合コンテキスト切り替えのオーバーヘッド?要約するCPU は多くの場合、システム パフォーマンス...

MySQL 5.7 スレーブノードからマルチスレッド マスター スレーブ レプリケーションを構成する方法の詳細な説明

序文MySQL は MySQL 5.6 からマルチスレッド レプリケーションをサポートしていますが、...

この記事はPReact10.5.13のソースコードを理解するのに役立ちます

目次render.js 部分create-context.js 部分差分部分Reactのソースコード...

Vue.jsはタイムライン機能を実装します

この記事では、タイムライン機能を実装するためのVue.jsの具体的なコードを参考までに共有します。具...

ウェブページの右下隅に「いいね!」カード効果を実現するための CSS (サンプルコード)

効果 HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。 &l...

docker で PostgreSQL データベースをインストールして永続化する方法

Dockerのインストール手順をスキップする1. postgresqlイメージを取得する docke...

JavaScriptで配列を作成する方法の詳細な説明

目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...

Zabbix redis 自動ポート検出スクリプトは json 形式を返します

自動検出を行う際には、ポートなどの情報を取得してjson形式で返すスクリプトが必ず存在します。Red...

MySQLデータベースでスロークエリログを有効にする方法の詳細な説明

データベースはスロークエリログを有効にします設定ファイルを変更する設定ファイルmy.iniに次の2つ...

JavaScript でクールなマウス テーリング効果を実装

これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...

Dockerアーキテクチャ入門

Docker には 3 つの基本概念が含まれています。イメージ: Docker イメージはルート フ...

FileZilla Server の FTP サーバー構成と 425 エラーおよび TLS 警告の解決策の詳細な説明

123WORDPRESS.COM では、FileZilla のダウンロード リンクを提供しています:...