# 跨平台 APP 开发框架 MUI

# 1. 实现二维码扫描：

在 list 页面触发按钮的点击事件：

	document.getElementById("orderxh").addEventListener('click', function() {
	var scan = null; //扫描对象
	//扫描二维码
	mui.openWindow({
	url:'scan.html',
	id:'scan.html'
	})
	})

	function scaned(t, r, f){
	var userId = localStorage.getItem("userId");

	// alert("二维码类型："+t+"\n扫描结果："+r+"\n文件路径："+f);
	request('18003', {
	userId: userId \|\| -1,
	result: r,
	}, function(json) {
	plus.webview.getWebviewById("scan.html").close();
	alert(json.msg)

	})


	}

在 scan.html 页面

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
	<meta name="HandheldFriendly" content="true" />
	<meta name="MobileOptimized" content="320" />
	<title>消核订单</title>
	<link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" />
	<script type="text/javascript" src="./js/common.js"></script>
	<style type="text/css">
	#bcid {
	width: 100%;
	position: fixed;
	top: 50px;
	bottom: 0px;
	text-align: center;
	}

	.tip {
	color: #000000;
	font-weight: bold;
	text-shadow: 0px -1px #103E5C;
	}
	</style>

	<script type="text/javascript">
	var ws = null;
	var scan = null;
	// H5 plus 事件处理
	function plusReady() {
	// 获取窗口对象
	ws = plus.webview.currentWebview();
	nv = ws.getTitleNView();
	// 开始扫描
	ws.addEventListener('show', function() {
	scan = new plus.barcode.Barcode('bcid', [plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13], {
	frameColor: '#009DE2',
	scanbarColor: '#009DE2',
	});
	scan.onmarked = onmarked;
	scan.start({
	conserve: true,
	filename: '_doc/barcode/'
	});
	createSubview();
	}, false);
	// 显示页面并关闭等待框
	ws.show('pop-in');
	}
	document.addEventListener('plusready', plusReady, false);

	// 二维码扫描成功
	function onmarked(type, result, file) {
	console.log("type->", type)
	console.log("result->", result)
	console.log("file->", 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(/\r\n/g, '');
	ws.opener().evalJS("scaned('" + type + "','" + result + "','" + file + "');");
	console.log("result->", result)
	mui.back();
	}
	// 创建子窗口
	var view = null;

	function createSubview() {
	view = new plus.nativeObj.View('nbutton', {
	bottom: '28%',
	left: '30%',
	width: '40%',
	height: '44px'
	}, [{
	tag: 'font',
	id: 'text',
	text: '请扫描二维码',
	textStyles: {
	color: '#FFFFFF'
	}
	}]);
	ws.append(view);
	}

	function cancle(){
	console.log("111")
	mui.back();
	}

	document.getElementById("cancle").addEventListener('click', function() {
	console.log("111")
	})

	</script>

	</head>

	<body style="background-color:#ffffff;">
	<button id="cancle" type="button" style="width: 50px;height: 20px;display: flex;margin-top: 20px;color: #000000;position: absolute;top: 0px;left: 0px;line-height: 20px;margin-left: 5px;">
	取消
	</button>
	<div id="bcid">
	<div style="height:40%"></div>
	<p class="tip">...载入中...</p>
	</div>
	</body>
	</html>