mui扫描页

清疚 2022-02-28 23:50 257阅读 0赞

做了一个简单的二维码通用页面，

我也只在网上找的代码，然后优化后，并且修改成 我项目需要用到的结构。

扫码本来也很简单。

在哪里用到扫描，只需要设置跳转页面，就可以了，扫描到数据，可以直接返回本页操作、分离数据。

只需要有setcard\_number（res）函数 就可以获得想要的数据。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<meta name="HandheldFriendly" content="true"/>
    		<meta name="MobileOptimized" content="320"/>
    		<title>扫描</title>
            <link rel="stylesheet" type="text/css" href="../css/mui.css"/>
    		<style type="text/css">
    #bcid {
    	width: 100%;
    	position: absolute;
    	top: 0px;
    	bottom: 44px;
    	text-align: center;
    }
    .tip {
    	color: #FFFFFF;
    	font-weight: bold;
    	text-shadow: 0px -1px #103E5C;
    }
    footer {
    	width: 100%;
    	height: 44px;
    	position: absolute;
    	bottom: 0px;
    	line-height: 44px;
    	text-align: center;
    	color: #FFF;
    }
    .fbt {
    	width: 50%;
    	height: 100%;
    	background-color: #FFCC33;
    	float: left;
    }
    .fbt:active {
      	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
    	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
    }
    		</style>
    	</head>
    	<body style="background-color: #000000;">
    		<div id="bcid">
    			<div style="height:40%"></div>
    			<p class="tip">...载入中...</p>
    		</div>
    		<footer>
    			<div class="fbt" id="close">取　 消</div>
    			<div class="fbt" id="select" >从相册选择二维码</div>
    		</footer>
    	</body>
    	
       
        <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		var scan = null;//扫描对象  
            mui.init();
    		window.onload = function(){
    			mui.init();
    			 mui.plusReady(function () {  
    			 	//扫描
    				startRecognize(); 
    	        }); 
    	        //监听取消
    	         g("close").addEventListener("tap",function(e){
    							mui.back();
    			})
    	         //监听相册选择
    			g("select").addEventListener("tap",function(e){
    				scanPicture();
    			})
    			
    		}
    		function startRecognize(){  
               try{  
    	            var filters;  
    	            //自定义的扫描控件样式  
    	            var styles = {frameColor: "#0000FF",scanbarColor: "#0000FF"};
    	            //扫描控件构造  
    	            scan = new plus.barcode.Barcode('bcid',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 = '';  
                //获取父类对象
                var ws=plus.webview.currentWebview().opener();
                //调用父类函数，只要父类有 这个函数
                ws.evalJS("setcard_number('"+ result +"');");
                //关闭
    			mui.back();
            };    
            // 从相册中选择二维码图片   
            function scanPicture() {  
                plus.gallery.pick(function(path){  
                    plus.barcode.scan(path,onmarked,function(error){  
                        plus.nativeUI.alert( "无法识别此图片" );  
                    });  
                });  
            }  
    		</script>
    </html>

如果感兴趣，也可以关注我的微信公众号，因为刚起步，所以只有几篇文章，之后会慢慢更新。

![20190314150402813.jpg][]

[20190314150402813.jpg]: /images/20220301/8ee49878a20c47fb8ed387ce86f9e2bf.png