Question

我正在用ionic 4.0.6构建的新应用程序中实现QRCode扫描器，并且已遵循有关如何集成扫描器的文档。

以下文档：https://ionicframework.com/docs/native/barcode-scanner/

离子信息：

Ionic:

   ionic (Ionic CLI)  : 4.0.6 (/Users/christiangiupponi/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.1

Cordova:

   cordova (Cordova CLI) : 7.0.1
   Cordova Platforms     : android 6.2.3

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.4
   NodeJS            : v10.8.0 (/usr/local/bin/node)
   npm               : 5.0.3
   OS                : macOS High Sierra
   Xcode             : Xcode 10.1 Build version 10B61

Environment:

   ANDROID_HOME : /Users/christiangiupponi/Library/Android/sdk

这是我的代码：

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { QrCodeAllModule } from 'ngx-qrcode-all';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    QrCodeAllModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.html

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

<ion-content padding>
  <div id="qrcodeid">
    <qr-code-all [qrCodeType]="url"
        [qrCodeValue]="'SK is the best in the world!'"
        [qrCodeVersion]="'3'"
        [qrCodeECLevel]="'M'"
        [qrCodeColorLight]="'#ffffff'"
        [qrCodeColorDark]="'#000000'"
        [width]="11"
        [margin]="4"
        [scale]="4"
        [scanQrCode]="false">
    </qr-code-all>
  </div>

  <button ion-button (click)="openScanner()">Open</button>
</ion-content>

这是home.ts文件

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

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

  constructor(private barcodeScanner: BarcodeScanner) {

  }

  openScanner(){
    this.barcodeScanner.scan().then(barcodeData => {
       console.log('Barcode data', barcodeData);
       }).catch(err => {
        console.log('Error', err);
       });
  }

}

如您所见，它并没有多大作用，只是一个按钮即可调用openScanner函数。
如果我在设备（Android 7）上运行它，则会看到空白页。
使用Chrome的工具，我检查了该应用程序，可以看到：

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at BarcodeScanner.scan (vendor.js:81810)
    at new HomePage (main.js:61)
    at createClass (vendor.js:13119)
    at createDirectiveInstance (vendor.js:12962)
    at createViewNodes (vendor.js:14420)
    at createRootView (vendor.js:14309)
    at callWithDebugContext (vendor.js:15734)
    at Object.debugCreateRootView [as createRootView] (vendor.js:15017)
    at ComponentFactory_.create (vendor.js:11914)
    at ComponentFactoryBoundToModule.create (vendor.js:4666)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (vendor.js:53655)
    at NavControllerBase._failed (vendor.js:53648)
    at vendor.js:53695
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:5396)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3

检查库，我可以看到该函数，并且其中有一些有关如何使用的文档，并且代码与我在方法中添加的代码相同。
错误在哪里？

Answer 1

在ionic.config.json文件中检查您的项目类型。

如果类型为“离子角” ，则安装4.x.x版本。就您而言

npm i -s @ionic-native/barcode-scanner@4.20.0

如果类型为“角度” ，则安装5.x.x-beta版本

npm i -s @ionic-native/barcode-scanner@5.0.0-beta.24

注意：

仅当您使用 Angular 6

时，才在导入末尾添加ngx。

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

如果未从导入的app.module.ts和app.component.ts

中删除 ngx

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

参考：https://github.com/ionic-team/ionic/issues/15225#issuecomment-414074074

Answer 2

尝试将BarcodeScannerOptions赋予scan函数。

import { BarcodeScanner, BarcodeScannerOptions } from '@ionic-native/barcode-scanner';

export class HomePage {

  qrOptions: BarcodeScannerOptions;

  constructor(private barcodeScanner: BarcodeScanner) {
    this.qrOptions = { prompt: 'Scan the QR Code to Enter', resultDisplayDuration: 0 };
  }

  openScanner(){
    this.barcodeScanner.scan(this.qrOptions)
      .then(barcodeData => {
       console.log('Barcode data', barcodeData);
       })
       .catch(err => {
        console.log('Error', err);
       });
  }
}

Answer 3

尝试一下。

import { BarcodeScanner, BarcodeScannerOptions } from '@ionic-native/barcode-scanner';

函数：

  public openScanner(): void {
        let options: BarcodeScannerOptions = {
           showTorchButton: true,// or false
           resultDisplayDuration: 100
          }

        this.barcodeScanner.scan(options).then((barcodeData) => {
                console.log('Barcode data', barcodeData);
             }).catch(error => {
                  console.log(error);
                  });
     }

Answer 4

在ionic.config.json文件中检查您的项目类型。

如果类型为“ ionic-angular”，则安装4.x.x版本。就您而言

npm i -s @ ionic-native / barcode-scanner @ 4.20.0

如果类型为“角度”，则安装5.x.x-beta版本

npm i -s @ ionic-native / barcode-scanner @ 5.0.0-beta.24

注意：

仅当您使用Angular 6时，才在导入末尾添加ngx

从'@ ionic-native / barcode-scanner / ngx'导入{BarcodeScanner}; 如果没有，请从app.module.ts和app.component.ts的导入中删除ngx

从'@ ionic-native / barcode-scanner'导入{BarcodeScanner};

仅此而已...享受您的编码...

Ionic-BarcodeScanner .scan不是功能

4 个答案: