基于MUI框架的使用HTML5+实现的二维码扫描功能

Barcode的一个实现案例

一、简介

Barcode模块管理条码扫描，提供常见的条码（二维码及一维码）的扫描识别功能，可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。博客有更新，修复了评论下面提出的一些问题，最新地址是 MUI 结合 HTML5+ 实现的二维码扫描功能 (更好的阅读体验，请移步我的个人博客)

二、实现的效果

三、实现代码 (完整源代码)

<!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,扫描控件有上下边距

采用填充黑色来淡化视觉上面的差异，未实际解决，（如果你解决的话，欢迎留言，谢谢）

四、后来的补充

1，针对评论提出的问题，优化了相关的代码，博客地址MUI 结合 HTML5+ 实现的二维码扫描功能。

2，主要优化的点：模块出现黑屏的问题，样式的问题，闪退等

基于MUI框架的使用HTML5+实现的二维码扫描功能相关推荐

MUI 结合 HTML5+ 实现的二维码扫描功能
扫码登录的实现原理原理解释: 接下来就是对于这个服务的详细实现.首先,大概说一下原理:用户打开网站的登录页面的时候,向浏览器的服务器发送获取登录二维码的请求.服务器收到请求后,随机生成一个uuid, ...
使用安卓实现一个二维码扫描功能（基于Android Studio）
二维码扫描使用很广泛,在这里记录二维码扫描的功能,需要导入第三方的类库. 步骤一:在项目中导入第三方的类库,导入方法:往Android Studio中导入第三方类库文件这篇博客中有详细记录步骤二:定 ...
Android 基于google Zxing实现二维码条形码扫描，仿微信二维码扫描效果
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 转载请注 ...
Android 基于Zxing二维码扫描的光速实现
Android 十分钟光速实现二维码扫描前言在项目中要使用到二维码的相关内容,我们第一时间想到的是使用大名鼎鼎的zxing或者ZBar开源框架: github-zxing官方库的地址 github ...
Android 基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新 ...
基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新 ...
基于MUI框架的HTML5+的二维码扫描实现
Barcode的一个实现案例一.简介 Barcode模块管理条码扫描,提供常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入.通过plus.ba ...
基于JavaSSM和微信小程序的智能二维码门禁管理系统
目录 1 引言 2 2 系统需求分析 2 2.1开发环境 2 2.2关键技术 2 2.2.1 Spring 框架 2 2.2.2 Spring MVC 框架 3 2.2.3 Mybatis 3 2.2 ...
基于SpringBoot+Gradle+Zxing+JQuery（原生JS）开发条形码/二维码扫描工具，且采用原生JS调用浏览器摄像头
零. 近日在做课设的时候,碰到一个比较有趣的玩意.就是在应用上添加扫描二维码/条形码的技术. 下面,介绍一下本文采用的一些框架: SpringBoot+Gradle+JPA为框架的后端系统 JavaS ...

基于MUI框架的使用HTML5+实现的二维码扫描功能

基于MUI框架的使用HTML5+实现的二维码扫描功能相关推荐

最新文章

热门文章