Vue3+TypeScript实现手机扫码功能

技术文章大纲：Vue3+TypeScript实现手机摄像头二维码扫描

概述

介绍二维码扫描在现代Web应用中的常见场景（如支付、登录、信息获取）。
Vue3与TypeScript结合的优势：类型安全、组合式API、更好的代码维护性。
实现原理：通过浏览器API调用摄像头，使用第三方库解析二维码内容。

技术选型与依赖

核心库：
- vue-qrcode-reader（基于浏览器的MediaDevices API封装）。
- zxing-js/library（轻量级二维码解析库）。
浏览器兼容性：需支持getUserMedia API（Chrome、Firefox、Safari新版）。

环境配置

创建Vue3+TypeScript项目：

bash 复制代码

npm init vue@latest vue3-qr-scanner -- --template typescript

安装依赖：

bash 复制代码

npm install vue-qrcode-reader zxing-js/library

项目结构

复制代码

src/
├── components/
│   ├── QrScanner.vue  # 摄像头组件封装
├── utils/
│   ├── qrDecoder.ts   # 二维码解析逻辑
├── App.vue            # 主页面集成

核心实现步骤

1. 封装摄像头组件 (QrScanner.vue)

模板部分：

vue 复制代码

<template>
  <qrcode-stream @detect="onDetect" />
</template>

逻辑部分：

typescript 复制代码

import { QrcodeStream } from 'vue-qrcode-reader';
import { decodeQr } from '../utils/qrDecoder';

defineProps<{ onResult: (data: string) => void }>();

const onDetect = async (detectedCodes: string[]) => {
  const result = await decodeQr(detectedCodes[0]);
  emit('result', result);
};

2. 二维码解析工具 (qrDecoder.ts)

typescript 复制代码

import { BrowserQRCodeReader } from 'zxing-js/library';

export const decodeQr = async (imageData: string): Promise<string> => {
  const codeReader = new BrowserQRCodeReader();
  return await codeReader.decodeFromImage(undefined, imageData);
};

3. 主页面集成 (App.vue)

显示扫描结果并处理权限异常：

vue 复制代码

<template>
  <QrScanner @result="handleScan" v-if="hasPermission" />
  <p v-else>需允许摄像头访问权限</p>
  <div>扫描结果：{{ result }}</div>
</template>

<script setup lang="ts">
const result = ref('');
const hasPermission = ref(false);

const handleScan = (data: string) => {
  result.value = data;
};

onMounted(() => {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(() => hasPermission.value = true)
    .catch(() => console.error('权限被拒绝'));
});
</script>

注意事项

HTTPS环境：浏览器仅在安全上下文（HTTPS或localhost）中允许摄像头访问。
移动端适配：通过CSS调整视频流组件尺寸，避免拉伸或变形。
错误处理：捕获getUserMedia权限拒绝或解码失败的情况。

扩展方向

扫描区域高亮：通过Canvas绘制动态识别框。
多二维码识别：调整vue-qrcode-reader的paused属性实现批量扫描。
性能优化：限制解码频率，避免高频调用摄像头。

此大纲覆盖从技术选型到实现的完整流程，适合中高级前端开发者快速实践。