【H5+APP mui实现扫描二维码】亲测有效~

  • [ ]
	 doctype html>  
	  <html>      
	  <head>      
	  <meta charset="UTF-8">      
	  <title>title>     
	  <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
          />      
          <link href="https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/css/mui.css"
          rel="stylesheet" />      
          <script src="https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/js/mui.min.js">script>
                     
                 <style type="text/css">  
                 #bcid{  
                     width: 100%;  
                     height: 85%;  
                     position: absolute;
                     top: 80px;
                     background: #000000;  
                 }  
                 html, body ,div{  
                     height:100%;  
                     width: 100%;  
                 }  
                 .fbt{  
                     color: #0E76E1;  
                     width: 50%;  
                     background-color: #ffffff;  
                     float: left;   
                     line-height: 44px;  
                     text-align: center;  
                 }      
                 style>      
                 head> 
             <body> 
           <header class="mui-bar mui-bar-nav" style="background-color:  #ffffff;padding-top: 40px;height: 85px;">  
               <a id="link" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" onclick="closeClick();">a>  
               <h1 class="mui-title" style="color: #0E76E1;">扫一扫h1>  
               <span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight">span>      header>  
                             
               <div id="bcid">div>  
               <div class="mui-bar mui-bar-footer" style="padding: 0px;">  
                 <div class="fbt" onclick="scanPicture();">从相册选择二维码div>  
                 <div class="fbt mui-action-back" onclick="closeClick();">取  消div>      
               div>  
             <script type="text/javascript">
              //     var height = window.innerHeight + 'px'// 获取页面实际高度 // var width = window.innerWidth + 'px' //   
          document.getElementById('bcid').style.height = height //   
          document.getElementById('bcid').style.width = width
                 let href = window.location.href    scan = null// 扫描对象    mui.plusReady(function () {  // 通过mui初始化扫描
               mui.init()
               startRecognize()    })
                 function startRecognize () {  // 开启扫描
               try {
                 var filter
                  // 自定义的扫描控件样式
                 var styles = {frameColor: '#29E52C', scanbarColor: '#29E52C', background: ''}
                     // 扫描控件构造
                 scan = new plus.barcode.Barcode('bcid', filter, styles)
                 scan.onmarked = onmarked
                 scan.onerror = onerror  // 扫描错误
                 scan.start()
                 // 打开关闭闪光灯处理
                 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('出现错误啦:\n' + e)
               }    
              };   
             function onerror (e) {  // 错误弹框
               alert(e)    
             };    
             function closeClick () {
                 window.location.href = window.location.origin + '/#/Home?TC=' + 'TC'
                 scan.cancel();
                 scan.close();    
            };    
            function onmarked (type, result) {  // 这个是扫描二维码的回调函数,type是扫描二维码回调的类型
               var text = ''
               switch (type) { // QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果
                 case plus.barcode.QR:
                   text = 'QR' // 二维码
                   break
                 case plus.barcode.EAN13:
                   text = 'EAN13' // 条形码
                   break
                 case plus.barcode.EAN8:
                   text = 'EAN8' // 条形码
                   break
               }
               if (text === 'QR') {
                 // alert(text + ' : ' + window.location.href)
                 window.location.href = window.location.origin + '/#/Home?QR=' + result
               } else {
                // 条形码无法识别
                 // location.href = `window.location.origin + '/#/Home?EAN8=' + result`;
               alert('无法识别图中二维码')
               }
               // 停止扫描 关闭摄像头
               scan.cancel();
               scan.close(); 
             };
             
                 // 从相册中选择二维码图片    function scanPicture () {  // 可以直接识别二维码图片
               plus.gallery.pick(function (path) {
                 plus.barcode.scan(path, onmarked, function (error) {
                   plus.nativeUI.alert('无法识别此图片')
                 })
               }, 
               function (err) {
                 plus.nativeUI.alert('Failed: ' + err.message)
               })    
              }
             
                 script>     
              body>  
            html>  
                 ```

你可能感兴趣的:(前端,H5APP,javascript,前端,html)