使用H5 API barcode实现扫码。

1
2
3
4
5
6
7
8
9
10
11
<template>
    <div>
        <div @click="handleCloseScan">X</div>
        <div class="scan">
            <div id="bcid"></div>
            <div>
                <button @click="handleStartScan">扫 码</button>
            </div>
        </div>
    </div>
</template>
点击展示js代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
    <script>
        // 扫描对象
        var scan = null;
        methods:{
            // 开始扫描
            handleStartScan(){
                const that = this;
                if(!window.plus) return;
                scan = new plus.barcode.Barcode('bcid');
                // 开始扫描
                scan.start();
                // 扫码成功之后的回调函数 type是类型 result 结果
                scan.onmarked = function(type,result){
                    const text = '';
                    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,"");
                    const id = result.match(/\d+/)[0];
                    that.$router.push({
                        name:'ComponentName',
                        params: {
                            id:id
                        }
                    });
                    scan.close();
                }
            },
            // 关闭扫描控件
            handleCloseScan(){
                 if(!window.plus) return;
                 scan.close();
                 this.$router.push('/');
            }
        }
}
    </script>