mui掃碼橫屏全屏

時間 2019-11-16
標籤 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 rel="stylesheet" href="../../css/common/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common/common.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/common/iconfont.css"/>
    <style type="text/css">
    	body{
            background-color: #f2f5f6 !important;
    	}
    	#header{
    		background-color: #b9bbba;
    		height: 64px;
    		padding-top: 20px;
    	}
    	#header a{
    		color: #fff;
    	}
    	#header a.mui-pull-right{
    		font-size: 16px;
		    padding-top: 14px;
    		padding-bottom: 14px;
    	}
        #bcid {
            width: 100%;
            position: absolute;
            top: 64px;
            bottom: 180px;
            text-align: center;
            background-color: #f2f5f6;
            overflow: hidden;
        }
        #bciddiv{
        	width: 150%;
        	height: 110%;
        	display: none;
            position: relative;
            top: 64px;
            left: -25%;
        }
        .tip {
            color: #000;
            font-weight: normal;
            text-shadow: 0px -0.2px #103E5C;
        }
        footer {
            width: 100%;
            height: 150px;
            position: absolute;
            bottom: 0px;
            line-height: 44px;
            text-align: center;
            color: #FFF;
        }
        .fbt {
            width: 50%;
            height: 100%;
            background-color: #b9bbba;
            float: left;
        }
        .yuan{
		    height: 60px;
		    width: 60px;
		    margin-top: 30px;
		    margin-left: 50%;
		    transform: translate(-50%);
        }
        .yuan .iconfont{
        	margin-top: 12px;
			font-size: 36px;
			color: #fff;
        }
    </style>
    </head>
    <body style="background-color: #000000;">	
		<header class="mui-bar mui-bar-nav mui-bar-transparent" id="header">
		 	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		 	<h1 class="mui-title">掃一掃</h1>
		 	<a class="mui-icon mui-pull-right" onclick="scanPicture()">相冊</a>
		</header>
        <div id="bcid">
            <div style="height:50%"></div>
            <p class="tip">...載入中...</p>
            <div id="bciddiv"></div>
        </div>
        <footer>
            <div class="fbt" onclick="inputimei()">
            	<div class="yuan">
            		<span class="mui-icon iconfont icon-jushou"></span>
            	</div>
            	<span>
            		手輸設備號
            	</span>
            </div>
            <div class="fbt">         	
            	<div class="yuan" onclick="openlight()">
            		<span class="mui-icon iconfont icon-zhaoming"></span>
	            	</div>
	            	<span>
	            		手電筒
	            	</span>
            	</div>
        </footer>
	<script src="../../js/common/jquery-3.0.0.min.js"></script>
    <script src="../../js/common/mui.js"></script>
	<script src="../../js/common/common.js"></script>
    <script type="text/javascript">
    	mui.init({
			beforeback:function(){
				if(scantype=='D'){
					var i = plus.webview.getWebviewById('deviceList');
					mui.fire(i, 'refreshDeviceList');
				}else if(scantype=='L'){
					var i = plus.webview.getWebviewById('lampList');
					mui.fire(i, 'refreshLampList');
				}
			}
		});	
	    var ws=null,wo=null;
	    var scan=null,domready=false;
	    var scantype,projectId,ImeiId,cellId,cellAddr,ImeiMac;
	    // H5 plus事件處理
	    function plusReady(){
	        if(ws||!window.plus||!domready){
	            return;
	        }
	        // 獲取窗口對象
	        ws=plus.webview.currentWebview();
	        wo=ws.opener();
	        // 開始掃描
	        ws.addEventListener('show', function(){
	        	//自定義的掃描控件樣式  
             	var styles = {frameColor: "#c6c6c6",scanbarColor: "#c6c6c6",background: "#f2f5f6"} 
	            $("#bcid div").css("display","none");
	            $("#bcid p").css("display","none");
	            $("#bcid #bciddiv").css("display","block");
	            scan=new plus.barcode.Barcode('bciddiv','',styles);
	            scan.onmarked=onmarked;
	            scan.start();
	        }, false);
	        scantype=ws.type;
	        projectId=ws.projectId;
	        ImeiId=ws.ImeiId;
	        ImeiMac=ws.ImeiMac;
	        cellId=ws.cellId;
	        cellAddr=ws.cellAddr;
	        // 顯示頁面並關閉等待框
	        ws.show('pop-in');               
	    }
	    if(window.plus){
	        plusReady();
	    }else{
	        document.addEventListener('plusready', plusReady, false);
	    }
	    // 監聽DOMContentLoaded事件
	    document.addEventListener('DOMContentLoaded', function(){
	        domready=true;
	        plusReady();
	    }, false);
	    // 二維碼掃描成功
	    function onmarked(type, result, file){
	        switch(type){
	            case plus.barcode.QR:
	            type = 'QR';
	            break;
	            case plus.barcode.EAN13:
	            type = 'EAN13';
	            break;
	            case plus.barcode.EAN8:
	            type = 'EAN8';
	            break;
	            default:
	            type = '其它'+type;
	            break;
	        }
	        result = result.replace(/\n/g, '');
	        result = result.replace(/\"/g, '');	 
	        //分析掃描結果：是URL就跳轉 ，不是就提示
	        if(result.indexOf('http://')==0  || result.indexOf('https://')==0){
	            plus.nativeUI.confirm(result, function(i){
	                if(i.index == 0){                    
	                    mui.back();//返回上一頁
	                    plus.runtime.openURL(result);
	                	scan.cancel();
	                }else{
	                    mui.back();//返回上一頁
	                	scan.cancel();
	                }
	            }, '', ['打開', '取消']);
	        }else{
	        }
	    }
	    // 從相冊中選擇二維碼圖片 
	    function scanPicture(){
	        plus.gallery.pick(function(path){
	            plus.barcode.scan(path,onmarked,function(error){
	                plus.nativeUI.alert('沒法識別此圖片');
	            });
	        }, function(err){
	        });
	    }
	    //打開閃關燈
	    var setFlash=false;
	    function openlight(){
	    	if(setFlash){
	    		setFlash=false;
	    	}else{
	    		setFlash=true;
	    	}
	    	scan.setFlash(setFlash);
	    }
    </script>
    </body>
</html>
　　主要是設置一個子div，高度爲父元素110%左右，父元素的高度爲180px，底部高度爲150px，差的30px大體爲父元素高度的10%，這個數值還須要測試，適配；javascript
對比效果：css