業務場景：H5中用到掃碼的場景，常見掃碼簽到、掃碼簽退
框架：vue
依賴：npm i html5-qrcode

<template><div><div class="fx_qrcode"><div id="reader" width="600px"></div></div></div> </template><script> import { Html5Qrcode } from 'html5-qrcode';export default {data() {return {};},mounted() {this.getCameras();},methods: {getCameras() {Html5Qrcode.getCameras().then(devices => {/*** 獲取攝像頭*/if (devices && devices.length) {// 如果有2個攝像頭，1為前置的if (devices.length > 1) {this.cameraId = devices[1].id;} else {this.cameraId = devices[0].id;}this.devices = devices;this.start();}}).catch(err => {});},//開始掃碼start() {const self = this;this.html5QrCode = new Html5Qrcode('reader');this.html5QrCode.start(this.cameraId,{fps: 10, qrbox: { width: 250, height: 250 }, },(decodedText, decodedResult) => {//獲取到二維碼中的信息this.handleRequest(decodedText);},errorMessage => {},).catch(err => {});},//結束掃碼stop() {this.html5QrCode.stop().then(ignore => {}).catch(err => {});},async handleRequest(decodedText) {//根據二維碼中的信息發送請求處理業務},}, }; </script><style> .fx_qrcode {margin-top: 200px; } </style>

總結

以上是生活随笔為你收集整理的前端页面实现扫码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。