弄月
弄月
  • 发布:2017-07-04 14:02
  • 更新:2018-03-01 13:17
  • 阅读:1569

二维码扫描只有一个很小很小的而且在右侧的框

分类:HTML5+

如图。
我的代码如下:

    var scan = null;  
    var filter = [];  
    // H5 plus事件处理  
    mui.plusReady( function() {  
    	filter = [plus.barcode.QR,plus.barcode.EAN13, plus.barcode.EAN8, plus.barcode.AZTEC, plus.barcode.DATAMATRIX, plus.barcode.UPCA, plus.barcode.UPCE, plus.barcode.CODABAR, plus.barcode.CODE39, plus.barcode.CODE93, plus.barcode.CODE128, plus.barcode.ITF, plus.barcode.MAXICODE, plus.barcode.PDF417, plus.barcode.RSS14, plus.barcode.RSSEXPANDED];  
    	// 开始扫描  
    	scan = new plus.barcode.Barcode('bcid', filter);  
    	scan.onmarked = onmarked;  
    	scan.start({  
    		conserve: false  
    	});  
    });
2017-07-04 14:02 负责人:无 分享
已邀请:
Neil_HL

Neil_HL

barcode控件的位置是你自己指定放在“bcid”里面,bcid的大小你自己指定的,当页面卡顿时也可能偶发出现你这样的情况,把完整代码demo发出来我这边才好解决

弄月

弄月 (作者)

	<!DOCTYPE html>  
	<html>  
  
		<head>  
			<meta charset="utf-8">  
			<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
			<title></title>  
			<link rel="stylesheet" href="css/mui.min.css" />  
			<link rel="stylesheet" href="css/style.css" />  
			<link rel="stylesheet" href="css/iconfont.css" />  
			<style type="text/css">  
				body, .mui-content{  
					background-color: #000000;  
				}  
				.tip {  
					color: #FFFFFF;  
					font-weight: bold;  
					text-shadow: 0px -1px #103E5C;  
				}  
			</style>  
		</head>  
  
		<body>  
			<div class="mui-content" id="bcid">  
				<div style="height:40%; width: 100%;"></div>  
				<p class="tip">...载入中...</p>  
			</div>  
			<nav class="mui-bar mui-bar-tab">  
				<a id="back" class="mui-action-back mui-tab-item"><span class="mui-icon iconfont icon-houtui"></span>  
					<span class="mui-tab-label">取消</span></a>  
				<a id="scan" class="mui-tab-item" style="color: #f00;"><span class="mui-icon iconfont icon-xiangce"></span>  
					<span class="mui-tab-label">相册</span></a>  
			</nav>  
			<script src="js/mui.min.js"></script>  
			<script src="js/app.js"></script>  
			<script type="text/javascript">  
				var scan = null;  
				var filter = [];  
				// H5 plus事件处理  
				mui.plusReady( function() {  
					filter = [plus.barcode.QR,plus.barcode.EAN13, plus.barcode.EAN8, plus.barcode.AZTEC, plus.barcode.DATAMATRIX, plus.barcode.UPCA, plus.barcode.UPCE, plus.barcode.CODABAR, plus.barcode.CODE39, plus.barcode.CODE93, plus.barcode.CODE128, plus.barcode.ITF, plus.barcode.MAXICODE, plus.barcode.PDF417, plus.barcode.RSS14, plus.barcode.RSSEXPANDED];  
					// 开始扫描  
					scan = new plus.barcode.Barcode('bcid', filter);  
					scan.onmarked = onmarked;  
					scan.start({  
						conserve: false  
					});  
				});  
				document.getElementById("back").addEventListener('tap', mui.back);  
				document.getElementById("scan").addEventListener('tap', scanPicture);  
  
				// 二维码扫描成功  
				function onmarked(type, result) {  
					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, '');  
					mui.fire(plus.webview.currentWebview().opener(), 'scaned', {  
						type: type,  
						result: result  
					})  
					mui.back();  
				}  
				// 从相册中选择二维码图片   
				function scanPicture() {  
					plus.gallery.pick(function(path) {  
						plus.barcode.scan(path, onmarked, function(error) {  
							mui.toast("无法识别此图片");  
						});  
					}, function(err) {  
						//plus.nativeUI.alert("Failed: " + err.message);  
					}, filter);  
				}  
			</script>  
		</body>  
  
	</html>
  • 弄月 (作者)

    @372360


    2017-07-05 09:28

  • 弄月 (作者)

    没事了, 解决了


    2017-07-05 10:26

Salazar

Salazar

应该是CSS的问题,试试我这个,我这个是OK的,有些你那边没有的代码要删掉

<!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" />  
		<script src="js/mui.min.js"></script>  
		<link href="css/mui.min.css" rel="stylesheet" />  
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />  
		<!--<link href="css/qrcode-scan.css" rel="stylesheet"></link>-->  
		<style>  
				#bcid {  
		width: 100%;  
		position: absolute;  
		top: 0px;  
		bottom: 44px;  
		text-align: center;  
	}  
	  
	.tip {  
		color: #FFFFFF;  
		font-weight: bold;  
		text-shadow: 0px -1px #103E5C;  
	}  
		</style>  
	</head>  
  
	<body style="background-color: #000000;">  
		<header class="mui-bar mui-bar-nav myColor" style="padding-top: 10px;">  
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #ffffff;"></a>  
			<h1 id="title" class="mui-title" style="color: #ffffff;">二维码扫描</h1>  
		</header>  
  
		<div class="mui-content">  
			<div id="bcid">  
				<div style="height:40%"></div>  
				<p class="tip">Loading...</p>  
			</div>  
		</div>  
  
		<script type="text/javascript" src="../js/common.js"></script>  
		<script type="text/javascript">  
			mui.init();  
			var sData,  
				sTitle,  
				currentWebview,  
				opener,  
				scan,  
				domready;  
			mui.plusReady(function() {  
				//获取传递过来的值,设置顶部标题  
				sData = plus.webview.currentWebview();  
				//单据信息返回的顶部标题和type  
				openedTitle = sData.openedTitle;  
				sTitle = sData.sendTitle;  
				if(typeof(openedTitle) != 'undefined') {  
					sTitle = openedTitle;  
				}  
				var title = document.getElementById("title");  
				title.innerHTML = sTitle;  
			});  
			// 开始扫描,H5 plus事件处理   
			function startScan() {  
				if(currentWebview || !window.plus || !domready) {  
					return;  
				}  
				// 获取窗口对象   
				currentWebview = plus.webview.currentWebview();  
				opener = currentWebview.opener();  
				// 开始扫描   
				currentWebview.addEventListener('show', function() {  
					scan = new plus.barcode.Barcode('bcid');  
					scan.onmarked = onmarked;  
					scan.start({  
						conserve: true,  
						filename: '_doc/barcode/'  
					});  
				}, false);  
				// 显示页面并关闭等待框   
				currentWebview.show('pop-in');  
			}  
			if(window.plus) {  
				startScan();  
			} else {  
				document.addEventListener('plusready', startScan, false);  
			}  
			// 监听DOMContentLoaded事件   
			document.addEventListener('DOMContentLoaded', function() {  
				domready = true;  
				startScan();  
			}, false);  
  
			// 二维码扫描成功的回调函数  
			function onmarked(type, result, file) {  
				console.log("0956type=" + type + ",result=" + result + ",file=" + file);  
				//跳转到单据信息界面  
				var sendType = sData.type;  
				var openedType = sData.openedType;  
				if(typeof(openedType) != 'undefined') {  
					sendType = openedType;  
				}  
				mui.openWindow({  
					url: "bills-info.html",  
					id: "bills-info",  
					extras: {  
						result: result,  
						sendTitle: sTitle,  
						type: sendType,  
						tag: "scan"  
					},  
					createNew: true,  
					waiting: {  
						title: 'Loading...', //等待对话框上显示的提示内容  
					},  
					show:{  
						autoShow:false//页面loaded事件发生后自动显示,默认为true(数据加载完成后才关闭加载动画,改善使用效果)  
					}  
				});  
				console.log("1502result=" + result + "title=" + sTitle + "type=" + sendType);  
				//扫描完成后必须关闭当前页面的barcode,防止返回后无法重新扫描  
				scan.close();  
			}  
  
			//监听物理返回按键,返回主页  
			mui.back = function() {  
				mui.openWindow({  
					url: "home.html",  
					id: "home.html",  
					createNew: true //创建同样id的webview,相当于重新加载页面  
				});  
				scan.close();  
			}  
		</script>  
  
	</body>  
  
</html>
  • 弄月 (作者)

    我试试


    2017-07-05 10:23

弄月

弄月 (作者)

解决了, 其实是JS的问题

  • kay

    你好,请问你的问题是怎么解决的?我也遇到了同样的问题


    2018-03-01 13:14

  • 弄月 (作者)

    回复 kay:看楼下


    2018-03-01 13:17

弄月

弄月 (作者)

@kay

<!DOCTYPE html>  
<html>  
  
	<head>  
		<meta charset="utf-8">  
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
		<title></title>  
		<link rel="stylesheet" href="css/mui.min.css" />  
		<link rel="stylesheet" href="css/iconfont.css" />  
		<style type="text/css">  
			#bcid {  
				width: 100%;  
				position: absolute;  
				top: 0px;  
				bottom: 50px;  
				text-align: center;  
			}  
			  
			.tip {  
				color: #FFFFFF;  
				font-weight: bold;  
				text-shadow: 0px -1px #103E5C;  
			}  
		</style>  
	</head>  
  
	<body style="background-color: #000000;">  
		<div class="mui-content">  
			<div id="bcid">  
				<div style="height:40%"></div>  
				<p class="tip">...载入中...</p>  
			</div>  
			<nav class="mui-bar mui-bar-tab">  
				<a id="back" class="mui-action-back mui-tab-item">  
					<span class="mui-icon mui-icon-close"></span>  
					<span class="mui-tab-label">取消</span>  
				</a>  
				<a id="scan" class="mui-tab-item" style="color: #ffb730;">  
					<span class="mui-icon iconfont icon-pengyouquan"></span>  
					<span class="mui-tab-label">相册</span>  
				</a>  
			</nav>  
		</div>  
  
		<script src="js/mui.min.js"></script>  
		<script src="js/app.js"></script>  
		<script src="js/immersed.js"></script>  
		<script type="text/javascript">  
			var scan = null;  
			// H5 plus事件处理  
			mui.plusReady(function() {  
				// 获取窗口对象  
				ws = plus.webview.currentWebview();  
				// 开始扫描  
				ws.addEventListener('show', function() {  
					// 开始扫描  
					scan = new plus.barcode.Barcode('bcid', '', barcodeStyle);  
					scan.onmarked = onmarked;  
					scan.start({  
						conserve: false  
					});  
				}, false);  
				var barcodeStyle = {  
					frameColor: "#ffbf17",  
					scanbarColor: "#ffbf17"  
				}  
			});  
			document.getElementById("back").addEventListener('tap', mui.back);  
			document.getElementById("scan").addEventListener('tap', scanPicture);  
  
			// 二维码扫描成功  
			function onmarked(type, result) {  
				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, '');  
				mui.fire(plus.webview.currentWebview().opener(), 'scaned', {  
					type: type,  
					result: result  
				})  
				mui.back();  
			}  
			// 从相册中选择二维码图片   
			function scanPicture() {  
				plus.gallery.pick(function(path) {  
					plus.barcode.scan(path, onmarked, function(error) {  
						mui.toast("无法识别此图片");  
					});  
				}, function(err) {  
					//plus.nativeUI.alert("Failed: " + err.message);  
				});  
			}  
		</script>  
	</body>  
  
</html>
  • kay

    我也是这么写的代码,可是在华为的机器上就不行,我再看看吧,谢谢你


    2018-03-01 13:21

该问题目前已经被锁定, 无法添加新回复