mui实现二维码扫描

最新推荐文章于 2025-06-14 10:59:24 发布

Guancya

最新推荐文章于 2025-06-14 10:59:24 发布

阅读量7.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： MUI 文章标签： app 二维码移动

本文链接：https://blog.youkuaiyun.com/tiger_gy/article/details/69390321

MUI 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用mui框架实现的二维码扫描应用案例。该应用通过HTML、CSS和JavaScript实现了二维码扫描功能，并提供了从相册选择二维码图片进行扫描的能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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="../css/mui.min.css" rel="stylesheet" />  
    <link rel="stylesheet" href="../css/iconfont.css" />
    <script src="../js/mui.min.js"></script>  
    <style type="text/css">  
    </style>  
   </head>  
  <body>  
    <header class="mui-bar" style="background-color:#000000;"id="head1">  
      <a class=" mui-icon mui-icon-left-nav mui-pull-left mui-action-back"style="color: #FFFFFF;"><font size="4">发现</font></a>  
      <h1 class="mui-title" style="color: #FFFFFF;font-family:'微软雅黑';">物品二维码扫描</h1>  
      <span class="mui-icon mui-icon-image mui-spin mui-pull-right" id="turnTheLight" style="color:white;" onclick="scanPicture();"></span>  
    </header>  
    <div id="code" style="width:100%;height:100%;position:absolute;background:#000000;">     
        <!--盛放扫描控件的div-->          
    </div> 
    <div class="mui-bar mui-bar-tab" style="background-color: #000000;">  
            <a class="mui-tab-item mui-active" data-index="0">
	    	    <span class="mui-icon iconfont icon-saoyisao"></span>
	    	    <span class="mui-tab-label">扫码</span>
	    	</a>
	    	<a class="mui-tab-item mui-action-back" data-index="1">
	    	    <span class="mui-icon iconfont icon-quxiao"></span>
	    	    <span class="mui-tab-label"style="color:white">取消</span>
	    	</a>
    </div>  
    <script type="text/javascript">  
        scan = null;//扫描对象  
        mui.plusReady(function () {  
            mui.init();
            startRecognize(); 
        });  
        function startRecognize(){  
           try{  
            var filters;  
            //自定义的扫描控件样式  
            var styles = {frameColor: "#0000FF",scanbarColor: "#0000FF"};
            //扫描控件构造  
            scan = new plus.barcode.Barcode('code',filters,styles);  
            scan.onmarked = onmarked;  
            scan.onerror = onerror;  
            scan.start();
          }catch(e){  
            mui.alert("出现错误啦:\n"+e);  
             }  
          };  
        function onerror(e){  
            miu.alert(e);  
        };  
        function onmarked( type, result ) {  
            var text = '';  
            switch(type){  
                case plus.barcode.QR:  
                text = 'QR: ';  
                break;  
                case plus.barcode.EAN13:  
                text = 'EAN13: ';  
                break;  
                case plus.barcode.EAN8:  
                text = 'EAN8: ';  
                break;  
            }   
            plus.runtime.openURL(result);
        };    
        // 从相册中选择二维码图片   
        function scanPicture() {  
            plus.gallery.pick(function(path){  
                plus.barcode.scan(path,onmarked,function(error){  
                    plus.nativeUI.alert( "无法识别此图片" );  
                });  
            });  
        }         
        </script>  
    </body>  
</html>

注意：需要引入mui.min.js ，页面上的相册，扫描，取消是在阿里巴巴矢量图标库下载的，下载代码引入样式即可。

如果帮助到您，顶一个