快捷導(dǎo)航

vue2移動端使用vue-qrcode-reader實現(xiàn)掃一掃功能的步驟

更新時間：2023年06月19日 15:38:08 作者：Lizy！

最近在使用vue開發(fā)的h5移動端想要實現(xiàn)一個調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于vue2移動端使用vue-qrcode-reader實現(xiàn)掃一掃功能的相關(guān)資料,需要的朋友可以參考下

移動端實現(xiàn)掃一掃掃碼功能

第一種：如果是用uniapp開發(fā) 可以直接使用uni的語法并且兼容多端

第二種：如果是開發(fā)瀏覽器的網(wǎng)頁，基于微信的話，也可以用微信的weixin-js-sdk

具體流程參考官網(wǎng)：概述 | 微信開放文檔

第三種：用第三方vue-qrcode-reader實現(xiàn)掃一掃功能，

詳細(xì)流程參考官網(wǎng)：Simple | Vue Qrcode Reader

以下內(nèi)容為用vue-qrcode-reader實現(xiàn)掃一掃功能步驟

1.下載vue-qrcode-reader依賴

// npm 下載

npm install --save vue-qecode-reader

// cnpm 下載

cnpm install --save vue-qrcode-reader

2.此次流程是在A頁面添加掃一掃button，然后點擊跳轉(zhuǎn)到B頁面，然后掃一掃寫在B頁面，進入B頁面初始化，然后同意使用相機，在掃描到二維碼后攜帶掃到的內(nèi)容跳轉(zhuǎn)到A頁面

代碼如下

<template>
    <div class="saoma">
        <qrcode-stream  @decode="onDecode" @init="onInit" style="height: 100vh;width:100vw">
            <div>
                <div class="qr-scanner">
                <div class="box">
                    <div class="line"></div>
                    <div class="angle"></div>
                </div>
                </div>
            </div>
        </qrcode-stream>
    </div>
</template>
<script>
    import {
        QrcodeStream
    } from 'vue-qrcode-reader';
    export default {
        components: {
            QrcodeStream
        },
        data() {
            return {
                result: '', // 掃碼結(jié)果信息
                error: '' // 錯誤信息
            }
        },
        methods: {
            onDecode(result) {
                if(result){
                    this.$router.push({
                        path:'/',
                        query: {
                            code:result,
                        }
                    })
                }
            },
            async onInit(promise) {
                try {
                    await promise
                } catch (error) {
                    if (error.name === 'NotAllowedError') {
                        window.alert('您需要授予相機訪問權(quán)限')
                        this.$router.push({path:'/'})
                    } else if (error.name === 'NotFoundError') {
                        this.$router.push({path:'/'})
                        window.alert('這個設(shè)備上沒有攝像頭')
                    } else if (error.name === 'NotSupportedError') {
                        this.$router.push({path:'/'})
                        window.alert('所需的安全上下文(HTTPS、本地主機)')
                    } else if (error.name === 'NotReadableError') {
                        this.$router.push({path:'/'})
                        window.alert('相機被占用')
                    } else if (error.name === 'OverconstrainedError') {
                        this.$router.push({path:'/'})
                        window.alert('安裝攝像頭不合適')
                    } else if (error.name === 'StreamApiNotSupportedError') {
                        this.$router.push({path:'/'})
                        window.alert('此瀏覽器不支持流API')
                    }
                }
            },
        }
    }
</script>
<style scoped>
    .saoma {
        width: 100vw;
        height: 100vh;
    }
    .qr-scanner {
    background-image:
        linear-gradient(0deg,
            transparent 24%,
            rgba(32, 255, 77, 0.1) 25%,
            rgba(32, 255, 77, 0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(32, 255, 77, 0.1) 75%,
            rgba(32, 255, 77, 0.1) 76%,
            transparent 77%,
            transparent),
        linear-gradient(90deg,
            transparent 24%,
            rgba(32, 255, 77, 0.1) 25%,
            rgba(32, 255, 77, 0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(32, 255, 77, 0.1) 75%,
            rgba(32, 255, 77, 0.1) 76%,
            transparent 77%,
            transparent);
        background-size: 3rem 3rem;
        background-position: -1rem -1rem;
        width: 100%;
        /* height: 100%; */
        height: 100vh;
        position: relative;
        background-color: #1110;
      /* background-color: #111; */
    }
    .qr-scanner .box {
        width: 213px;
        height: 213px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        border: 0.1rem solid rgba(0, 255, 51, 0.2);
        /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
    }
    .qr-scanner .line {
        height: calc(100% - 2px);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
        border-bottom: 3px solid #00ff33;
        transform: translateY(-100%);
        animation: radar-beam 2s infinite alternate;
        animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
        animation-delay: 1.4s;
    }
    .qr-scanner .box:after,
    .qr-scanner .box:before,
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
        content: '';
        display: block;
        position: absolute;
        width: 3vw;
        height: 3vw;
        border: 0.2rem solid transparent;
    }
    .qr-scanner .box:after,
    .qr-scanner .box:before {
        top: 0;
        border-top-color: #00ff33;
    }
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
        bottom: 0;
        border-bottom-color: #00ff33;
    }
    .qr-scanner .box:before,
    .qr-scanner .angle:before {
        left: 0;
        border-left-color: #00ff33;
    }
    .qr-scanner .box:after,
    .qr-scanner .angle:after {
        right: 0;
        border-right-color: #00ff33;
    }
    @keyframes radar-beam {
        0% {
            transform: translateY(-100%);
        }
        100% {
            transform: translateY(0);
        }
    }
</style>

以上內(nèi)容即為使用vue-qrcode-reader實現(xiàn)掃一掃功能的流程

可以直接復(fù)制粘貼使用哦

總結(jié)

到此這篇關(guān)于vue2移動端使用vue-qrcode-reader實現(xiàn)掃一掃功能的文章就介紹到這了,更多相關(guān)vue2實現(xiàn)掃一掃功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: