ionic3+cordova使用qr扫描仪
1.下载好qrcode的cordova插件:ionic cordova plugin add codova-plugin-qrscanner
2.下载好npm install --save @ionic-native/qr-scanner
3.创建一个扫描仪页面,整个页面都是拿来作扫描的界面,这个界面在调用qrscanner对象的scan方法,此方法会返回文本扫描的Observable,使用订阅subscribe,scanner对象的调用unsubscribe将会取消订阅,
4.然后调用qrscanner对象的show方法就能让webview以透明的状态显示出来
5.我在全局样式表 中写了ion-app透明
主要代表:variables.scss文件
ion-app.cameraView,ion-app.cameraView ion-content,ion-app.cameraView .nav-decor {background: transparent none !important;.tabbar.show-tabbar{opacity: 0;} }
然后在ionViewDidEnter中进行
(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
这一句将会透明化ion-app
而取消透明直接调用
classList.remove("cameraView")即可。
6.QRScannerStatus
在import中导入这个,然后这个东西用来判断是否获得了相机权限,获取了执行
status.authorized方法,拒绝了调用
status.denied方法
7.注意报错的地方,如果你没有在app.module.ts文件中import
import { QRScanner} from '@ionic-native/qr-scanner';
并将QRScanner放在provider中,那么就会报错说没有provider支持。
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代码:
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';@Component({selector: 'page-home',templateUrl: 'home.html' }) export class HomePage {light: boolean;//判断闪光灯 frontCamera: boolean;//判断摄像头 constructor(private qrScanner: QRScanner) {}ionViewDidLoad(){var that=this;that.qrScanner.prepare().then((status: QRScannerStatus) => {if (status.authorized) {let scanSub = that.qrScanner.scan().subscribe((text:string)=>{alert(text);// that.qrScanner.hide(); // scanSub.unsubscribe(); });that.qrScanner.show();} else if (status.denied) {alert("获取权限失败");} else {alert("没有权限");}}).catch((e: any) =>{alert("调用扫描仪错误");//没有获得权限就报错 });}ionViewDidEnter(){//页面可见时才执行 this.showCamera();//开始透明化ion-app }showCamera() {(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');//写在全局样式表中,对ion-app进行透明化 }hideCamera() {this.qrScanner.hide();//需要关闭扫描,否则相机一直开着 (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');//取消ion-app透明化 }ionViewWillLeave() {this.hideCamera();//离开页面也要关闭相机调用 }/** * 闪光灯控制,默认关闭 */ 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;}}
在是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扫描仪相关推荐
- Ionic3 Cordova Android 6.x集成最新极光华为/小米厂商通道推送
Ionic3 Cordova Android 6.x集成最新极光华为/小米厂商推送 前置 一.集成华为厂商推送 1.在开放平台创建并配置应用 2.在安卓项目配置SDK 2.1. 添加配置文件 2.2. ...
- outlook qr码在哪里_QR扫描仪-QR扫描仪App下载-
qr扫描仪app是一款非常优质重点免费的实用工具软件,qr扫描仪app支持扫码二维码.条形码,通过qr扫描仪软件快速获取自己想要的信息. 软件介绍 QR码阅读器:读取二维码,扫描条形码,QR码生成器, ...
- Ionic3 Cordova Android 6.x集成最新极光华为/小米厂商点击通知跳转实现
Ionic3 Cordova Android 6.x集成最新极光华为/小米厂商点击通知跳转实现 一.添加跳转处理页面OpenClickActivity 二.MainActivity获取传递参数 三.J ...
- ionic3 cordova ionic-native插件
ionic-native插件 cordova安装插件 以及 ionic-native插件 使用过程以及步骤 cordova plugin add cordova-plugin-插件名称. //安装插件 ...
- Chrome 将内置 QR 扫码共享页面功能
Google Chrome 浏览器已经允许用户在设备之间共享标签.目前,Chromium 团队则又在尝试提供另一种通过"QR Code"将页面共享到 Android Chrome ...
- 借助Aspose.BarCode,轻松实现QR和众多二维码在线扫描
Aspose.BarCode for .NET 是一个功能强大的API,可以从任意角度生成和识别多种图像类型的一维和二维条形码.开发人员可以轻松添加条形码生成和识别功能,以及在.NET应用程序中将生成 ...
- 数据底座_体验当今计算机的未来:通过智能底座将您的Galaxy S4变成PC
数据底座 Have you ever thought that Smartphones these days are so advanced they could actually replace t ...
- html流光按钮,【CSS】css实现流光效果-按钮流光显示效果-自发光
[CSS]css实现流光效果-按钮流光显示效果-自发光 [CSS]css实现流光效果-按钮流光显示效果-自发光 废话不多说,直接上代码 Streamer * { padding: 0; margin: ...
- 亚马逊云科技 Build On -serverless商店行业应用实践
看文章之前,希望各位读者能先点个赞和关注,创作不易.如果实验过程中有什么问题也可私信,看到了一定回 文章目录 Serverless应用构建 零售创新应用是如何运作的? 二.项目应用结构 前端 后端 1 ...
最新文章
- python2 转 python3 代码
- gSOAP中内存的使用
- python anaconda和pycharm_Pycharm下 Anaconda和Conda的使用
- 多项式的基础操作(逆元/除法/取模/对数ln/开根sqrt/指数exp/快速幂)带模板+luogu全套例题
- java restful接口开发实例_实战:基于Spring Boot快速开发RESTful风格API接口
- 6 年大厂面试官,谈谈我对算法岗面试的一些看法
- Leetcode--5. 最长回文子串(java)
- python代码导出_代码生成 – Python生成Python
- N - 嘤嘤嘤 (并查集+枚举)
- 目前常用的开源服务器端技术
- 计算机组成原理—浮点数
- NSGA-Ⅱ算法C++实现(测试函数为ZDT1)
- Pytorch模型参数的访问、初始化和共享
- CSDN-markdown编辑器语法——背景色
- Ubuntu18.04无法安装软件的问题
- python字符串格式化是什么意思_Python字符串格式化中%s和%d之间有什么区别?...
- 第三方Banner制作轮播图的具体方法
- 导向滤波原理(Guided Filter)
- linux 常用文本处理工具
- 单元测试的基本概念和核心技法