• mui实现扫一扫二维码功能(必须用hbulider打包)


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>扫码</title>
    <style type="text/css">
    .mask {
    	height: 90%;
    	 100%;
    	position: absolute;
    	top: 0;
    	background: #000000;
    }
    
    .mask2 {
    	height: 55px;
    	 100%;
    	position: fixed;
    	bottom: 0;
    	background: #000000;
    }
    
    body {
    	margin: 0;
    	background: #000000;
    }
    
    .scan {
    	 50%;
    	height: 55px;
    	background: #000;
    	float: left;
    	text-align: center;
    }
    
    .scan img {
    	 30px;
    	height: 30px;
    }
    
    .scan span {
    	display: block;
    	color: #fff;
    	font-size: 14px;
    }
    </style>
    </head>
    
    <body>
    	<div class="mask" id="mask">
    		<div class="title" style="100%;background:#ccc;">
    			<div style="padding:.8rem 0;text-indent:1rem;" onclick="scanClose()">返回</div>
    		</div>
    	</div>
    	<div class="mask2" id="mask2">
    		<div id="scan1" class="scan">
    			<img src="../image/click.png" /> <span id=""> 相册 </span>
    		</div>
    		<div id="scan2" class="scan">
    			<img src="../image/scan_off.png" /> <span id=""> 手电筒 </span>
    		</div>
    	</div>
    	<script src="../js/mui.js"></script>
    	<script type="text/javascript">
    			var scan;
    						if(window.plus) {
    				plusready();
    				
    			} else {
    				document.addEventListener('plusready', plusready, false);
    			}
    			
    			function onmarked(type, result) { //回调
                          plus.webview.currentWebview().close();//关闭当前页面
                            scan.close();//结束后关闭控件
                            //result是返回结果 } function plusready() { setTimeout(function() { scan = new plus.barcode.Barcode('mask'); scan.onmarked = onmarked; scan.start(); }, 200); //处理返回事件 /* plus.key.addEventListener('backbutton', function() { plus.webview.currentWebview().close(); }) */ } //闪光灯 document.querySelector('#scan2 img').addEventListener('click', function() { if(/scan_off.png/.test(this.src)) { this.src = "../image/scan_on.png"; scan.setFlash(true); } else { this.src = "../image/scan_off.png"; scan.setFlash(false); } }) //添加本地图片 document.querySelector('#scan1 img').addEventListener('click', function() { plus.gallery.pick(function(path) { console.log(path); console.log(JSON.stringify(path)); plus.barcode.scan(path, onmarked, function(error) { plus.nativeUI.alert(JSON.stringify(error)); }); }, function(err) { plus.nativeUI.alert('Failed: ' + err.message); }); }) //关闭窗口 function scanClose(){ plus.webview.currentWebview().close(); javascript:window.history.back(-1); } </script> </body> </html>

      1使用的话可以直接点击按钮跳转到这个页面;

      2如果需要将扫描结果显示到其他页面个人不建议传参,可以跟要显示的页面合并为一个页面;

      3plus对象只能使用hbuilder打包才可以使用;

      4公司有安卓,ios的话还是让他们做吧!!!!!!

  • 相关阅读:
    mui h5 动态实现数据的移除和数据操作完后的重新获取
    mui H5 js动态添加不同类型的数据
    hbuider 中点击就显示出一个单选的列表 ,然后后台跨域向里面动态添加数据,注意里面的格式是json object
    H-UI的前端处理验证,判断是否已经存在,比较健全的模板,可以自己添加一些校验
    spring mvc 和mybatis整合 的异常处理
    列表显示数据 但是数据的字体颜色要js添加
    hadoop环境都配置好后,当运行sbin下的start-hdfs.sh时报WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform...错误
    VisualVM初次使用BTrace功能方法步骤
    二叉树--递归实现
    二叉树--非递归实现
  • 原文地址:https://www.cnblogs.com/9608kai/p/9628550.html
Copyright © 2020-2023  润新知