uniapp在h5页面实现扫码功能(html5-qrcode)
npm install html5-qrcode
template view class="container" button class="scan" @click="scanCode" 打开相机扫码 /button view class="reader-box" v-if="isScaning" view class="reader" id="reader" /view /view /view /template script import {Html5Qrcode} from 'html5-qrcode';export default {data() {return {html5Qrcode: null,isScaning: false,}},methods: {startScan() {this.isScaning = true;Html5Qrcode.getCameras().then(devices = {if (devices devices.length) {this.html5Qrcode = new Html5Qrcode('reader');this.html5Qrcode.start({facingMode: 'environment',}, {fps: 24,qrbox: 280}, (decodeText, decodeResult) = {console.log(decodeText)if (decodeText) {this.stopScan();this.isScaning = false;}}, (err) = {console.log(err)});}});},stopScan() {this.html5Qrcode.stop();},scanCode() {console.log('helo')this.startScan();}}} /script style scoped .container{height:100%;}.reader-box {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.5);}.reader {width: 540rpx;height: 540rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} /style
uniapp运行到浏览器
uniapp在h5页面实现扫码功能(html5-qrcode)
