时间戳

首页 > 解决方案 > 使用 BarcodeScanner 时，我的 ionic 应用程序出现以下错误

ionic-framework - 使用 BarcodeScanner 时，我的 ionic 应用程序出现以下错误

问题描述

我正在开发一个应用程序来读取我正在使用 BarcodeScanner 的代码，但是当我在我的设备上执行该应用程序时，我收到以下错误

**

**使用 ionic DevApp 错误运行时错误对象（_WEBPACK_IMPORTED_MODULE_1_ionic_native_core_["cordova"]) 在我的 iphone 6 上运行它时出错，它不是函数。（在 'Object(_WEBPACK_IMPORTED_MODULE_1_ionic_native_core_["cordova"])(this, "scan", {"callbackOrder":"reverse"}, arguments)', 'Object(_WEBPACK_IMPORTED_MODULE_1_ionic_native_core_["cordova"])' 是 Object 的一个实例）

在 ionic serve 中执行时显示的错误，ERROR TypeError: Object(...) is not a function at BarcodeScanner.scan (index.js:31) at MenuPage.webpackJsonp.101.MenuPage.scanQR (menu.ts: 53) 在 Object.eval [as handleEvent] (MenuPage.html:17) at handleEvent (core.js:13589) at callWithDebugContext (core.js:15098) at Object.debugHandleEvent [as handleEvent] (core.js:14685)在 HTMLButtonElement 的 core.js:10629 的 dispatchEvent (core.js:10004)。(platform-b​​rowser.js:2628) 在 t.invokeTask (polyfills.js:3) **

一开始我遇到错误，我的 app-module.ts 无法识别 BarcodeScanner，因为在提供程序中调用它时，TS2322：类型“BarcodeScannerOriginal”不可分配给类型“Provider”。类型“BarcodeScannerOriginal”不可分配给类型“FactoryProvider”。“BarcodeScannerOriginal”类型中缺少属性“provide”

** 菜单.html

<ion-header class="toolbar">
  <ion-navbar>
    <ion-title>Scan</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding class="Scan">
  <div class="row">
    <div class="col">
      <h2>Scan your QR Code Here</h2>
    </div>
    <div class="col">
      <h3>{{eventTitle}}</h3>
    </div>
  </div>
  <button ion-button block color="secondary" class="Scan-button" (click)="scanQR()" [disabled]="loading">{{buttonText}}</button>
</ion-content>

菜单.ts

import { Component } from '@angular/core';
import {Platform} from "ionic-angular";
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { ToastController } from 'ionic-angular';
import { BarcodeScanner, BarcodeScannerOptions } from '@ionic-native/barcode-scanner/ngx';


/**
 * Generated class for the MenuPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

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

  public scannedText: string;
  public buttonText: string;
  public loading: boolean;
  private eventId: number;
  public eventTitle: string;

  num: string;

  // @ts-ignore
  constructor(private _nav: NavController,
              private _navParams: NavParams,
              private _barcodeScanner: BarcodeScanner) {



  }
  ionViewDidLoad() {
    this.eventId = this._navParams.get('eventId');
    this.eventTitle = this._navParams.get('eventTitle');

    this.buttonText = "Scan";
    this.loading = false;
  }

  public scanQR() {
    this.buttonText = "Loading..";
    this.loading = true;

    this._barcodeScanner.scan().then((barcodeData) => {
      if (barcodeData.cancelled) {
        console.log("User cancelled the action!");
        this.buttonText = "Scan";
        this.loading = false;
        return false;
      }
      console.log("Scanned successfully!");
      console.log(barcodeData);
      this.goToResult(barcodeData);
    }, (err) => {
      console.log(err);
    });
  }

  private goToResult(barcodeData) {
    this._nav.push(ScanResultPage, {
      scannedText: barcodeData.text
    });
  }
}

应用模块.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 {MenuPage} from "../pages/menu/menu";
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { HttpClientModule } from '@angular/common/http';

import { FormsModule } from '@angular/forms';
import {HttpModule} from "@angular/http";


// @ts-ignore
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MenuPage
  ],
  imports: [
    BrowserModule, HttpClientModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MenuPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}




  ]


})
export class AppModule {}

在此处输入图像描述

标签： ionic-framework

解决方案

我的猜测是您使用的是 Ionic 3，但您使用的是 Ionic 4 支持的本机插件版本。

解决方案

卸载cordova和离子原生插件

$ionic cordova plugin remove phonegap-plugin-barcodescanner
$npm uninstall @ionic-native/barcode-scanner

安装版本4。

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

并且不要在导入结束时附加ngx 。

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

笔记

如果您使用的是 Ionic 3，请尝试遵循 Ionic v3 指南而不是最新指南

Ionic v3 指南：https ://ionicframework.com/docs/v3/native/barcode-scanner/

如需完整解释，您可以在此处找到我的其他答案：https ://stackoverflow.com/a/54474247/6617276

推荐阅读