安装插件
ionic cordova plugin add cordova-plugin-qrscanner
npm install @ionic-native/qr-scanner
简单的布局
<div class="content">
<div class="item1">
<h1>正在扫描....</h1>
</div>
<div class="item2">
</div>
</div>
CSS 样式
.content{
width: 100%;
height: 100%;
background: none;
text-align: center;
}
.item1{
width: 100%;
height: 20%;
text-align: center;
}
.item2{
width: 100%;
height: 50%;
text-align: center;
background: url(../../assets/scanner.svg) no-repeat center center;
background-size: 500px 500px;
}
使用
//引入插件
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
//使用方法
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
let scanSub = this.qrScanner.scan().subscribe((text: string) => {
alert(text);
this.qrScanner.hide(); // hide camera preview
scanSub.unsubscribe(); // stop scanning
});
} else if (status.denied) {
} else {
}
})
.catch((e: any) => alert(e));
}
注意：
不能使用<ion-content> 标签，否则无法设置背景透明度
