如何实现扫码功能?

Posted judeyq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现扫码功能?相关的知识,希望对你有一定的参考价值。

之前讲过前端生成二维码,那H5 APP如何实现扫码功能;

扫码功能的实现

(一)、使用H5 API barcode实现扫码功能
# 模板
    <template>
        <div>
            <div class="scan">
                <div id="bcid"></div>
                <footer>
                    <button v-if="Start" @click="startRecognize">扫 码 加 油</button>
                </footer>
            </div>
        </div>
    </template>

    <script>
        // 扫描对象
        var scan = null;
        data(){
            return {
                Begin:true
            }
        },
        methods:{
            startRecognize(){
                const that = this;
                this.Begin = false;
                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(/
/g,"");
                    const id = result.match(/d+/)[0];
                    const Token = localStorage.getItem('token');
                    that.$router.push({
                        name:'OrderDetail',
                        params: {
                            id:id,
                            token:token
                        }
                    });
                    scan.close();
                }
            },
            // 关闭扫码识别控件 
            closeScan(){
                if(!window.plus) return;
                scan.close();
                this.$router.push('./qrcode');
            }
        }
    </script>

    <style lang="less" scoped>
    .scan {
        height: 96vh;
        background-color: #EFEFEF;

        #bcid {
            width: 100vw;
            height: 96vh;
            text-align: center;
            color: #fff;
        }

        footer {
            width: 100%;
            height: 8rem;
            line-height: 2rem;
            font-size: 14px;
            position: absolute;
            left: 0;
            bottom: 10rem;
            z-index: 999;

            button {
                width: 8rem;
                height: 8rem;
                border: 4px solid #1f4ba5;
                border-radius: 50%;
                font-size: 16px;
                font-family: PingFangSC-Medium;
                background-color: #fff;
            }   
    }
}

    </style>

以上是关于如何实现扫码功能?的主要内容,如果未能解决你的问题,请参考以下文章

面试官:如何实现扫码登录功能?

pbootcms对接微信扫码登录代码核心片段和步骤(前后端)

Android | 带你零代码实现安卓扫码功能

面试官:如何实现扫码登录功能?

面试官:如何实现扫码登录功能?

前端实现很哇塞的浏览器端扫码功能🌟