Vue3实现扫描二维码

要实现简单的二维码扫描，有很多现成的库可以利用。

html5-qrcode 、 vue3-qrcode-reader 、zxing-js

这里采取第一个 html5-qrcode

本教程环境为 Vue3 + JS

快速实现

1.安装

npm install html5-qrcode

2.创建容器

<div id="qr-reader"></div>

3.导入模块与变量声明

import { ref, onMounted, onBeforeUnmount } from "vue"
import { Html5Qrcode, Html5QrcodeCameraScanConfig } from "html5-qrcode"

let html5QrCode: Html5Qrcode | null = null

4.实现反馈函数(扫码成功与失败)

const qrCodeSuccessCallback = (decodedTextValue: string, decodedResult: any) => {
    console.log("扫描结果:", decodedTextValue)
    console.log("解码结果:", decodedResult)
    // 这里可以添加后面的停止扫码逻辑
}

const qrCodeErrorCallback = (error: any) => {
    console.warn(`扫描错误: ${error}`)
}

5.实现开始扫码与结束扫码逻辑

const startScanning = async () => {
    html5QrCode = new Html5Qrcode("qr-reader")
    if (!html5QrCode) return
    // fps: 帧率，每秒扫描的帧数
    // qrbox: 扫描框的尺寸
    const config: Html5QrcodeCameraScanConfig = { fps: 10, qrbox: { width: 250, height: 250 } }
    try {
        // 获取相机
        const devices = await Html5Qrcode.getCameras()
        if (devices && devices.length) {
            // 获取第一个相机ID
            const cameraId = devices[0].id
            // 开始扫码 直到手动执行stop
            await html5QrCode.start(cameraId, config, qrCodeSuccessCallback, qrCodeErrorCallback)
        } else {
            errorMessage.value = "未找到摄像头设备"
        }
    } catch (err: any) {
        errorMessage.value = `无法启动摄像头: ${err}`
    }
}

const stopScanning = () => {
    if (!html5QrCode) return
    html5QrCode
        .stop()
        .then(() => {
            html5QrCode?.clear()
        })
        .catch((err: any) => {
            console.error("停止扫描失败:", err)
        })
}

6.结合生命周期

onMounted(() => {
    startScanning()
})
onBeforeUnmount(() => {
    stopScanning()
})

完整案例