离子原生条码扫描仪相机问题答案

【问题标题】：Ionic native barcode scanner camera issue离子原生条码扫描仪相机问题
【发布时间】：2019-04-04 22:29:47
【问题描述】：

我在 ionic 3 上有一个应用。我已经安装了：

"@ionic-native/barcode-scanner": "^4.16.0"

"phonegap-plugin-barcodescanner": "^8.0.0"

平台是cordova浏览器。

当我尝试扫描时，会出现一个弹出窗口并要求我输入条形码： screencapture

默认操作不应该是打开相机开始扫描。我不知道我做错了什么。有人可以帮忙吗！

以下是代码：

import { Component, ViewChild, OnInit } from '@angular/core';
import { IonicPage, ToastController, LoadingController } from 'ionic-angular';
import { BarcodeScanner, BarcodeScannerOptions, BarcodeScanResult } from '@ionic-native/barcode-scanner';

import { QrScannerComponent } from 'angular2-qrscanner';

import { ProfileService } from '../profile/profile.service';
import { FirebaseAuthService } from '../firebase-integration/firebase-auth.service';

@IonicPage()
@Component({
  selector: 'page-scanner',
  templateUrl: 'scanner.html',
})
export class ScannerPage {

  result: BarcodeScanResult;
  loading: any;
  transactions: any;

  constructor(
    public toastCtrl: ToastController,
    public loadingCtrl: LoadingController,
    public profileService: ProfileService,
    public fAuthService: FirebaseAuthService,
    private barcodeScanner: BarcodeScanner
  ) {
  }

  async scan() {
    try{
      let options: BarcodeScannerOptions = {
        torchOn: true,
        prompt: "Point the camera at the barcode"
      };

      this.result = await this.barcodeScanner.scan(options);
    }
    catch(error) {
      console.log(error);
    }
  }
}

<ion-card class="camera-card">
    <ion-card-content>
    
      <button ion-button (click)="scan()">Scan</button>
      
    </ion-card-content>
  </ion-card>

以下是离子信息结果： screencapture-ionic info

【问题讨论】：

标签： ionic-framework ionic3 cordova-plugins phonegap-plugins barcode-scanner

【解决方案1】：

这是我的应用程序打开相机进行扫描的工作 sn-p (Ionic 4)

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Platform, AlertController } from '@ionic/angular';
import { DatabaseService} from '../../providers/database/database.service';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

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

  current:any;
  constructor(
    private platform: Platform,
    private router: Router,
    public db: DatabaseService,
    public barcodeScanner: BarcodeScanner,
    private alertController: AlertController
  )
  {}
  scan()
  {
    this.barcodeScanner.scan().then(barcodeData => {
      if(barcodeData.cancelled)
      {
        return
      }
      this.db.checkQRCode(barcodeData.text)
      .then(doc => {
      })
     }).catch(err => {
         console.log('Error', err);
     });
  }
}

【讨论】：

【解决方案2】：

我就是这样做的，而且效果很好

 export class BarcodePage {
  options: BarcodeScannerOptions;

   constructor(public app: App,
    public barcodeScanner: BarcodeScanner,
  ) {
    this._global.bankSelected.id
    this.options = {
      prompt: "whatever",
      formats: 'QR_CODE'
    }
    this.scan()
  }




scan() {
    this.barcodeScanner.scan(this.options).then(barcodeData => {
      if (barcodeData.cancelled == true) {
          this.navCtrl.pop()
      } else {
       do whatever with barcodeData.text
      }
    }).catch(err => {

      console.log('Error', err);
    });
  }

我只有一个页面作为“条形码控制器”，单击按钮启动扫描仪只是推动这个“条形码页面”

【讨论】：

这会激活您的相机进行扫描？