基于MUI框架使用HTML5实现的二维码扫描功能
发布时间：2018-03-01 17:24:31 作者：佚名 
我要评论
我要评论这篇文章主要介绍了基于MUI框架使用HTML5实现的二维码扫描功能,需要的朋友可以参考下
Barcode的一个实现案例
一、简介
Barcode模块管理条码扫描，提供常见的条码（二维码及一维码）的扫描识别功能，可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。
二、实现的效果
三、实现 代码
<!doctype html>
<html>
<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">
#bcid{
width: 100%;
height: 100%;
position: absolute;
background: #000000;
}
html, body ,div{
height:100%;
width: 100%;
}
.fbt{
color: #0E76E1;
width: 50%;
background-color: #ffffff;
float: left;
line-height: 44px;
text-align: center;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" style="color: #0E76E1;">物品二维码扫描</h1>
<span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>
</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 mui-action-back">取 消</div>
</div>
<script type="text/javascript">
scan = null;//扫描对象
mui.plusReady(function () {
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();
//打开关闭闪光灯处理
var flag = false;
document.getElementById("turnTheLight").addEventListener('tap',function(){
if(flag == false){
scan.setFlash(true);
flag = true;
}else{
scan.setFlash(false);
flag = false;
}
});
}catch(e){
alert("出现错误啦:\n"+e);
}
};
function onerror(e){
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;
}
alert( text + " : "+ result );
};
// 从相册中选择二维码图片
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);
});
}
</script>
</body>
</html>
三、做的过程中遇见的问题
a，div占满整个页面
1，此div宽高都为100%，父级元素的高度也为此(依次类推直至根节点)，或者此div的position为absolute;
2，可采用js动态设置页面宽高
var height = window.innerHeight + 'px';//获取页面实际高度
var width = window.innerWidth + 'px';
document.getElementById("bcid").style.height= height;
document.getElementById("bcid").style.width= width;
b,扫描控件有上下边距
采用填充黑色来淡化视觉上面的差异，未实际解决，（如果你解决的话，欢迎留言，谢谢）
总结
以上所述是小编给大家介绍的基于MUI框架使用HTML5实现的二维码扫描功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用户体验，感兴趣的朋友一起看看吧2025-06-18- 在HTML5中，<button>标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的<button>标签，详细介绍其属性、样式以及实际2025-06-18
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)
本文将深入剖析一段基于 HTML5 Canvas 的代码，该代码实现了图片的旋转（90 度和 180 度）以及旋转后图片的下载功能,通过对代码的解读，我们可以学习到如何利用 Canvas API2025-06-18
HTML5 getUserMedia API网页录音实现指南示例小结
本教程将指导你如何利用这一API，结合Web Audio API，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步详解,此外，还讨论了getUserMedia API的使用限制和最2025-06-16- HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中Checkbox标签的深入全面解2025-06-13
- 本实例展示了一种基于HTML5技术的图片上传功能，无需外部插件即可通过拖放图片实现上传,涉及到HTML5的拖放API和File API，以及使用CSS来增强用户界面的交互性和视觉反馈，2025-05-16
- 在HTML5和CSS中，定位(positioning)是控制元素在页面上位置的重要机制,主要有四种定位方式：静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed),2025-05-13
- Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探讨HTML5中Microdata的使用方法以及2025-04-21
在HTML语法中，表格主要通过< table >、< tr >和< td >3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧2025-04-21
最新评论