ionic2实现扫描二维码功能

注意使用该插件不能使用

1. 安装插件

// 安装平台插件
ionic cordova plugin add cordova-plugin-qrscanner

// 安装ionic2插件
npm install --save @ionic-native/qr-scanner

---

2.使用插件

1.创建扫描二维码的页面

ionic generate page qrdcan

2.页面跳转到扫码页面

跳转方法

  //  跳转扫码页面
  goQrdcan(){
    this.navCtrl.push('QrdcanPage');
  }

3.扫码页面

// index.html

// qrdcan.html

    
        扫码页面
    



    

    
    

    

        
            
        
        
            
        
    

// qrdcan.scss

page-qrdcan {
    .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;
        }
    }
}

// qrdcan.ts

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

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

@IonicPage()
@Component({
  selector: 'page-qrdcan',
  templateUrl: 'qrdcan.html',
})

export class QrdcanPage implements OnInit {

  // 控制闪光灯
  light: boolean = false;

  // 控制摄像头前后
  frontCamera: boolean = false;

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private qrScanner: QRScanner,
    private 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));
  }

  //页面加载完成事件
  ionViewDidLoad() {
    console.log('ionViewDidLoad QrdcanPage');
  }

  // 页面即将进来
  ionViewWillEnter() {
    let elements = document.querySelectorAll(".tabbar");
    if (elements != null) {
      Object.keys(elements).map((key) => {
        elements[key].style.display = 'none';
      });
    }
  }

  // 页面即将离开
  ionViewWillLeave() {
    let elements = document.querySelectorAll(".tabbar");
    if (elements != null) {
      Object.keys(elements).map((key) => {
        elements[key].style.display = 'flex';
      });
    }
  }

  // 销毁当前页面
  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();
    }
  }


}