ionic2 @ionic-native/barcode-scanner应用

ionic2 @ionic-native/barcode-scanner集成应用

demo: https://github.com/wangzuxing/myionic2scan

1、创建项目工程(命令行方式)

ionic start myionic2scan blank --v2   //--v2 参数 
cd myionic2scan

2、
在package.json中添加(根据应用所需功能添加相应依赖项)：
添加项目依赖

"dependencies": {
    ...
    "@ionic-native/barcode-scanner": "^3.5.0",
    ...
},

添加cordovaPlugins项
内容包括一些常用cordova plugin和你所需插件cordova-plugin-camera
（项目创建默认是不包括此”cordovaPlugins”项的，个人应用发现必须添加，ionic plugin add ×××安装插件也必须在cordovaPlugins项添加相应支持
—底层打包确实是由cordova完成的）

"cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "ionic-plugin-keyboard",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "cordova-plugin-barcodescanner"
],

独立安装所需插件

//cordova-plugin-barcodescanner （底层插件）
ionic plugin add cordova-plugin-barcodescanner // 或执行“cordova plugin add cordova-plugin-barcodescanner”  完成后，可执行”ionic plugin list“命令显示项目已安装插件

3、
npm install //或使用”cnpm install” 主要完成安装所需模块（根据package.json中的配置参数指明所需模块）到node_modules目录，同时会生成相应的配置项在config.xml中

4、

ionic platform add android             // 添加platform支持 

5、
src/app/app.module.ts 添加：

import { BarcodeScanner } from '@ionic-native/barcode-scanner';   //1、导入模块

@NgModule({
  providers: [
    ...
    BarcodeScanner,                                      //2、注册为应用的的服务模块
    ...
  ]
})

src/pages/home/home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Camera Scan
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button round icon-only block (click)="scan()">
    <ion-icon name="qr-scanner"></ion-icon>
    </button>
    <input type="text" [value]="scannedText">
</ion-content>

src/pages/home/home.ts文件中导入应用:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';  //导入模块 

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

  constructor(public navCtrl: NavController, public barcodeScanner: BarcodeScanner) {
  }

  scan() {
        this.barcodeScanner.scan().then((barcodeData) => {
           if (barcodeData.cancelled) {
               console.log("User cancelled the action!");
              return false;
           }
           console.log("Scanned successfully!");
           console.log(barcodeData);
           this.scannedText=JSON.stringify(barcodeData);
        }, (err) => {
           console.log(err);
        });
   }
}

7、

ionic run android                      //android真机/模拟器调试