MUI框架使用HTML5实现二维码扫描功能-html教程-PHP中文网

首页

web前端

html教程

MUI框架使用HTML5实现二维码扫描功能

小云云

Mar 03, 2018 am 10:11 AM

h5html5

一、简介

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 ,p{  
            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>  
    <p id="bcid">     
         <!--盛放扫描控件的p-->          
    </p>  
    <p class="mui-bar mui-bar-footer" style="padding: 0px;">  
        <p class="fbt" onclick="scanPicture();">从相册选择二维码</p>  
        <p class="fbt mui-action-back">取　 消</p>  
    </p>  
    <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，p占满整个页面

1，此p宽高都为100%，父级元素的高度也为此(依次类推直至根节点)，或者此p的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,扫描控件有上下边距

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

相关推荐：

HTML5混合开发二维码扫描以及调用本地摄像头实例教程

H5制作二维码扫描和解析的代码实例

Html5实现二维码扫描并解析 _html5教程技巧

以上是MUI框架使用HTML5实现二维码扫描功能的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

See all articles