ionic 官方有提供三个扫描插件，分别为：
-
Barcode Scanner
速度很慢，样式不怎样 -
QR Scanner
速度快，样式随心所欲，直接在html里修改属于自己的样式 -
ZBar
速度快，能扫描条形码与二维码，这样也导致如果二维码附近有其它类似一维码的图案，可能会影响值的准确性，还有没有提供扫描框
综合以上，所以最后还是决定使用QR Scaner进行扫描。
1. 安装插件
$ ionic cordova plugin add cordova-plugin-qrscanner
$ npm install --save @ionic-native/qr-scanner
2. 新建扫描页面
$ ionic g page scan
成功后
图片.png
3. 使用
assets/imgs
扫描框图片做css背景
下载图片
图片.png
scan.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>
scan.scss
page-scan {
.qrscanner {
background: none;
&-area {
width: 100%;
height: 86%;
background: url(../assets/imgs/scanner.svg) no-repeat center center;
background-size: contain;
}
}
.through-line {
left: 25%;
width: 50%;
height: 2px;
background: red;
position: absolute;
animation: myfirst 2s linear infinite alternate;
}
@keyframes myfirst {
0% {
background: red;
top: 30%;
}
25% {
background: yellow;
top: 35%;
}
50% {
background: blue;
top: 40%;
}
75% {
background: green;
top: 45%;
}
100% {
background: red;
top: 50%;
}
}
.button-bottom {
width: 128px;
position: absolute;
left: 50%;
bottom: 80px;
margin-left: -64px;
.icon-camera {
float: left;
}
}
}
scan.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
/**
* Generated class for the ScanPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-scan',
templateUrl: 'scan.html',
})
export class ScanPage {
light: boolean;//判断闪光灯
frontCamera: boolean;//判断摄像头
constructor(
private navCtrl: NavController,
private navParams: NavParams,
private qrScanner: QRScanner,
private viewCtrl: ViewController) {
//默认为false
this.light = false;
this.frontCamera = false;
}
ionViewDidLoad() {
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
this.navCtrl.pop();
});
// 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));
}
ionViewDidEnter(){
//页面可见时才执行
this.showCamera();
}
/**
* 闪光灯控制，默认关闭
*/
toggleLight() {
if (this.light) {
this.qrScanner.disableLight();
} else {
this.qrScanner.enableLight();
}
this.light = !this.light;
}
/**
* 前后摄像头互换
*/
toggleCamera() {
if (this.frontCamera) {
this.qrScanner.useBackCamera();
} else {
this.qrScanner.useFrontCamera();
}
this.frontCamera = !this.frontCamera;
}
showCamera() {
(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
}
hideCamera() {
this.qrScanner.hide();//需要关闭扫描，否则相机一直开着
(window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
}
ionViewWillLeave() {
this.hideCamera();
}
}
variables.scss
ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {
background: transparent none !important;
.tabbar.show-tabbar{
opacity: 0;
}
}
最后在所需的页面跳转scan页面即可
this.navCtrl.push('ScanPage');
4. 效果
1.gif
5. android版本仍黑屏问题
当你以上设置完后，运行在android手机上背景无法透明，依然显示黑屏的情况，主要是ionic css的结构被改变过，所以代码所设置的样式无法生效，例如安装了cordova-plugin-crosswalk-webview无法正确显示相机画面。把它删除即可
网友评论
已经修改了参数类型
metaOutput!.metadataObjectTypes = metaOutput!.availableMetadataObjectTypes
Parser Error: Missing expected } at the end of the expression [{'qrscanner':isShow] in ng:///ScanPageModule/ScanPage.html@11:23 ("
</ion-navbar>
</ion-header>
<ion-content no-scroll [ERROR ->][ngClass]="{'qrscanner':isShow" >
<div [ngClass]="{'qrscanner-area':isShow}">
</div>
"): ng:///ScanPageModule/ScanPage.html@11:23
Parser Error: Missing expected } at the end of the expression [{'qrscanner':isShow] in ng:///ScanPageModule/ScanPage.html@11:23 ("
</ion-navbar>
</ion-header>
这个问题楼主有遇到过吗
Parser Error: Missing expected } at the end of the expression [{'qrscanner':isShow] in ng:///AppModule/ScanPage.html@5:23 ("
</ion-navbar>
</ion-header>
<ion-content no-scroll [ERROR ->][ngClass]="{'qrscanner':isShow" >
<div [ngClass]="{'qrscanner-area':isShow}">
</div>
"): ng:///AppModule/ScanPage.html@5:23
Parser Error: Missing expected } at the end of the expression [{'qrscanner':isShow] in ng:///AppModule/ScanPage.html@5:23 ("
</ion-navbar>
</ion-header>
按照大佬写法报错了，这是什么原因，大佬看一下
再问一下：header能不能让它透明
即可支持barcode；
安卓部分在QRScanner.java的458行添加一个barcode的类型即可
<preference name="CrosswalkAnimatable" value="true" />
试下看能否解决
我的插件列表：
"cordova": {
"plugins": {
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-camera": {},
"com.synconset.imagepicker": {
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "your usage message"
},
"cordova-sqlite-storage": {},
"cordova-plugin-file-opener2": {},
"cordova-hot-code-push-plugin": {},
"cordova-plugin-qrscanner": {},
"cordova-android-support-gradle-release": {
"ANDROID_SUPPORT_VERSION": "27.+"
}
},
帮忙看下是哪里有问题？
https://github.com/bitpay/cordova-plugin-qrscanner/issues/125
in app.scss
html, body.transparent-body, .transparent-body, .transparent-body ion-app, .transparent-body .app-root, .transparent-body ion-nav, .transparent-body .ion-page, .transparent-body .nav-decor, .transparent-body ion-content, .transparent-body .viewscan, .transparent-body .fixed-content, .transparent-body .scroll-content { background-color: transparent !important; background: transparent !important; }