IONIC掃描二維碼和一維碼（條形碼）
阿新 • • 發佈：2018-11-17
IONIC掃碼目前有三個外掛 ：
https://segmentfault.com/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 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);
}