1.下载好qrcode的cordova插件：ionic cordova plugin add codova-plugin-qrscanner
2.下载好npm install --save @ionic-native/qr-scanner
3.创建一个扫描仪页面，整个页面都是拿来作扫描的界面，这个界面在调用qrscanner对象的scan方法，此方法会返回文本扫描的Observable，使用订阅
ion-app.cameraView,ion-app.cameraView ion-content,ion-app.cameraView .nav-decor { background: transparent none !important; .tabbar.show-tabbar{ opacity: 0; } }
(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
而取消透明直接调用
6.QRScannerStatus
在import中导入这个，然后这个东西用来判断是否获得了相机权限，获取了执行
status.authorized方法，拒绝了调用
import { QRScanner} from '@ionic-native/qr-scanner';
8.下面是html，ts，css，以及theme文件夹中的variables.scss文件样式
首先是html代码：
<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>
然后是ts代码：
在是css样式代码：
page-home { .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; } } }
这里有一张背景图片，我会在我的博客里上传，让你们可以下载，这个图片就是扫描仪那个框框
最后是全局样式代码variables.scss：
// Ionic Variables and Theming. For more info, please see: // http://ionicframework.com/docs/theming/ // Font path is used to include ionicons, // roboto, and noto sans fonts $font-path: "../assets/fonts"; // The app direction is used to include // rtl styles in your app. For more info, please see: // http://ionicframework.com/docs/theming/rtl-support/ $app-direction: ltr; @import "ionic.globals"; // Shared Variables // -------------------------------------------------- // To customize the look and feel of this app, you can override // the Sass variables found in Ionic's source scss files. // To view all the possible Ionic variables, see: // http://ionicframework.com/docs/theming/overriding-ionic-variables/ // Named Color Variables // -------------------------------------------------- // Named colors makes it easy to reuse colors on various components. // It's highly recommended to change the default colors // to match your app's branding. Ionic uses a Sass map of // colors so you can add, rename and remove colors as needed. // The "primary" color is the only required color in the map. $colors: ( primary: #488aff, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222 ); // App iOS Variables // -------------------------------------------------- // iOS only Sass variables can go here // App Material Design Variables // -------------------------------------------------- // Material Design only Sass variables can go here // App Windows Variables // -------------------------------------------------- // Windows only Sass variables can go here // App Theme // -------------------------------------------------- // Ionic apps can have different themes applied, which can // then be future customized. This import comes last // so that the above variables are used and Ionic's // default are overridden. @import "ionic.theme.default"; // Ionicons // -------------------------------------------------- // The premium icon font for Ionic. For more info, please see: // http://ionicframework.com/docs/ionicons/ @import "ionic.ionicons"; // Fonts // -------------------------------------------------- @import "roboto"; @import "noto-sans"; ion-app.cameraView,ion-app.cameraView ion-content,ion-app.cameraView .nav-decor { background: transparent none !important; .tabbar.show-tabbar{ opacity: 0; } }
这样就能直接在手机上运行了，图片资源链接：
https://download.csdn.net/download/a617332635/10450634
文章来源: ionic3+cordova使用qr扫描仪