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真机/模拟器调试