Fungsi pemindaian kode QR diimplementasikan menggunakan HTML5 berdasarkan kerangka MUI

Penulis：Eve Cole Waktu Pembaruan：2025-03-16 00:00:03

Kasus implementasi Barcode

1. Pendahuluan

Modul Barcode mengelola pemindaian barcode dan menyediakan fungsi pemindaian dan identifikasi untuk barcode umum (kode QR dan kode satu dimensi). Modul ini dapat memanggil kamera perangkat untuk memindai gambar barcode untuk input data. Objek pengelolaan barcode dapat diperoleh melalui plus.barcode.

2. Efek yang dicapai

3. Menerapkan kode tersebut

 <!doctype html> <html> <head> <meta charset=UTF-8> <title></title> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1 ,skala maksimum=1,dapat diskalakan pengguna=tidak /> <link href=css/mui.min.css rel=stylesheet /> <skrip src=js/mui.min.js></script> <tipe gaya=teks/css> #bcid{ lebar: 100%; tinggi: 100%; posisi: latar belakang: #000000; { tinggi:100%; lebar: 100%; } .fbt{ warna: #0E76E1; lebar: 50%; #ffffff; float: kiri; tinggi garis: 44px; perataan teks: tengah; } </style> </head> <body> <header class=mui-bar mui-bar-nav style=warna latar: # ffffff;> <a class=mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title style=color: #0E76E1;>Pemindaian kode QR item</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--Div yang memegang kontrol pemindaian--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>Pilih kode QR dari album</div> <div class=fbt mui-action-back>Batal</div> </div> <script type=text/javascript> pemindaian = null; //Pindai objek mui.plusReady(function () { mui.init(); startRecognize(); }); function startRecognize(){ coba{ var filter; //Gaya kontrol pemindaian yang disesuaikan var style = {frameColor: #29E52C,scanbarColor: #29E52C,background: } //Konstruksi kontrol pemindaian scan = new plus.barcode.Barcode('bcid',filter,styles); ; scan.start(); //Menghidupkan dan mematikan pemrosesan flash var flag = false; document.getElementById(turnTheLight).addEventListener('tap',function(){ if(flag == false){ scan.setFlash(true); flag = true; }else{ scan.setFlash(false); flag = false; } }); }catch(e){ alert(Terjadi kesalahan:/n+e }; fungsi onerror(e){ alert(e }); onmarked( tipe, hasil ) { var text = ''; switch(type){ case plus.barcode.QR: text = 'QR: '; break; case plus.barcode.EAN13: text = 'EAN13: '; case plus.barcode.EAN8: text = 'EAN8: '; break; } alert( text + : + result }; plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Gambar ini tidak dapat dikenali); }); },function(err){ plus .nativeUI.alert(Gagal: +err.message });

3. Permasalahan yang ditemui pada saat proses

a, div menempati seluruh halaman

1. Lebar dan tinggi div ini adalah 100%, dan tinggi elemen induknya juga seperti ini (begitu seterusnya hingga simpul akar), atau posisi div ini absolut;

2. Anda dapat menggunakan js untuk mengatur lebar dan tinggi halaman secara dinamis.

 var height = window.innerHeight + 'px';//Dapatkan tinggi halaman sebenarnya var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= document.getElementById(bcid) .style.lebar= lebar;

b, kontrol pemindaian memiliki margin atas dan bawah

Mengisi dengan warna hitam digunakan untuk menghilangkan perbedaan visual, tetapi sebenarnya belum terselesaikan (Jika Anda menyelesaikannya, silakan tinggalkan pesan, terima kasih)

Meringkaskan

Di atas adalah fungsi pemindaian kode QR yang diimplementasikan menggunakan HTML5 berdasarkan kerangka MUI yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu . Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!