你的微笑
你的微笑
  • 发布:2017-11-08 10:09
  • 更新:2019-08-22 17:56
  • 阅读:5378

Barcod二维码扫描及其结果在webview中的信息的传递

分类:HTML5+
mui

图1为二维码效果图,图二是扫码后返回结果并关闭扫码页面。
直接上代码
<!doctype html>
<html>

<head>  
    <meta charset="utf-8">  
    <meta http-equiv="Access-Control-Allow-Origin" content="*">  
    <meta http-equiv="content-security-policy">  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <link href="../../WEB-INF/plug/mui/css/mui.min.css" rel="stylesheet" />  
    <script src="../../WEB-INF/plug/mui/js/mui.min.js"></script>  
    <script type="text/javascript" src="../../WEB-INF/plug/js/security.js"></script>  
    <script type="text/javascript" src="../../WEB-INF/plug/js/common.js"></script>  
    <style type="text/css">  
        #bcid {  
            width: 100%;  
            height: 100%;  
            position: absolute;  
            background: #000000;  
        }  

        html,  
        body,  
        div {  
            height: 100%;  
            width: 100%;  
        }  

        .fbt {  
            color: #ffffff;  
            width: 50%;  
            float: left;  
            line-height: 44px;  
            text-align: center;  
        }  
    </style>  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav" style="background-color: rgba(221, 221, 221, 0);z-index: 99999;">  

        <h1 class="mui-title" style="color: #ffffff;">二维码扫描</h1>  
        <span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>  
    </header>  

    <div id="bcid">  
        <!--盛放扫描控件的div-->  
    </div>  

    <div style="background-color: rgba(221, 221, 221, 0);z-index: 99999" 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">  
        var height = window.innerHeight + 'px'; //获取页面实际高度    
        var width = window.innerWidth + 'px';  
        document.getElementById("bcid").style.height = height;  
        document.getElementById("bcid").style.width = width;  

        scan = null; //扫描对象    
        mui.plusReady(function() { //通过mui初始化扫描  
            mui.init();  
            setTimeout("startRecognize()", 300)  

        });  

        function startRecognize() { //开启扫描  
            try {  
                var filter;  
                //自定义的扫描控件样式    
                var styles = {  
                    frameColor: "#29E52C",  
                    scanbarColor: "#29E52C",  
                    background: "rgba(255,255,255,-20)"  
                }  
                //扫描控件构造    
                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) {  
                mui.toast("出现错误啦:\n" + e)  
            }  
        };  

        function onerror(e) { //错误弹框  
            alert(e);  
        };  

        function onmarked(type, result) { //这个是扫描二维码的回调函数,type是扫描二维码回调的类型  
            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;  
            }   
            smresult(result);  
        };  

        // 从相册中选择二维码图片     
        function scanPicture() { //可以直接识别二维码图片  
            plus.gallery.pick(function(path) {  
                plus.barcode.scan(path, onmarked, function(error) {  
                    //plus.nativeUI.alert("无法识别此图片");  
                    mui.toast("无法识别此图片");  
                });  
            }, function(err) {  
                plus.nativeUI.alert("Failed: " + err.message);  
            });  
        }  
        //关闭扫码页面  
        function closeSm() {  
            scan.close();  
            plus.webview.currentWebview().close('none');  
        }  
        //结果处理  
        function smresult(result) {  
            var bType = getBarcodeType(result);//二维吗类型  
            var type = localStorage.getItem("type");  
            if(type == "addfile") {  
                //添加档案扫码处理  

                if(bType==TMLX_JDCDA||bType==TMLX_JSZDA) {  
                    var tmnr = result;  
                    tmnr = getUrlp(tmnr);  
                    var params = "{" + "'method':'getTmxx'," + "'tmnr':" + "'" + tmnr + "'" + "}"  
                    var datajson = eval('(' + getData(params) + ')');  
                    var str = '<li><input class="file-num" value="' + datajson.obj.FILE_NUMBER + '" type="text"   /><i onclick="remove(this)">╳</i></li>'  
                    var wn = plus.webview.currentWebview(); //获取当前窗口的WebviewObject对象,即B   
                    var wvA = wn.opener(); //获取当前窗口的创建者,即A    
                    wvA.evalJS("addNew('" + str + "')"); //执行父窗口中的方法  A中的addNew方法    
                    plus.webview.currentWebview().close(); //扫码成功,关闭当前webview  
                } else {  
                    mui.toast("请扫描档案二维码")  
                    scan.start();  
                }  
            } else if(type == "getgezi") {  
                //扫码格子获取格子信息  
                if(bType==TMLX_JDCDA||bType==TMLX_JSZDA) {  
                gezism(result);  
                var wn = plus.webview.currentWebview(); //获取当前窗口的WebviewObject对象,即B   
                var wvA = wn.opener(); //获取当前窗口的创建者,即A    
                wvA.evalJS("addGeZi('" + str + "')"); //执行父窗口中的方法  A中的addNew方法    
                plus.webview.currentWebview().close(); //扫码成功,关闭当前webview  
                localStorage.setItem("ifFrist", "none"); //设置不是首次调用  
                }else{  
                    mui.toast("请扫描格子二维码")  
                    scan.start();  
                }  
            } else if(type == "sys") {  

                if(bType == TMLX_GEZI) {  
                    /**条码类型:格子*/  
                    var btnArray = ['取消', '确认'];  
                    mui.confirm("是否进行入库操作?", "提示", btnArray, function(e) {  
                        if(e.index == 1) {  

                            localStorage.setItem("ifFrist", "none"); //设置不是首次调用避免重复扫码  
                            localStorage.setItem("sysSign", "true");  
                            var str =gezism(result);  
                            localStorage.setItem("str", str);  
                            var webview = mui.openWindow({  
                                url: "../rk/rk.html",  
                                id: "rk.html",  
                                waiting: {  
                                    autoShow: false //自动显示等待框,默认为true  
                                },  
                                createNew: true  
                            });  
                            setTimeout("plus.webview.currentWebview().close()", 300)//扫码成功,关闭当前webview  

                        } else {  
                            scan.start();  
                        }  
                    });  
                } else if(bType == TMLX_JDCDA) {  
                    /**条码类型:机动车档案*/  
                    alert("条码类型:机动车档案");  
                    scan.start();  
                } else if(bType == TMLX_JSZDA) {  
                    /**条码类型:驾驶证档案*/  
                    alert("条码类型:驾驶证档案");  
                    scan.start();  
                } else if(bType == TMLX_DAG) {  
                    /**条码类型:档案柜*/  
                    alert("条码类型:档案柜");  
                    scan.start();  
                }  

            }  

        }  
        //格子扫码操作  
        function gezism(result) {  
            var tmnr = result;  
            tmnr = getUrlp(tmnr);  
            var params = "{" + "'method':'getTmxx'," + "'tmnr':" + "'" + tmnr + "'" + "}"  
            var datajson = eval('(' + getData(params) + ')');  
            //获取格子最大序号  
            var param2 = "{" + "'method':'getDaccxh'," + "'gzcode':" + "'" + datajson.obj.GZCODE + "'" + "}"  
            var dataxh = eval('(' + getData(param2) + ')');  
            var str = '<li><i>编码:' + datajson.obj.GZCODE + '</i><i>已存数:' + dataxh.obj.xh + '</i></li>';  
            str += '<li><i>行:' + datajson.obj.ROS + '</i><i>列:' + datajson.obj.COLS + '</i><i>面:' + datajson.obj.ASPECT + '</i></li>'  
            localStorage.setItem("gzcode", datajson.obj.GZCODE); //gz保存code  
            return str;  
        }  
    </script>  
</body>  

</html>

1 关注 分享
5***@qq.com

要回复文章请先登录注册

你的微笑

你的微笑 (作者)

回复 9***@163.com :
不会吧?为啥卡死?
2019-08-22 17:56
9***@163.com

9***@163.com

扫码界面卡死。。。
2019-07-16 18:28