基于mui实现扫码功能

最新推荐文章于 2022-12-13 16:44:54 发布

离别又见离别

最新推荐文章于 2022-12-13 16:44:54 发布

阅读量588

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_43861630/article/details/103851460

版权

<!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" />-->
        <link rel="stylesheet" href="../css/default.css">
    <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;
                    height: 44px;
                    padding-right: 10px;
                    padding-left: 10px;
                    border-bottom: 0;
                    background-color: #f7f7f7;
                    -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;
                }
                .mui-pull-right {
                        float: right;
                }
                .mui-bar-footer {
                        bottom: 0;
                }
        #bcid{
             width: 100%;
             height: 80%;
             position: absolute;
                         top:1rem;
                         z-index: 1;
         }
         .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;">
      <span class="mui-pull-right" style="padding:.5rem 0;" id="turnTheLight">开灯</span>
    </header>
        <div>
             <div id="bcid">
         <!--盛放扫描控件的div-->
            </div>
        </div>
   

    <div class="mui-bar mui-bar-footer" style="padding: 0px;">
        <div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
        <div class="fbt" onclick="scanClose();">取　 消</div>
    </div>
</body>
<script src="../js/mui.min.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]; 
                                /* window.location.href = "single_code.html?id="+result; */
                /* alert( text + " : "+ result+'111' );//扫描完毕后的回调 */

        };
                //关闭控件
                function scanClose(){
                    scan.close();
                    javascript:window.history.back(-1);
                    
                }
                
</script>
</html>

离别又见离别

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于mui实现扫码功能

<!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, m...
复制链接

扫一扫