uniapp在h5页面实现扫码功能(html5-qrcode)

批发零售库存时装布料

安装

1. npm install html5-qrcode

复制代码

代码

1. <template>
   
2.         <view class="container">
   
3.                 <button class="scan" @click="scanCode">打开相机扫码</button>
   
4.                 <view class="reader-box" v-if="isScaning">
   
5.                         <view class="reader" id="reader"></view>
   
6.                 </view>
   
7.         </view>
   
8. </template>
   
9. <script>
   
10.         import {
    
11.                 Html5Qrcode
    
12.         } from 'html5-qrcode';
    
13.         export default {
    
14.                 data() {
    
15.                         return {
    
16.                                 html5Qrcode: null,
    
17.                                 isScaning: false,
    
18.                         }
    
19.                 },
    
20.                 methods: {
    
21.                         startScan() {
    
22.                                 this.isScaning = true;
    
23.                                 Html5Qrcode.getCameras().then(devices => {
    
24.                                         if (devices && devices.length) {
    
25.                                                 this.html5Qrcode = new Html5Qrcode('reader');
    
26.                                                 this.html5Qrcode.start({
    
27.                                                         facingMode: 'environment',
    
28.                                                 }, {
    
29.                                                         fps: 24,
    
30.                                                         qrbox: 280
    
31.                                                 }, (decodeText, decodeResult) => {
    
32.                                                         console.log(decodeText)
    
33.                                                         if (decodeText) {
    
34.                                                                 this.stopScan();
    
35.                                                                 this.isScaning = false;
    
36.                                                         }
    
37.                                                 }, (err) => {
    
38.                                                         console.log(err)
    
39.                                                 });
    
40.                                         }
    
41.                                 });
    
42.                         },
    
43.                         stopScan() {
    
44.                                 this.html5Qrcode.stop();
    
45.                         },
    
46.                         scanCode() {
    
47.                                 console.log('helo')
    
48.                                 this.startScan();
    
49.                         }
    
50.                 }
    
51.         }
    
52. </script>
    
53. <style scoped>
    
54.         .container{
    
55.                 height:100%;
    
56.         }
    
57.         .reader-box {
    
58.                 position: fixed;
    
59.                 top: 0;
    
60.                 bottom: 0;
    
61.                 left: 0;
    
62.                 right: 0;
    
63.                 background-color: rgba(0, 0, 0, 0.5);
    
64.         }
    
65.         .reader {
    
66.                 width: 540rpx;
    
67.                 height: 540rpx;
    
68.                 position: absolute;
    
69.                 top: 50%;
    
70.                 left: 50%;
    
71.                 transform: translate(-50%, -50%);
    
72.         }
    
73. </style>

复制代码

测试效果

uniapp运行到浏览器

到此这篇关于uniapp在h5页面实现扫码功能(html5-qrcode)的文章就介绍到这了,更多相关html5 qrcode扫码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/html5/939959.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！