> 本文主要使用`html5-qrcode`库实现二维码扫描功能，官方github地址： ## 引入html5-qrcode： npm i html5-qrcode 或者： ``` ##### 识别文件夹中的二维码图片 ```js // 返回promise对象，imageFile，file对象，第二个参数：是否将图片显示到画布上 html5QrCode.scanFile(imageFile, true) .then(qr => { console.log(qr) // 二维码结果 }) .catch(err => { console.log(err) }) ``` ##### 扫码，利用相机进行扫码 ```js // 获取相机设备 Html5Qrcode.getCameras() .then(devices => { // 扫码配置 const config = { fps: 10, // 二维码扫描每秒帧数 qrbox: { width: 300, height: 300 }, // UI框的大小 aspectRatio: 1.777778, // 纵横比,此值表示全屏 } if (devices && devices.length) { const cameraId = devices[devices.length - 1].id //后置摄像头，一般最后一个是后置摄像头 //let cameraId = devices[0].id //前置摄像头 // 打开相机，开始扫描，callbackSuccess, callbackFailure扫描成功与失败的回调函数（自行定义） html5QrCode.start({ deviceId: { exact: cameraId } }, config, callbackSuccess, callbackFailure).catch(err => { alert(err) }) } else { // 如果没有找到设备，直接启用摄像头 //environment：后置摄像头 user：前置摄像头 html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess, onScanFailure).catch(err => { alert(err) }) } }) .catch(err => { alert(err) }) ``` ##### 停止扫描 ```js html5QrCode.stop() ``` ##### 清除画布 ```js html5QrCode.clear() ``` ## vue中开发扫码页面 > 本次demo使用的是vue3，参考大多数扫码功能，都是以页面的形式展示，也可以封装为组件，主要看项目需求 **思路：** 1. 点击扫描，跳转扫一扫页面，打开相机扫码 2. 识别成功放回上一页，并将结果传递给上一页 ### 实现效果：

### 主要实现代码： > demo源码： ##### ScanView\.vue 扫码页面 * 主要实现调起相机扫码，并返回结果到上一个页面 ```html ``` ##### HomeView\.vue * 调起扫码页面，处理扫码结果 * 选择二维码图片并识别二维码 ```html ``` ## uniapp中封装扫码页面 > uniapp中uni.scanCode()可以调起扫码功能，但该API不兼容H5，因此H5页面还是需要自己写一个扫码页面。整体逻辑还是参考vueH5页面的实现。 ### 实现效果：

### demo代码： > 当前uniapp项目中二维码图片识别功能使用的是reqrcode.js库，也可以使用html5-qrcode，这里我懒得改了。 #### pagexxx.vue 扫一扫入口页面 ```html

``` #### san.vue 扫一扫页面