开年事情有些多,最近刚好在用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()方法。

Logo

前往低代码交流专区

更多推荐