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

<ion-app style="background: none transparent;"></ion-app>

// qrdcan.html

<ion-header>
    <ion-navbar>
        <ion-title>扫码页面</ion-title>
    </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>

// 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();
    }
  }


}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

golang使用protobuf

为什么要使用protobuf 最近的项目中,一直使用Json做数据传输。Json用起来的确很方便。但相对于protobuf数据量更大些。做一个移动端应用,为用户...

90350
来自专栏前端儿

前端代码乱糟糟?是时候引入代码质量检查工具了

为了统一团队的代码规范,除了一纸规范说明之外,还需要引入工具进行限制。虽说工具并不能完全实现规范中的规则,但至少能够在一定程度上缓解代码不统一的局面。

38810
来自专栏菩提树下的杨过

利用Spring的@Async异步处理改善web应用中耗时操作的用户体验

Web应用中,有时会遇到一些耗时很长的操作(比如:在后台生成100张报表再呈现,或 从ftp下载若干文件,综合处理后再返回给页面下载),用户在网页上点完按钮后,...

27770
来自专栏青玉伏案

iOS开发之使用XMPPFramework实现即时通信(二)

上篇的博客iOS开发之使用XMPPFramework实现即时通信(一)只是本篇的引子,本篇博客就给之前的微信加上即时通讯的功能,主要是对XMPPFramewor...

23460
来自专栏Jerry的SAP技术分享

如何将BSP应用配置成Fiori Launchpad上的一个tile

当我们通过WebIDE或者Eclipse的插件Team Provider把一个本地开发好的UI5应用部署到了ABAP Netweaver服务器上之后,我们可以将...

24370
来自专栏岑志军的专栏

(7)theos安装

20740
来自专栏WindCoder

Myeclipse常用设置

3、解压下载好的SVN插件,把里面的features和plugins文件夹拷贝到dropins文件夹下的SVN文件夹中。

23020
来自专栏FreeBuf

EKFiddle:基于Fiddler研究恶意流量的框架

EKFiddle是一个基于Fiddler web debugger的,用于研究漏洞利用套件、恶意软件和恶意流量的框架。

12900
来自专栏xiaoheike

创建一个maven web project

几经周折总算是找到了和高杨学长一样的web  project的方法。感谢学长的一语点醒。我之前以为,既是maven又是web project的项目得要是通过dy...

16230
来自专栏源码之家

DZ X2.0去除贴内AD图标,贴内广告上移到分享按钮上面的方法

11120

扫码关注云+社区

领取腾讯云代金券