一、简介
采用html5-qrcode方案，需要https协议，优点集成简单、底层依赖Zxing-js
功能强大、兼容pc/mac、android、iOS，缺点目前还不能定制扫码界面(应该是自己能力不够)，停止扫码，自带的扫码界面就不会显示
二、集成
1、通过npm引入
npm install html5-qrcode
2、html直接引入
<script src="https://unpkg.com/html5-qrcode" type="text/javascript">
3、使用
// To use Html5QrcodeScanner (more info below)
import {Html5QrcodeScanner} from "html5-qrcode"
// To use Html5Qrcode (more info below)
import {Html5Qrcode} from "html5-qrcode"
三、例子
1、在components文件夹下面新建qrcode文件夹，并新建qrcode.vue，代码如下
<template>
<div id="qrcode-reader" style="width: 100%;"></div>
</template>
<script>
import { Html5Qrcode, Html5QrcodeScannerState } from "html5-qrcode"
export default {
components:{
},
data(){
return{
html5Qrcode: null
}
},
created() {
},
mounted() {
this.initScan();
this.startScan();
},
beforeDestroy() {
let state = this.html5QrCode.getState();
if (state == Html5QrcodeScannerState.SCANNING) {
this.stopScan();
}
},
methods : {
// 初始化扫码控件
initScan() {
this.html5QrCode = new Html5Qrcode("qrcode-reader");
},
// 开始扫码
startScan() {
let that = this;
// 设置宽度为最小边的百分之64%
let qrboxFunction = function(viewfinderWidth, viewfinderHeight) {
let minEdgePercentage = 0.64; // 64%
let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage);
return {
width: qrboxSize,
height: qrboxSize
};
}
const config = { fps: 10, qrbox: qrboxFunction };
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
that.stopScan(decodedText);
};
const qrCodeErrorCallback = (errorMessage, error) => {
};
this.html5QrCode.start(
{
facingMode: { exact: "environment"}
},
config,
qrCodeSuccessCallback,
qrCodeErrorCallback
)
.catch((err) => {
var errMsg = '';
if (err.indexOf('NotAllowedError') != -1) {
errMsg = 'ERROR: 您需要授予相机访问权限';
} else if (err.indexOf('NotFoundError') != -1) {
errMsg = 'ERROR: 这个设备上没有摄像头';
} else if (err.indexOf('NotSupportedError') != -1) {
errMsg = 'ERROR: 所需的安全上下文(HTTPS、本地主机)';
} else if (err.indexOf('NotReadableError') != -1 ) {
errMsg = 'ERROR: 相机被占用';
} else if (err.indexOf('OverconstrainedError') != -1) {
errMsg = 'ERROR: 安装摄像头不合适';
} else if (err.indexOf('StreamApiNotSupportedError') != -1) {
errMsg = 'ERROR: 此浏览器不支持流API';
} else {
errMsg = err;
}
that.$toast(errMsg);
});
},
stopScan(text) {
let that = this;
this.html5QrCode.stop().then((ignore) => {
// QR Code scanning is stopped.
}).catch((err) => {
// Stop failed, handle it.
}).finally(() => {
if (!!text) {
that.$emit('success', text);
}
});
}
}
}
</script>
<style lang="less" scoped>
</style>
2、在使用的模块新建scan-code.vue应用qrcode组件，代码如下
<template>
<div class="g-content">
<qrcode @success="scanResult"></qrcode >
</div>
</template>
<script>
import qrcode from '@/components/qrcode/qrcode.vue';
export default {
name: 'scan',
components:{
qrcode
},
data(){
return{
}
},
created() {
},
methods : {
scanResult(text) {
// 成功回调，具体业务自己实现
this.$store.commit('setScanResult', text);
this.$router.go(-1);
}
}
}
</script>
<style lang="less" scoped>
</style>
