mui开发APP扫码效果

最新推荐文章于 2023-09-04 14:35:45 发布

孤身不觉晚

最新推荐文章于 2023-09-04 14:35:45 发布

阅读量576

点赞数

本文链接：https://blog.csdn.net/qq_40043424/article/details/101460035

版权

先看下head部分

<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" />

		<script src="js/mui.min.js"></script>

		<style type="text/css">
		
		</style>

	</head>

dom 部分

	<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 mui-icon-camera"></span>

				<span class="mui-tab-label">扫码</span>

			</a>

			<a class="mui-tab-item mui-action-back" data-index="1">

				<span class="mui-icon mui-icon-upload"></span>

				<span class="mui-tab-label" style="color:white">取消</span>

			</a>

		</div>

<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			api = new(SendAjax); 
			scan = null; //扫描对象  

			mui.plusReady(function() {

				mui.init();

				startRecognize();

			});

			function startRecognize() {

				try {

					var filters;

					//自定义的扫描控件样式  

					var styles = {
						frameColor: "#ffffff",
						scanbarColor: "#1bccba"
					};

					//扫描控件构造  

					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;

				}
				    const refuse = '/CheckinOrder' //确定订单号
					api.AjaxReponse(refuse, {
						'access_token': localStorage.getItem('access_token'),
						'order_number': result
					}, function(data) {
						alert(data.data)
						mui.openWindow({
							url: './check_in.html',
							id: 'check_in',
						})
					});
//				plus.runtime.openURL(result);

			};
		</script>