ionic4使用QR Scanner插件实现二维码、条形码扫描功能

悠悠 2021-12-12 14:37 731阅读 0赞

#### 官网地址 ####

[https://ionicframework.com/docs/native/qr-scanner][https_ionicframework.com_docs_native_qr-scanner]

#### 安装插件 ####

ionic cordova plugin add cordova-plugin-qrscanner
    npm install @ionic-native/qr-scanner

#### 在app.module.ts中导入 ####

import { QRScanner } from '@ionic-native/qr-scanner/ngx';
    providers: [
        QRScanner 
    ],

#### 使用 ####

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
    
    constructor(private qrScanner: QRScanner) { }
    
    // 使用QR Scanner插件实现二维码、条形码扫描
    doQRScanner() {
       this.qrScanner.prepare().then((status: QRScannerStatus) => {
    
           if (status.authorized) {
               // 已授予照相机权限
    
               // 开始扫码
               const scanSub = this.qrScanner.scan().subscribe((text: string) => {
    
                   alert(JSON.stringify(text));
    
                   this.qrScanner.hide(); // 隐藏相机预览
                   scanSub.unsubscribe(); // 停止扫描
               });
    
           } else if (status.denied) {
               // 相机权限被永久拒绝
               // 必须使用qrscanner.opensettings（）方法引导用户进入设置页。
               // 然后他们可以从那里得到许可
               alert('权限被拒绝');
           } else {
               // 权限被拒绝，但不是永久性的。您可以稍后再次请求许可。
               alert('重新请求');
           }
       })
       .catch((e: any) => alert(JSON.stringify(e)));
    }

#### 效果图 ####

测试失败

[https_ionicframework.com_docs_native_qr-scanner]: https://ionicframework.com/docs/native/qr-scanner