时间戳

首页 > 解决方案 > 离子 - BarcodeScanner .scan 不是函数

ionic-framework - 离子 - BarcodeScanner .scan 不是函数

问题描述

我正在使用 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 {}

主页.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

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

标签： ionic-framework

解决方案

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

如果类型是"ionic-angular"，则安装 4.xx 版本。在你的情况下

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

如果类型是"angular"，则安装 5.xx-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

推荐阅读