h5-二维码扫码（一）

一、简介

采用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>