IONIC扫码目前有三个插件 ：
/a/1190000012164809
该链接介绍的比较详细，下面采用的是 QR Scanner
扫描二维码
1.安装插件
$ ionic cordova plugin add cordova-plugin-qrscanner$ npm install --save @ionic-native/qr-scanner
2. QrPage .ts 页面代码
import { Component, OnInit } from '@angular/core';import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';@IonicPage()@Component({selector: 'page-qr',templateUrl: 'qr.html',})export class QrPage {// 控制闪光灯light: boolean = false;// 控制摄像头前后frontCamera: boolean = false;constructor(public navCtrl: NavController,private viewCtrl: ViewController,public qrScanner: QRScanner) {}//扫描二维码ngOnInit() {this.qrScanner.prepare().then((status: QRScannerStatus) => {if (status.authorized) {// camera permission was granted// start scanninglet scanSub = this.qrScanner.scan().subscribe((text: string) => { if (text != undefined && text.toString() != "") {alert(text); }// hide camera previewthis.qrScanner.hide();// stop scanningscanSub.unsubscribe(); });// show camera previewthis.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));}// 打开闪光灯功能toggleLight() {this.light = !this.light;if (this.light) {this.qrScanner.enableLight();} else {this.qrScanner.disableLight();}}// 切换摄像头功能toggleCamera() {this.frontCamera = !this.frontCamera;if (this.frontCamera) {this.qrScanner.useFrontCamera();} else {this.qrScanner.useBackCamera();}}//页面即将关闭ionViewCanLeave() { //关闭页面时，将闪光灯关闭this.qrScanner.disableLight();//将摄像头默认成后置摄像头this.qrScanner.useBackCamera();//将qrScanner销毁掉this.qrScanner.destroy();this.qrScanner.hide();}}
3. QrPage.html
<ion-header><ion-navbar><ion-title> scanning </ion-title> </ion-navbar></ion-header><ion-content no-scroll class="qrscanner"><--扫码框--><div class="qrscanner-area"></div><--扫码框中的线--><div class="through-line"></div><--扫码框下面的提示信息--><div class="tip-div"><p>请对准您的二维码</p></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>
4.QrPage.css
page-qr{.qrscanner {background: none;&-area {width: 60%;height: 205px;margin: auto;margin-top: 145px;border: 1px solid #ebe6e6}}.through-line {left: 20%;width: 60%;height: 2px;background: red;position: absolute;animation: myfirst 5s linear infinite alternate;}@keyframes myfirst {0% {background: red;top: 145px;}25% {background: yellow;top: 196px;}50% {background: blue;top: 247px;}75% {background: green;top: 298px;}100% {background: red;top: 348px;}}.button-bottom {width: 128px;position: absolute;left: 50%;bottom: 50px;margin-left: -64px;.icon-camera {float: left;}}.tip-div {text-align: center;color: white;}}
5.在Index页面（最关键的一步，不加这个，你的扫码页面将会是一片白）
index页面路径
D:\QRScanner\QR\src\index.html
index.html页面需要在<body>标签内添加
<ion-app style="background: none transparent;"></ion-app>
总结：
1.该插件有个重大BUG，在启用该插件后，当手机键盘隐藏时，会看到摄像头后面的场景。上面的代码中，有在离开扫码页面时对该插件进行销毁的方法，但好像没有效果
2.在开发Ionic扫描二维码时，曾借鉴于/p/82a5e323b49e
扫描一维码（条形码）
/cangahi09025566/article/details/80350104
该链接介绍的特别详细，注意该链接中添加一维码格式的路径
D:\QRScanner\QR\plugins\cordova-plugin-qrscanner\src\android\QRScanner.java
添加的内容
private void setupCamera(CallbackContext callbackContext) {cordova.getActivity().runOnUiThread(new Runnable() {@Overridepublic void run() {// Create our Preview view and set it as the content of our activity.mBarcodeView = new BarcodeView(cordova.getActivity());//Configure the decoderArrayList<BarcodeFormat> formatList = new ArrayList<BarcodeFormat>();//默认的formatList.add(BarcodeFormat.QR_CODE);//添加的 statrformatList.add(BarcodeFormat.UPC_A); // UPC标准码(通用商品)formatList.add(BarcodeFormat.UPC_E); // UPC缩短码(商品短码)formatList.add(BarcodeFormat.EAN_13);formatList.add(BarcodeFormat.EAN_8);formatList.add(BarcodeFormat.CODE_39);formatList.add(BarcodeFormat.CODE_93);formatList.add(BarcodeFormat.CODE_128);formatList.add(BarcodeFormat.ITF);formatList.add(BarcodeFormat.DATA_MATRIX);//endmBarcodeView.setDecoderFactory(new DefaultDecoderFactory(formatList, null, null));//Configure the camera (front/back)CameraSettings settings = new CameraSettings();settings.setRequestedCameraId(getCurrentCameraId());mBarcodeView.setCameraSettings(settings);FrameLayout.LayoutParams cameraPreviewParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT);((ViewGroup) webView.getView().getParent()).addView(mBarcodeView, cameraPreviewParams);cameraPreviewing = true;webView.getView().bringToFront();mBarcodeView.resume();}});prepared = true;previewing = true;if(shouldScanAgain)scan(callbackContext);}
