一、簡介
采用html5-qrcode方案，需要https協(xié)議，優(yōu)點集成簡單、底層依賴Zxing-js
功能強大噩死、兼容pc/mac、android神年、iOS甜滨，缺點目前還不能定制掃碼界面(應(yīng)該是自己能力不夠)，停止掃碼瘤袖，自帶的掃碼界面就不會顯示
二衣摩、集成
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;
// 設(shè)置寬度為最小邊的百分之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: 您需要授予相機訪問權(quán)限';
} else if (err.indexOf('NotFoundError') != -1) {
errMsg = 'ERROR: 這個設(shè)備上沒有攝像頭';
} 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應(yīng)用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) {
// 成功回調(diào)奖慌，具體業(yè)務(wù)自己實現(xiàn)
this.$store.commit('setScanResult', text);
this.$router.go(-1);
}
}
}
</script>
<style lang="less" scoped>
</style>
