使用vue+barcode 实现app端的扫码功能

开年事情有些多，最近刚好在用vue写app和公众号的移动端，两者都有扫码的功能，在这记录一下子。

Barcode模块管理条码（一维码和二维码）扫描识别，支持常见的一维码（如EAN13码）及二维码（如QR码）。通过调用设备的摄像头对条码进行扫描识别，扫描到条码后进行解码并返回码数据内容及码类型。
Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。

app端使用的是h5+的api barcode，其中详细的文档说明可以直接看官方文档，这里就仅列几个用到的点，其他的就不一一描述了。

Barcode 条码扫描识别控件对象

Barcode对象表示条码识别控件对象，在窗口中显示条码识别控件，使用此对象可自定义条码识别界面。

interface plus.barcode.Barcode {
	// Methods
	function void start( options );
	function void cancel();
	function void close();
	function void setFlash( open );

	// Events
	function void onmarked();
	function void onerror();
}

• 方法：
  • start: 开始条码识别
  • cancel: 结束条码识别
  • close: 关闭条码识别控件
  • setFlash: 是否开启闪光灯
• 事件：
  • onmarked: 条码识别成功事件
  • onerror: 条码识别错误事件

流程：

• 1.初始化控件

		startRecognize() {
                let that = this;
                if (!window.plus) return;
                that.scan = new plus.barcode.Barcode('codeId');
                that.scan.onmarked = onmarked;
                function onmarked(type, result, file) {
                    console.log("remarked");
                    switch (type) {
                        case plus.barcode.QR:
                            type = 'QR';
                            break;
                        case plus.barcode.EAN13:
                            type = 'EAN13';
                            break;
                        case plus.barcode.EAN8:
                            type = 'EAN8';
                            break;
                        default:
                            type = '其它' + type;
                            break;
                    }
                    result = result.replace(/\n/g, '');
                    that.codeUrl = result;
                    console.log(result);
                    that.closeScan();

                }
       
            },

• 2.开始扫描函数

	startScan() {
                const _ts=this;
                if (!window.plus) return;
                _ts.scan.start();
            },

• 3.关闭条码识别控件

	closeScan() {
                const _ts=this;
                if (!window.plus) return;
                _ts.scan.close();
            },

完整代码：

<template>
    <div class="scan">
        <div id="codeId">
            <div style="height:40%"></div>
            <p class="tip" style="text-align: center">...载入中...</p>
        </div>
<!--        <footer>-->
<!--            <button @click="startRecognize">1.创建控件</button>-->
<!--            <button @click="startScan">2.开始扫描</button>-->
<!--            <button @click="cancelScan">3.结束扫描</button>-->

<!--            <button @click="closeScan">4.关闭控件</button>-->
<!--        </footer>-->
    </div>
</template>

<script>
    export default {
        name: "scan",
        data() {
            return {
                codeUrl: '',
            }
        },
        created(){

        },
        mounted(){
            this.startRecognize();
        },
        methods: {
            //创建扫描控件
            startRecognize() {
                let that = this;
                if (!window.plus) return;
                that.scan = new plus.barcode.Barcode('codeId');
                that.scan.onmarked = onmarked;
                function onmarked(type, result, file) {
                    console.log("remarked");
                    switch (type) {
                        case plus.barcode.QR:
                            type = 'QR';
                            break;
                        case plus.barcode.EAN13:
                            type = 'EAN13';
                            break;
                        case plus.barcode.EAN8:
                            type = 'EAN8';
                            break;
                        default:
                            type = '其它' + type;
                            break;
                    }
                    result = result.replace(/\n/g, '');
                    that.codeUrl = result;
                    console.log(result);
                    that.closeScan();

                }
                that.startScan();
            },
            //开始扫描
            startScan() {
                const _ts=this;
                if (!window.plus) return;
                _ts.scan.start();
            },
            //关闭扫描
            cancelScan() {
                const _ts=this;
                if (!window.plus) return;
                _ts.scan.cancel();
            },
            //关闭条码识别控件
            closeScan() {
                const _ts=this;
                if (!window.plus) return;
                _ts.scan.close();
            },
        }
    }
</script>

<style xml:lang="less">
    .scan {
        height: 100%;
    }
    #codeId {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom:3rem;
        text-align: center;
        color: #fff;
        background: #ccc;
    }
    footer {
        position: absolute;
        left: 0;
        bottom: 1rem;
        height: 2rem;
        line-height: 2rem;
        z-index: 2;
    }
</style>

测试时，我是用的HBuilderX打包成一个app，然后在手机上做的测试，直接在pc浏览器上测试不了哦。

这里的需求是点击之前的一个按钮直接开始扫描的功能，因此这个页面就是扫码的页面。需要一步步测试的可以用注释掉的点击按钮，并注释掉初始化扫码控件中的startScan()方法。