ionic2/3实战-使用二维码扫描插件cordova-plugin-qrscanner

前言

• 起初使用的二维码扫描插件是phonegap-plugin-barcodescanner，此插件使用简单看官网文档就够了，但是扫描体验不是很理想，一定要把二维码对的很准才能出结果；准确的来说这个插件叫条码扫描插件，不仅仅只是扫描二维码
• 本文将介绍另一款扫描二维码的插件cordova-plugin-qrscanner，扫描效率高，高度可定制；由于高度可定制所以在ionic项目中使用需要添加一些自定义样式才能见效果

插件安装

• 安装插件

ionic cordova plugin add phonegap-plugin-barcodescanner

• 安装插件typescript依赖

cnpm install --save @ionic-native/[email protected]

其中@4.3.2是和项目中的其他插件版本保持一致，我的package.json

• 如下图，在app.module.ts中声明插件

import { QRScanner } from '@ionic-native/qr-scanner';
QRScanner

使用插件

• 你可以先点这里预览一下代码，我再说
• 核心代码如下
  1.判断是否有摄像头权限
  2.订阅扫描结果事件
  3.打开摄像头

    this.qrScanner.prepare().then((status: QRScannerStatus) => {
      if (status.authorized) { // 判断是否有摄像头权限
        let scanSub = this.qrScanner.scan().subscribe((text: string) => {
          this.events.publish('qrscanner:result', text);
          scanSub.unsubscribe();
          this.navCtrl.pop();
        });
        // 打开摄像头
        this.qrScanner.show();
      } else if (status.denied) {
        this.nativeService.alert('没有权限', null, '没有摄像头权限，请前往设置中开启', () => {
          this.qrScanner.openSettings();
        });
      } else {
        this.nativeService.alert('没有权限', null, '没有摄像头权限，请前往设置中开启', () => {
          this.qrScanner.openSettings();
        });
      }
    }).catch((e: any) => console.log('调用二维码扫描插件失败', e));

• 通过触发某事件，然后调用核心代码，打开摄像头，应该就实现了二维码扫描效果了；我也是这样想的，但实际情况是没有任何效果，原因又简单又坑：我们必须使app的背景色为透明，才能看到效果，于是就自定义css使ionic背景色透明，有了如下代码，添加cameraView类，你可以点这里

ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {
  background: transparent none !important;
  .tabbar.show-tabbar {
    opacity: 0;
  }
}

• 在调用核心代码后，我们要给添加cameraViewclass，如下图，同理在取消扫描也要删除cameraViewclass
  
  

// 添加cameraView类
 (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');

// 移除cameraView类
(window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');

• 做了上面操作后就可以正常使用扫描二维码功能了，由于它不提供任何ui，所以说是高度可定制，ui界面需要自己实现

封装

• 为了统一ui风格和方便调用，则把此插件封装成公共组件，效果如下
  你可能已经看到我不用把二维码放到中心都已经出结果了，其实他是整个页面都是扫描区域，中间的框框只是ui界面

  
  

• 前面已经讲了核心代码，剩下的都是ui工作了，那就不多说了，我的完整代码可以点这里
  

  

• 调用封装后的二维码扫描组件

  scan() {
    // 进入二维码扫描界面
    this.navCtrl.push('QrscannerPage').then(() => {
      // 订阅扫描结果
      this.events.subscribe('qrscanner:result', text => {
        alert('扫描结果：' + text);
      });
    });
  }

• 最后，你可以下载我的app体验更多demo