mui实现移动端扫一扫功能

最新推荐文章于 2023-11-25 22:34:44 发布

MrsTing

最新推荐文章于 2023-11-25 22:34:44 发布

阅读量1k

点赞数

分类专栏： mui 移动端扫一扫功能

本文链接：https://blog.csdn.net/qq_40364610/article/details/112621834

版权

mui 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

移动端扫一扫功能

1 篇文章 0 订阅

订阅专栏

	在实现扫一扫功能时，由于第一次接触，因此在找方案时花费了大量的时间，找的方案兼容性都不太行，
后来突然想到之前有一个项目是用到了mui框架，当时有印象说这个框架能够调用底层原生的功能，因此抱着
试试的态度使用了mui来实现扫一扫的功能，没想到真的是可以使用。

提示：

mui的项目功能测试运行不可以直接在浏览器的调试模式进行测试，必须使用手机进行联调，我当时是在Hbuilder开发工具使用手机联调模式测试的。
至于这个方案是否兼容IOS，目前还没试过
功能完整代码：

mui包我没找到在哪上传，大家可以自行下载，我是使用的mui2.0.0版本

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="false" name="twcClient" id="twcClient">
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <!--允许全屏模式-->
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <!--指定sari的样式-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection" />
    <title>扫一扫</title>
   <link href="../css/mui.min.css" rel="stylesheet" />
    <style>
		.mui-bar-nav {
			top: 0;
			-webkit-box-shadow: 0 1px 6px #ccc;
			box-shadow: 0 1px 6px #ccc;
		}
		.mui-bar {
			position: fixed;
			z-index: 999;
			right: 0;
			left: 0;
			width: 100%;
			height: 44px;
			padding-right: 10px;
			padding-left: 10px;
			box-sizing: border-box;
			border-bottom: 0;
			background-color: #000000;
			-webkit-box-shadow: 0 0 1px rgba(0,0,0,.85);
			box-shadow: 0 0 1px rgba(0,0,0,.85);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			color: #FFFFFF;
		}
		.mui-bar-footer {
			bottom: 0;
		}
        #bcid{
             width: 100%;
             height: calc(100% - 88px);
             position: absolute;
			 top:44px;
			 left: 0;
			 right: 0;
			 bottom: 44px;
			 z-index: 1;
        }
        .fbt{
             color: #FFFFFF;
			 border: 0;
             width: 50%;
             background-color: #111111;
             float: left;
             line-height: 44px;
             text-align: center;
         }
		 .bar-top-box {
			 display: -webkit-box;
			 display: -webkit-flex;
			 display: flex;
			 display: -ms-flexbox;
			 justify-content: space-between;
		 }
    </style>
</head>
<body>
	<div>
		<header class="mui-bar mui-bar-nav">
			<div class="bar-top-box">
				<span style="height: 44px;line-height: 44px;" id="turnTheLight">开灯</span>
				<span onclick="scanClose();" style="height: 44px;line-height: 44px;">取　 消</span>
			</div>
		</header>
		 <div id="bcid">
		<!--盛放扫描控件的div-->
		</div>
		<div class="mui-bar mui-bar-footer" style="padding: 0px;">
		    <div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
		    <div class="fbt">输入编码</div>
		</div>
	</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/scan_back.js"></script>
<script type="text/javascript" >
	scan = null;//扫描对象
	mui.plusReady(function () {  //通过mui初始化扫描
		mui.init();
		startRecognize();//开始扫描
	});
	function startRecognize(){  //开启扫描方法
		try{
			var filter;
			//自定义的扫描控件样式
			var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: ""}
			//扫描控件构造
			scan = new plus.barcode.Barcode('bcid',filter,styles);
			scan.onmarked = onmarked;扫描完毕后的回调
			scan.onerror = onerror;  //扫描错误
			scan.start();
		}catch(e){
			alert("出现错误啦:\n"+e);
		}
	};
                
	//打开关闭闪光灯处理
	var flag = false;
	document.getElementById("turnTheLight").addEventListener('tap',function(){
	   if(flag == false){
		  scan.setFlash(true);
		  flag = true;
	   }else{
		 scan.setFlash(false);
		 flag = false;
	   }
	});
	// 从相册中选择二维码图片
    function scanPicture() {  //可以直接识别二维码图片
        plus.gallery.pick(function(path){
            plus.barcode.scan(path,onmarked,function(error){
                plus.nativeUI.alert( "无法识别此图片" );
            });
        },function(err){
            plus.nativeUI.alert("Failed: "+err.message);
        });
    } 
	 //这个是扫描二维码的回调函数，type是扫描二维码回调的类型
	function onmarked( type, result ) { 
		var text = '';
		switch(type) { //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果
			case plus.barcode.QR:
			text = 'QR: ';
			break;
			case plus.barcode.EAN13:
			text = 'EAN13: ';
			break;
			case plus.barcode.EAN8:
			text = 'EAN8: ';
			break;
		}
		scan.close();
		javascript:window.history.back(-1);
		// localStorage.value = [result;]; 
		console.log(result);
		/* window.location.href = "single_code.html?id="+result; */
		/* alert( text + " : "+ result+'111' );//扫描完毕后的回调 */
	};
	//关闭控件
	function scanClose(){
		scan.close();
		javascript:window.history.back(-1);
	}
</script>
</html>

MrsTing

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
mui实现移动端扫一扫功能

在实现扫一扫功能时，由于第一次接触，因此在找方案时花费了大量的时间，找的方案兼容性都不太行，后来突然想到之前有一个项目是用到了mui框架，当时有印象说这个框架能够调用底层原生的功能，因此抱着试试的态度使用了mui来实现扫一扫的功能，没想到真的是可以使用。提示：mui的项目功能测试运行不可以直接在浏览器的移动端模式，必须使用手机进行联调，我当时是在Hbuilder开发工具使用手机联调模式测试的。至于这个方案是否兼容IOS，目前还没试过功能完整代码：mui包我没找到在哪上传，大家可以自行下.
复制链接

扫一扫