IONIC扫码目前有三个插件 ：
https://segmentfault.com/a/1190000012164809
该链接介绍的比较详细 ，下面采用的是 QR Scanner
扫描二维码
1.安装插件
$ ionic cordova plugin add cordova-plugin-qrscanner
$ npm install --save @ionic-native/qr-scanner2. 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 scanning
let scanSub = this.qrScanner.scan().subscribe((text: string) => {
if (text != undefined && text.toString() != "") {
alert(text);
}
// hide camera preview
this.qrScanner.hide();
// stop scanning
scanSub.unsubscribe();
});
// 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));
}
// 打开闪光灯功能
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.htmlindex.html页面需要在<body>标签内添加
<ion-app style="background: none transparent;"></ion-app>
总结：
1.该插件有个重大BUG，在启用该插件后，当手机键盘隐藏时，会看到摄像头后面的场景。上面的代码中，有在离开扫码页面时对该插件进行销毁的方法，但好像没有效果
2.在开发Ionic扫描二维码时，曾借鉴于 https://www.jianshu.com/p/82a5e323b49e
扫描一维码（条形码）
https://blog.csdn.net/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() {
@Override
public void run() {
// Create our Preview view and set it as the content of our activity.
mBarcodeView = new BarcodeView(cordova.getActivity());
//Configure the decoder
ArrayList<BarcodeFormat> formatList = new ArrayList<BarcodeFormat>();
//默认的
formatList.add(BarcodeFormat.QR_CODE);
//添加的 statr
formatList.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);
//end
mBarcodeView.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);
}