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

最新推荐文章于 2024-09-08 09:20:56 发布

yw00yw

最新推荐文章于 2024-09-08 09:20:56 发布

阅读量3.3k

点赞数

分类专栏： ionic 文章标签： ionic4 ionic4扫描二维码插件 QRScanner

本文链接：https://blog.csdn.net/yw00yw/article/details/95600385

版权

ionic 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

官网地址

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)));
}