vue实现扫码插件
Vue 实现扫码插件的方法
使用现有库 vue-qrcode-reader
vue-qrcode-reader 是一个专为 Vue 设计的扫码库，基于浏览器的 WebRTC API 实现摄像头调用和二维码识别。
安装依赖：
npm install vue-qrcode-reader基础示例代码：
<template>
<div>
<qrcode-stream @decode="onDecode" @init="onInit" />
<p>扫描结果：{{ result }}</p>
<p v-if="error">{{ error }}</p>
</div>
</template>
<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {
components: { QrcodeStream },
data() {
return {
result: '',
error: ''
}
},
methods: {
onDecode(result) {
this.result = result
},
async onInit(promise) {
try {
await promise
} catch (error) {
this.error = error.message
}
}
}
}
</script>原生 API 实现（兼容移动端）
通过 getUserMedia API 直接调用摄像头，结合 jsqr 库解析图像：
<template>
<div>
<video ref="video" autoplay playsinline></video>
<button @click="startScan">开始扫描</button>
<p>结果：{{ decodedData }}</p>
</div>
</template>
<script>
import jsQR from 'jsqr'
export default {
data() {
return {
decodedData: '',
stream: null
}
},
methods: {
async startScan() {
const video = this.$refs.video
try {
this.stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment' }
})
video.srcObject = this.stream
this.scanFrame(video)
} catch (err) {
console.error(err)
}
},
scanFrame(video) {
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
context.drawImage(video, 0, 0, canvas.width, canvas.height)
const imageData = context.getImageData(0, 0, canvas.width, canvas.height)
const code = jsQR(imageData.data, imageData.width, imageData.height)
if (code) {
this.decodedData = code.data
}
requestAnimationFrame(() => this.scanFrame(video))
}
},
beforeDestroy() {
if (this.stream) {
this.stream.getTracks().forEach(track => track.stop())
}
}
}
</script>微信环境适配方案
在微信浏览器中需使用 wx-js-sdk 的扫码接口：
// 在Vue项目中引入SDK
import wx from 'weixin-js-sdk'
export default {
methods: {
wechatScan() {
wx.scanQRCode({
needResult: 1,
scanType: ["qrCode"],
success: (res) => {
const result = res.resultStr
console.log('扫描结果:', result)
}
})
}
}
}注意事项
- 权限处理：浏览器需要摄像头权限，建议在
onInit方法中处理权限拒绝的情况 - 性能优化：连续扫码时注意清除之前的扫描任务
- 样式适配：移动端需添加
playsinline属性防止全屏播放 - 兼容性检查：可通过
navigator.mediaDevices是否存在判断浏览器支持性
扩展功能建议
- 添加扫描成功的声音反馈
- 实现多码同时识别功能
- 增加手动输入校验机制
- 添加扫描区域框UI提示
以上方案可根据实际需求选择或组合使用，vue-qrcode-reader 适合快速集成，原生方案更适合定制化需求。
