ionic 2中的條形碼掃描儀

Question

我嘗試使用ionic2在Android移動設備中使用條形碼掃描儀掃描條形碼。 我是離子的新學習者。 我嘗試了一些代碼，

home.ts

  import { Component } from '@angular/core';

  import { NavController } from 'ionic-angular';
  declare var cordova:any;
  @Component({
  selector: 'page-home',
  templateUrl: 'home.html'
  })
  export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  scan() {
  var me = this;
  if (cordova.plugins.barcodeScanner) {
    cordova.plugins.barcodeScanner.scan((imageData) => {
        alert(imageData.text);

    }, (error) => {
        alert("An error happened -> " + error);         
    });
  }

  }
  }

home.html的

  <ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
  </ion-navbar>

 <ion-content class="home">
 <button primary (click)="scan()">Scan</button>
 </ion-content>

但是我得到一個錯誤是“找不到變量：Cordova”。

我用了這個插件-

https://ionicframework.com/docs/v2/native/barcode-scanner/

用於ionic2中的條形碼掃描儀

謝謝你的回答。

Answer 1

您需要添加：

import { BarcodeScanner } from 'ionic-native';

之后，您可以使用BarcodeScanner.scan（）方法從條形碼或二維碼中獲取信息。 嘗試以下代碼：home.ts

import { Component } from '@angular/core';    
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from 'ionic-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {}

  click() {
    BarcodeScanner.scan()
      .then((result) => {
        alert(
          "We got a barcode\n" +
          "Result: " + result.text + "\n" +
          "Format: " + result.format + "\n" +
          "Cancelled: " + result.cancelled
        )
      })
      .catch((error) => {
        alert(error);
      })
  }
}

home.html的

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>Scan</h1>
  <button block (click)="click()" color="primary">Scan</button>
</ion-content>

Answer 2

首先導入您的項目：

$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scanner

組件文件：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [ BarcodeScanner ]
})
export class HomePage {

  constructor(
    private barcodeScanner: BarcodeScanner,
    public navCtrl: NavController) {

  }

  scan() {
   this.barcodeScanner.scan().then((barcodeData) => {
        console.log(JSON.stringify(barcodeData))
      }, (err) => {
       //error
      });
  }

}

Answer 3

1。

$ cordova插件添加phonegap-plugin-barcodescanner

$ npm install-保存@ ionic-native / barcode-scanner

2。

app.module.ts

import { BarcodeScanner } from '@ionic-native/barcode-scanner';
   @NgModule({

   ......

   providers: [
     BarcodeScanner,
     {provide: ErrorHandler, useClass: IonicErrorHandler}
   ]
 })
 export class AppModule {}

---

scanner.ts

 import { Component } from '@angular/core';
 import { NavParams, NavController } from 'ionic-angular';
 import { BarcodeScanner } from '@ionic-native/barcode-scanner';

 @Component({
    selector: 'page-contact',
    templateUrl: 'contact.html'
 })
export class ContactPage {
    constructor( public nacCtrl: NavController,
    public NavParams: NavParams,
    private barcodeScanner: BarcodeScanner) { }

  takeScan(){
      this.barcodeScanner.scan().then((barcodeData) => {
      // Success! Barcode data is here
      alert(barcodeData.text);
      console.log("Barcode Format -> " + barcodeData.format);
      console.log("Cancelled -> " + barcodeData.cancelled);

   }, (err) => {
      // An error occurred
     console.log("An error happened -> " + err);
   });
 }

}

Answer 4

如在文檔中一樣，您需要執行此操作以將條形碼掃描儀與ionic 2結合使用

import { BarcodeScanner } from 'ionic-native';

BarcodeScanner.scan().then((barcodeData) => {
    // Success! Barcode data is here
  }, (err) => {
   // An error occurred
});

安裝后，您需要從ionic-native將其導入頁面中，然后調用它以使用其功能。

希望對您有幫助：D

Answer 5

要使用條形碼掃描儀，您必須添加

import { BarcodeScanner } from 'ionic-native';

並創建一個這樣的功能

barcode() {
  BarcodeScanner.scan()
  .then((result) => {
     if (!result.cancelled) {
       alert("Success"+result);
     }
  })
  .catch((err) => {
    alert(err); 
   })
 }

現在您可以在html的任何地方調用條形碼（）函數進行掃描

Answer 6

1.將插件添加到您的應用程序中，如下所示

ionic插件添加phonegap-plugin-barcodescanner

npm install-保存@ ionic-native / barcode-scanner

2.import

從“ ionic-native”導入{BarcodeScanner}；

從“ xml2js”導入*作為xml2js；

3. BarcodeScanner.scan（）。then（（barcodeData）=> {

var name，uid;

xml2js.parseString（barcodeData.text，{trim：true}，函數（錯誤，結果）{調試器；

。名稱= result.PrintLetterBarcodeData $名稱; 。UID = result.PrintLetterBarcodeData $ UID; }）;

調試器; this.AdharCardName =名; this.AdharcardUid = UID;
}，（err）=> {

}）;

Answer 7

How to create perfect Barcode/QR Scanner. let's do it.

首先，安裝

1. 離子科爾多瓦插件添加phonegap-plugin-barcodescanner
2. npm install-保存@ ionic-native / barcode-scanner
3. npm install @ ionic-native / core-保存
4. 科爾多瓦平台更新android

一切都完成了。在app.module.ts中導入BarcodeScanner。
從“ @ ionic-native / barcode-scanner”導入{BarcodeScanner}；

提供者：[BarcodeScanner]

之后，我們必須在打字稿文件中聲明要使用的文件
從“ @ ionic-native / barcode-scanner”導入{BarcodeScanner}；

scan(){
      this.barcodeScanner.scan().then((barcodeData) => {
        console.log(JSON.stringify(barcodeData))  
      }, (err) => {  
       //error 
      });
    }

在這種情況下。 您可能會遇到這樣的錯誤，
ERR_FILE_NOT_FOUND（file：///android_asset/www/index.html）：或
* main.ts中的意外令牌）*
不用擔心。.從命令提示符中刪除android / ios插件 。 並安裝它。
科爾多瓦平台更新android

希望好新。 間諜