Ionic framework 离子条形码扫描仪。扫描不是一项功能

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

以下是文件：

爱奥尼亚信息：

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>

正如您所看到的，它没有什么作用，只需一个按钮即可调用

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

检查库时，我可以看到函数，它有一些关于如何使用的文档，代码与我在方法中添加的代码相同。

---

错误在哪里？

尝试将

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);
       });
  }
}

试试这个

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);
                  });
     }

---

在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

注意：

仅当使用角度6时，才在导入结束时添加ngx

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

如果没有，则从app.module.ts和app.component.ts中的导入中删除ngx

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

---

Refencence：

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

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

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

npm i-s@ionic native/条形码-scanner@4.20.0

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

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

npm i-s@ionic native/条形码-scanner@5.0.0-β.24

注意：

仅当使用Angular 6时，才在导入结束时添加ngx

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

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

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

---

就这些。。。享受您的编码…

您使用@beta添加了插件，我说得对吗？非常好….工作正常。。。。。实际上我花了更多的时间在条形码扫描上。现在从你的回答中得到了结果。。。。太多了…这只是另一个答案的副本