cordova+vue扫二维码和条形码

首先我们需要使用cordova的插件cordova-plugin-qrscanner
安装：cordova plugin add cordova-plugin-qrscanner
贴上vue项目的代码：

<template><div class="scroll-container scan-container"><div class="scan-none-1"></div><div class="scan-box-container"><div class="scan-none-2"></div><div class="scan-box"><div class="scan-box-area"><div class="top-left"></div><div class="top-right"></div><div class="bottom-left"></div><div class="bottom-right"></div><div class="light" @click="onLightTrigger"><i :class="['iconfont',light?'icon-shoudiantong-dakai':'icon-shoudiantong-guanbi']"></i><span>轻触 {{light?'关闭':'打开'}}</span></div></div></div><div class="scan-none-2"></div></div><div class="scan-none-1">放入框内，自动扫描</div></div>
</template>

<script>
export default {name: "Scan",data() {return {light: false,}},beforeCreate() {//将网页背景设置透明document.getElementById("app").style.backgroundColor = "transparent";document.querySelector('body').style.backgroundColor = "transparent";},deactivated() {//恢复之前的背景document.getElementById("app").style.backgroundColor = "#f6f6f6";document.querySelector('body').style.backgroundColor = "#f6f6f6";try {QRScanner.hide(status => {console.log("[Scan.vue] 关闭扫描" + JSON.stringify(status));});QRScanner.destroy(function (status) {console.log("[Scan.vue] 销毁扫码" + JSON.stringify(status));});} catch (e) {console.log("[Scan.vue]" + JSON.stringify(e));}},activated() {document.getElementById("app").style.backgroundColor = "transparent";document.querySelector('body').style.backgroundColor = "transparent";setTimeout(() => {this.onScan()}, 0)},methods: {/*** 扫码*/onScan() {try {console.log('QRScanner:')console.log(QRScanner)//开启扫描QRScanner.show(status => {console.log("[Scan.vue onScan] 显示扫描" + JSON.stringify(status));});//监听扫描结果QRScanner.scan((err, contents) => {console.log("进入监听");if (err) {alert(JSON.stringify(e))} else {alert('扫描结果: ' + contents);}});} catch (e) {console.log("[Scan.vue：onScan] " + JSON.stringify(e))}},/*** 手电筒开关*/onLightTrigger() {try {if (!this.light) {QRScanner.enableLight((err, status) => {err && console.log("[Scan.vue] 打开手电筒状态错误：" + JSON.stringify(err));console.log("[Scan.vue] 打开手电筒状态：" + JSON.stringify(status));});} else {QRScanner.disableLight((err, status) => {err && console.log("[Scan.vue] 关闭手电筒状态错误：" + JSON.stringify(err));console.log("[Scan.vue] 关闭手电筒状态：" + JSON.stringify(status));});}} catch (e) {console.log("[Scan.vue] " + JSON.stringify(e));return}this.light = !this.light},}
}
</script>

<style scoped lang="scss">
//可滚动内容区域
.scroll-container {width: 100%;height: 100vh;overflow: auto;-webkit-overflow-scrolling: touch;&::-webkit-scrollbar {display: none;}
}.scan-container {background: rgba(0, 0, 0, 0);display: flex;flex-direction: column;.scan-none-1 {flex: 1;width: 100%;background: rgba(0, 0, 0, 0.4);text-align: center;padding-top: 0.32rem;color: rgba(255, 255, 255, 0.8);font-size: 18px;&:first-child {flex: 0.6;}}.scan-box-container {display: flex;.scan-none-2 {flex: 1;height: calc(6rem + 2px);background: rgba(0, 0, 0, 0.4);}.scan-box {width: 6rem;height: 6rem;border: 1px solid #3661f7;background: rgba(0, 0, 0, 0);.scan-box-area {width: 6rem;height: 6rem;position: relative;.light {width: 6rem;position: absolute;color: rgba(255, 255, 255, 0.8);flex-direction: column;bottom: 0.32rem;i {font-size: 0.8rem;line-height: 0.8rem;}}.top-left {position: absolute;top: -3px;left: -3px;width: 1rem;height: 1rem;border-top: 6px solid #3661f7;border-left: 6px solid #3661f7;}.top-right {position: absolute;top: -3px;right: -3px;width: 1rem;height: 1rem;border-top: 6px solid #3661f7;border-right: 6px solid #3661f7;}.bottom-left {position: absolute;bottom: -3px;left: -3px;width: 1rem;height: 1rem;border-bottom: 6px solid #3661f7;border-left: 6px solid #3661f7;}.bottom-right {position: absolute;bottom: -3px;right: -3px;width: 1rem;height: 1rem;border-bottom: 6px solid #3661f7;border-right: 6px solid #3661f7;}}}}
}
/deep/ .vux-header-back {color: white !important;
}
</style>

上面代码的效果如下：

可以真机调试扫描二维码，此插件默认是只能扫描二维码的，也就是QR码，如果需要扫描条形码，也就是一维码，需要在源码里添加格式支持：
Android：plugins/cordova-plugin-qrscanner/src/android/QRScanner.java找到458行添加以下内容：

formatList.add(BarcodeFormat.UPC_A);formatList.add(BarcodeFormat.UPC_E);formatList.add(BarcodeFormat.EAN_13);formatList.add(BarcodeFormat.EAN_8);formatList.add(BarcodeFormat.CODE_39);formatList.add(BarcodeFormat.CODE_93);formatList.add(BarcodeFormat.CODE_128);formatList.add(BarcodeFormat.ITF);formatList.add(BarcodeFormat.DATA_MATRIX);

记住，改完上面配置后，一定一定要删掉对应的平台（我的是android）！在cordova根目录执行：

cordova platform rm android

然后再重新添加对应的平台：

cordova platform add android

这样，再重新打包就可以扫条形码了。
下面是cordova-plugin-qrscanner插件的API整理

监听扫描结果、取消监听

var callback = function(err, contents){if(err){console.error(err._message);}alert('The QR Code contains: ' + contents);
};
QRScanner.scan(callback);QRScanner.cancelScan(function(status){console.log(status);
});

开启和隐藏扫描

QRScanner.show(function(status){console.log(status);
});
QRScanner.hide(function(status){console.log(status);
});

开启、关闭手电筒

QRScanner.enableLight(function(err, status){err && console.error(err);console.log(status);
});
QRScanner.disableLight(function(err, status){err && console.error(err);console.log(status);
});

切换前后摄像头

QRScanner.useFrontCamera(function(err, status){err && console.error(err);console.log(status);
});
QRScanner.useBackCamera(function(err, status){err && console.error(err);console.log(status);
});

销毁扫码器实例

QRScanner.destroy(function(status){console.log(status);
});

QRScanner实例的状态描述如下：

{"authorized": Boolean"denied": Boolean"restricted": Boolean"prepared": Boolean"scanning": Boolean"previewing": Boolean"showing": Boolean"lightEnabled": Boolean"canOpenSettings": Boolean"canEnableLight": Boolean"currentCamera": Number
}
authorized:该authorized属性是一个布尔值，仅当用户允许相机访问您的应用程序时才为 true。
denied:一个布尔值，如果用户永久拒绝相机访问应用程序,则该值为 true,一旦被拒绝，只能通过请求用户更改他们的决定来获得相机访问权限。
prepared:一个布尔值，如果 QRScanner 准备捕获视频并将其呈现给视图，则该值为 true。
showing:一个布尔值，当预览层可见时为真（并且在所有平台上，但browser原生 webview 背景是透明的）。
scanning:一个布尔值，如果 QRScanner 正在主动扫描二维码，则该值为 true。
previewing:一个布尔值，如果 QRScanner 显示来自设备相机的实时预览，则该值为 true。暂停预览时设置为 false。
lightEnabled:一个布尔值，如果灯被启用则为真。
currentCamera:一个数字，表示当前相机的索引。0是后置摄像头，1是前置。

参考文档：
https://blog.csdn.net/zhuxiandan/article/details/103298692
https://blog.csdn.net/qq_27449993/article/details/89881152
https://gitee.com/zf1886/cordova-plugin-qrscanner#get-qrscanner-status
https://blog.csdn.net/qq_23179075/article/details/99627909

cordova+vue扫二维码和条形码相关推荐

vue扫二维码一维码,浏览器H5实现js扫码,含uniapp实现方式
扫码需求准备工作希望在h5端直接使用扫码调用js库使用框架 vue 或者 uniapp yarn add @zxing/library 这里我使用的版本是 ^0.19.1 可以直接带上版本号下 ...
关于Zbar和ZXing这两个无比强大的二维码和条形码识别工具
之前做了一些关于一维码二维码识别与生成的工作.在这里总结一下子. 显然做这个我们不会花大量力气去自己来写这个识别过程, 这之间可能会包括人工识别方面的工作, 所以为了偷懒,便想到了去网上找这样的开源工 ...
Vue 移动端实现调用相机扫描二维码或条形码
一.开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能(详见概述 | 微信开放文档),或者支付宝 H5 开放的API(详见?支付宝H5开放文档). 但是 ...
原生Vue实现二维码扫一扫，兼容PC、安卓、IOS
原生Vue实现二维码扫一扫通过使用 vue-qrcode-reader 进行实现,必须是 Https 或 Localhost 文章目录原生Vue实现二维码扫一扫 vue-qrcode-reader ...
h5 实现扫码二维码及条形码（js多种实现方式）
方式一. 只识别二维码实现方式一 jsQR 个人预览页面网址只扫码二维码 GitHub jsQR inde.html <!DOCTYPE html> <html><he ...
uni-app二维码、条形码扫码自定义
uni-app二维码.条形码扫码自定义 - DCloud问答 https://github.com/xiaowang1314/uniapp-plugin-collections/blob/master ...
Android ZXing二维码、条形码的生成，扫一扫demo
目录导语一.ZXing简介二.ZXing方法类源码 BarcodeFormat:条形码格式类 EncodeHintType:编码显示风格三.ZXing使用实战小案例生成二维码生成条形码四 ...
Vue 实现调用相机扫描二维码或条形码
扫条形码: 扫二维码: zxing 下载: npm install @zxing/library --save 扫码组件内容: <template><div><video ...
扫描二维码或条形码获取结果
文章目录 vue-qrcode-reader html5-qrcode 介绍使用页面调用 vue-qrcode-reader vue-qrcode-reader主要依赖Stream API,不支持 ...

cordova+vue扫二维码和条形码

cordova+vue扫二维码和条形码相关推荐

最新文章

热门文章