Ionic2入門教程（十三）帶你走近3款二維碼掃描插件

Ionic二維碼掃描插件

系列教程看這裏
Ionic2入門教程（一）安裝和環境配置
Ionic2入門教程（二）進階配置：Android打包
ionic2入門教程（三）高仿網易公開課（1）
ionic2入門教程（四）解讀目錄結構
ionic2入門教程（五）如何使用IonicPage
ionic2入門教程（六）地圖服務（谷歌、高德、百度定位）
ionic2入門教程（七）來一個五星評分
ionic2入門教程（八）高仿網易公開課（2）
ionic2入門教程（九）樣式修改和主題切換
Ionic2入門教程（十）如何debug一個Ionic應用
Ionic2入門教程（十一）製做一個視頻背景歡迎頁
Ionic2入門教程（十二）使用阿里巴巴矢量圖標庫Iconfont

0、關於插件

想在ionic2+中使用插件，要用到ionic native、官方網址以下：
https://ionicframework.com/do...
Ionic Native是一個用於Cordova / PhoneGap插件的TypeScript包裝器，它可讓您在Ionic移動應用程序中添加任何您須要的本地功能。
Ionic Native其實不是插件，它是基於typeScript封裝了cordova插件的調用模塊，也就是說Ionic Native只是調用庫，而不包含插件代碼。

一、Cordova插件使用方式一：基於cordova

這種方式很是依賴cordova文檔
在import以後，@Component以前加上declare的聲明代碼
declare let DemoPlugin: any;
經過DemoPlugin來調用相關方法

二、Cordova插件使用方式二：基於ionic-native

早期的ionic-native是一個封裝了所有插件調用庫模塊，引用一次，就會引入全部插件，很冗餘。因此拆分紅一個個模塊。這樣當裝哪一個cordova插件時，再裝對應的native子模塊。咱們這裏用到了就是這樣的方式。基於typeScript的class概念，每一個方法屬性都能較清楚地看到定義和說明。

$ ionic cordova plugin add phonegap-plugin-barcodescanner

$ npm install --save @ionic-native/barcode-scanner

0.一、按推薦順序倒序排列

最近項目用到了二維碼掃描的功能，我的以爲學習的過程應該是，會用，用好，會寫，寫好。
從用別人的插件，到本身能寫出一款很好的插件，這樣的過程，應該是最有意義的。

三款插件分別是barcode-scanner，zbar，qr-scanner，前兩個都比較經常使用，可是實際上，很難用，第一個掃描時存在閃屏，速度慢，第二款速度到不錯，全屏，但總以爲少了什麼，由於頁面上都沒辦法進行定製，好比說中間的小方框，上下滾動的線，終於找到了第三個qr-scanner，是經過將頁面背景設置爲透明，這樣頁面上的元素就能夠徹底本身設計，並且做者還將全部方法暴露出來，真正是一個很靈活的插件。

爲qr-scanner打call~，雖然star很少，但我我的最喜歡這個~，不過用起來，會比較難一些~
https://github.com/bitpay/cor...
放圖：

我實現了上述三種插件的使用，demo下載看這裏，使用的話建議從3開始~
https://github.com/JiaXinYi/i...

注意：三個掃描插件互相會衝突，安裝新的要移除前一個，移除命令爲 ionic cordova plugin rm

一、barcode-scanner

https://ionicframework.com/do...

$ ionic cordova plugin add phonegap-plugin-barcodescanner

$ npm install --save @ionic-native/barcode-scanner

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

constructor(private barcodeScanner: BarcodeScanner) { }

scan() {
    let options: BarcodeScannerOptions = {
      preferFrontCamera: false,//前置攝像頭
      showFlipCameraButton: true,//翻轉攝像頭按鈕
      showTorchButton: true,//閃關燈按鈕
      prompt: '掃描中……',//提示文本
      formats: 'QR_CODE',//格式
      orientation: 'portrait',//方向
      torchOn: false,//啓動閃光燈
      resultDisplayDuration: 500,//顯示掃描文本
      disableSuccessBeep: true // iOS and Android
    }
    this.barcodeScanner
      .scan(options)
      .then((data) => {
        this.barcodeData = data;
        const alert = this.alertCtrl.create({
          title: 'Scan Results',
          subTitle: data.text,
          buttons: ['OK']
        });
        alert.present();
      })
      .catch((err) => {
        const alert = this.alertCtrl.create({
          title: 'Attention!',
          subTitle: err,
          buttons: ['Close']
        });
        alert.present();
      });

二、zbar

https://ionicframework.com/do...

$ ionic cordova plugin add cordova-plugin-cszbar

$ npm install --save @ionic-native/zbar

import { ZBar, ZBarOptions } from '@ionic-native/zbar';

constructor(private zbar: ZBar) { }

// 掃描
  scan() {
    let options: ZBarOptions = {
      flash: 'off',
      text_title: '掃碼',
      text_instructions: '請將二維碼置於紅線中央',
      // camera: "front" || "back",
      drawSight: true
    };

    this.zbar.scan(options)
      .then(result => {
        alert("結果：" + result); // Scanned code
      })
      .catch(error => {
        alert(error); // Error message
      });
  }

三、qr-scanner

https://ionicframework.com/do...

$ ionic cordova plugin add cordova-plugin-qrscanner

$ npm install --save @ionic-native/qr-scanner

qrscan() {
    // this.modalController.create('ScanPage').present();
    this.navCtrl.push('ScanPage');
    跳轉到了scan這個頁面~比較符合正常的使用方式吧~
  }

.html
<ion-header>
  <ion-navbar>
      <ion-title>掃描中……</ion-title>
      <ion-buttons start>
          <button ion-button (click)="dismiss()">
              <ion-icon name="close"></ion-icon>
          </button>
      </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content no-scroll class="qrscanner">
  <div class="qrscanner-area">    
  </div> 
   <div class="through-line"></div>
  <div class="button-bottom">
      <button (click)="toggleLight()" ion-fab class="icon-camera" margin-right>
          <ion-icon name="flash"></ion-icon>                  
      </button>
      <button (click)="toggleCamera()" ion-fab class="icon-camera">
          <ion-icon name="reverse-camera"></ion-icon>                  
      </button>
  </div>    
</ion-content>

.ts
  protected light: boolean = false;
  protected frontCamera: boolean = false;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private qrScanner: QRScanner,
    public viewCtrl: ViewController
  ) {
  }

  ngOnInit() {
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        if (status.authorized) {
          // camera permission was granted

          // start scanning
          let scanSub = this.qrScanner.scan().subscribe((text: string) => {
            // alert(text);

            this.qrScanner.hide(); // hide camera preview
            scanSub.unsubscribe(); // stop scanning
          });

          // show camera preview
          this.qrScanner.show();

          // wait for user to scan something, then the observable callback will be called

        } else if (status.denied) {
          // camera permission was permanently denied
          // you must use QRScanner.openSettings() method to guide the user to the settings page
          // then they can grant the permission from there
        } else {
          // permission was denied, but not permanently. You can ask for permission again at a later time.
        }
      })
      .catch((e: any) => console.log('Error is', e));
  }
  public dismiss(): void {
    this.viewCtrl.dismiss();
  }
  toggleLight() {
    this.light = !this.light;
    if (this.light) {
      this.qrScanner.disableLight();
    } else {
      this.qrScanner.enableLight();

    }
  }
  toggleCamera() {
    this.frontCamera = !this.frontCamera;
    if (this.frontCamera) {
      this.qrScanner.useBackCamera();
    } else {
      this.qrScanner.useFrontCamera();
    }
  }

.scss
很作做的作了一個上下移動的橫線，也不知道是受了誰家二維碼掃描的影響
 .qrscanner {
    background: none;
    &-area {
      width: 100%;
      height: 85%;
      background: url(../assets/imgs/scanner.svg) no-repeat center center;
      background-size: contain;
    }
  }
  .through-line {
    left: 20%;
    width: 60%;
    height: 2px;
    background: red;
    position: absolute;
    animation: myfirst 5s linear infinite alternate;
  }
  @keyframes myfirst {
    0% {
      background: red;
      top: 180px;
    }
    25% {
      background: yellow;
      top: 220px;
    }
    50% {
      background: blue;
      top: 240px;
    }
    75% {
      background: green;
      top: 260px;
    }
    100% {
      background: red;
      top: 280px;
    }
  }
  .button-bottom {
    width: 128px;
    position: absolute;
    left: 50%;
    bottom: 80px;
    margin-left: -64px;
    .icon-camera {
      float: left;
    }
  }

對，就是中間這條線~用了css3的動畫實現的，還蠻有意思的~

四、demo下載看這裏

https://github.com/JiaXinYi/i...還不夠完善~若是你作出了更棒的，歡迎留下你的github噢~互相學習~若是對各位有幫助的話，歡迎star，fork~