弄月
弄月
  • 发布:2017-07-04 14:02
  • 更新:2018-03-01 13:17
  • 阅读:1683

二维码扫描只有一个很小很小的而且在右侧的框

分类:HTML5+

如图。
我的代码如下:

    var scan = null;  
    var filter = [];  
    // H5 plus事件处理  
    mui.plusReady( function() {  
        filter = [plus.barcode.QR,plus.barcode.EAN13, plus.barcode.EAN8, plus.barcode.AZTEC, plus.barcode.DATAMATRIX, plus.barcode.UPCA, plus.barcode.UPCE, plus.barcode.CODABAR, plus.barcode.CODE39, plus.barcode.CODE93, plus.barcode.CODE128, plus.barcode.ITF, plus.barcode.MAXICODE, plus.barcode.PDF417, plus.barcode.RSS14, plus.barcode.RSSEXPANDED];  
        // 开始扫描  
        scan = new plus.barcode.Barcode('bcid', filter);  
        scan.onmarked = onmarked;  
        scan.start({  
            conserve: false  
        });  
    });
2017-07-04 14:02 负责人:无 分享
已邀请:
Neil_HL

Neil_HL

barcode控件的位置是你自己指定放在“bcid”里面,bcid的大小你自己指定的,当页面卡顿时也可能偶发出现你这样的情况,把完整代码demo发出来我这边才好解决

弄月

弄月 (作者)

    <!DOCTYPE html>  
    <html>  

        <head>  
            <meta charset="utf-8">  
            <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
            <title></title>  
            <link rel="stylesheet" href="css/mui.min.css" />  
            <link rel="stylesheet" href="css/style.css" />  
            <link rel="stylesheet" href="css/iconfont.css" />  
            <style type="text/css">  
                body, .mui-content{  
                    background-color: #000000;  
                }  
                .tip {  
                    color: #FFFFFF;  
                    font-weight: bold;  
                    text-shadow: 0px -1px #103E5C;  
                }  
            </style>  
        </head>  

        <body>  
            <div class="mui-content" id="bcid">  
                <div style="height:40%; width: 100%;"></div>  
                <p class="tip">...载入中...</p>  
            </div>  
            <nav class="mui-bar mui-bar-tab">  
                <a id="back" class="mui-action-back mui-tab-item"><span class="mui-icon iconfont icon-houtui"></span>  
                    <span class="mui-tab-label">取消</span></a>  
                <a id="scan" class="mui-tab-item" style="color: #f00;"><span class="mui-icon iconfont icon-xiangce"></span>  
                    <span class="mui-tab-label">相册</span></a>  
            </nav>  
            <script src="js/mui.min.js"></script>  
            <script src="js/app.js"></script>  
            <script type="text/javascript">  
                var scan = null;  
                var filter = [];  
                // H5 plus事件处理  
                mui.plusReady( function() {  
                    filter = [plus.barcode.QR,plus.barcode.EAN13, plus.barcode.EAN8, plus.barcode.AZTEC, plus.barcode.DATAMATRIX, plus.barcode.UPCA, plus.barcode.UPCE, plus.barcode.CODABAR, plus.barcode.CODE39, plus.barcode.CODE93, plus.barcode.CODE128, plus.barcode.ITF, plus.barcode.MAXICODE, plus.barcode.PDF417, plus.barcode.RSS14, plus.barcode.RSSEXPANDED];  
                    // 开始扫描  
                    scan = new plus.barcode.Barcode('bcid', filter);  
                    scan.onmarked = onmarked;  
                    scan.start({  
                        conserve: false  
                    });  
                });  
                document.getElementById("back").addEventListener('tap', mui.back);  
                document.getElementById("scan").addEventListener('tap', scanPicture);  

                // 二维码扫描成功  
                function onmarked(type, result) {  
                    switch (type) {  
                        case plus.barcode.QR:  
                            type = "QR";  
                            break;  
                        case plus.barcode.EAN13:  
                            type = "EAN13";  
                            break;  
                        case plus.barcode.EAN8:  
                            type = "EAN8";  
                            break;  
                        default:  
                            type = "其它" + type;  
                            break;  
                    }  
                    result = result.replace(/\n/g, '');  
                    mui.fire(plus.webview.currentWebview().opener(), 'scaned', {  
                        type: type,  
                        result: result  
                    })  
                    mui.back();  
                }  
                // 从相册中选择二维码图片   
                function scanPicture() {  
                    plus.gallery.pick(function(path) {  
                        plus.barcode.scan(path, onmarked, function(error) {  
                            mui.toast("无法识别此图片");  
                        });  
                    }, function(err) {  
                        //plus.nativeUI.alert("Failed: " + err.message);  
                    }, filter);  
                }  
            </script>  
        </body>  

    </html>
  • 弄月 (作者)

    @372360

    2017-07-05 09:28

  • 弄月 (作者)

    没事了, 解决了

    2017-07-05 10:26

Salazar

Salazar

应该是CSS的问题,试试我这个,我这个是OK的,有些你那边没有的代码要删掉

<!DOCTYPE html>  
<html>  
    <!--二维码扫描-->  

    <head>  
        <meta charset="utf-8" />  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
        <meta name="HandheldFriendly" content="true" />  
        <meta name="MobileOptimized" content="320" />  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />  
        <!--<link href="css/qrcode-scan.css" rel="stylesheet"></link>-->  
        <style>  
                #bcid {  
        width: 100%;  
        position: absolute;  
        top: 0px;  
        bottom: 44px;  
        text-align: center;  
    }  

    .tip {  
        color: #FFFFFF;  
        font-weight: bold;  
        text-shadow: 0px -1px #103E5C;  
    }  
        </style>  
    </head>  

    <body style="background-color: #000000;">  
        <header class="mui-bar mui-bar-nav myColor" style="padding-top: 10px;">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #ffffff;"></a>  
            <h1 id="title" class="mui-title" style="color: #ffffff;">二维码扫描</h1>  
        </header>  

        <div class="mui-content">  
            <div id="bcid">  
                <div style="height:40%"></div>  
                <p class="tip">Loading...</p>  
            </div>  
        </div>  

        <script type="text/javascript" src="../js/common.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            var sData,  
                sTitle,  
                currentWebview,  
                opener,  
                scan,  
                domready;  
            mui.plusReady(function() {  
                //获取传递过来的值,设置顶部标题  
                sData = plus.webview.currentWebview();  
                //单据信息返回的顶部标题和type  
                openedTitle = sData.openedTitle;  
                sTitle = sData.sendTitle;  
                if(typeof(openedTitle) != 'undefined') {  
                    sTitle = openedTitle;  
                }  
                var title = document.getElementById("title");  
                title.innerHTML = sTitle;  
            });  
            // 开始扫描,H5 plus事件处理   
            function startScan() {  
                if(currentWebview || !window.plus || !domready) {  
                    return;  
                }  
                // 获取窗口对象   
                currentWebview = plus.webview.currentWebview();  
                opener = currentWebview.opener();  
                // 开始扫描   
                currentWebview.addEventListener('show', function() {  
                    scan = new plus.barcode.Barcode('bcid');  
                    scan.onmarked = onmarked;  
                    scan.start({  
                        conserve: true,  
                        filename: '_doc/barcode/'  
                    });  
                }, false);  
                // 显示页面并关闭等待框   
                currentWebview.show('pop-in');  
            }  
            if(window.plus) {  
                startScan();  
            } else {  
                document.addEventListener('plusready', startScan, false);  
            }  
            // 监听DOMContentLoaded事件   
            document.addEventListener('DOMContentLoaded', function() {  
                domready = true;  
                startScan();  
            }, false);  

            // 二维码扫描成功的回调函数  
            function onmarked(type, result, file) {  
                console.log("0956type=" + type + ",result=" + result + ",file=" + file);  
                //跳转到单据信息界面  
                var sendType = sData.type;  
                var openedType = sData.openedType;  
                if(typeof(openedType) != 'undefined') {  
                    sendType = openedType;  
                }  
                mui.openWindow({  
                    url: "bills-info.html",  
                    id: "bills-info",  
                    extras: {  
                        result: result,  
                        sendTitle: sTitle,  
                        type: sendType,  
                        tag: "scan"  
                    },  
                    createNew: true,  
                    waiting: {  
                        title: 'Loading...', //等待对话框上显示的提示内容  
                    },  
                    show:{  
                        autoShow:false//页面loaded事件发生后自动显示,默认为true(数据加载完成后才关闭加载动画,改善使用效果)  
                    }  
                });  
                console.log("1502result=" + result + "title=" + sTitle + "type=" + sendType);  
                //扫描完成后必须关闭当前页面的barcode,防止返回后无法重新扫描  
                scan.close();  
            }  

            //监听物理返回按键,返回主页  
            mui.back = function() {  
                mui.openWindow({  
                    url: "home.html",  
                    id: "home.html",  
                    createNew: true //创建同样id的webview,相当于重新加载页面  
                });  
                scan.close();  
            }  
        </script>  

    </body>  

</html>
  • 弄月 (作者)

    我试试

    2017-07-05 10:23

弄月

弄月 (作者)

解决了, 其实是JS的问题

  • kay

    你好,请问你的问题是怎么解决的?我也遇到了同样的问题

    2018-03-01 13:14

  • 弄月 (作者)

    回复 kay:看楼下

    2018-03-01 13:17

弄月

弄月 (作者)

@kay

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
        <title></title>  
        <link rel="stylesheet" href="css/mui.min.css" />  
        <link rel="stylesheet" href="css/iconfont.css" />  
        <style type="text/css">  
            #bcid {  
                width: 100%;  
                position: absolute;  
                top: 0px;  
                bottom: 50px;  
                text-align: center;  
            }  

            .tip {  
                color: #FFFFFF;  
                font-weight: bold;  
                text-shadow: 0px -1px #103E5C;  
            }  
        </style>  
    </head>  

    <body style="background-color: #000000;">  
        <div class="mui-content">  
            <div id="bcid">  
                <div style="height:40%"></div>  
                <p class="tip">...载入中...</p>  
            </div>  
            <nav class="mui-bar mui-bar-tab">  
                <a id="back" class="mui-action-back mui-tab-item">  
                    <span class="mui-icon mui-icon-close"></span>  
                    <span class="mui-tab-label">取消</span>  
                </a>  
                <a id="scan" class="mui-tab-item" style="color: #ffb730;">  
                    <span class="mui-icon iconfont icon-pengyouquan"></span>  
                    <span class="mui-tab-label">相册</span>  
                </a>  
            </nav>  
        </div>  

        <script src="js/mui.min.js"></script>  
        <script src="js/app.js"></script>  
        <script src="js/immersed.js"></script>  
        <script type="text/javascript">  
            var scan = null;  
            // H5 plus事件处理  
            mui.plusReady(function() {  
                // 获取窗口对象  
                ws = plus.webview.currentWebview();  
                // 开始扫描  
                ws.addEventListener('show', function() {  
                    // 开始扫描  
                    scan = new plus.barcode.Barcode('bcid', '', barcodeStyle);  
                    scan.onmarked = onmarked;  
                    scan.start({  
                        conserve: false  
                    });  
                }, false);  
                var barcodeStyle = {  
                    frameColor: "#ffbf17",  
                    scanbarColor: "#ffbf17"  
                }  
            });  
            document.getElementById("back").addEventListener('tap', mui.back);  
            document.getElementById("scan").addEventListener('tap', scanPicture);  

            // 二维码扫描成功  
            function onmarked(type, result) {  
                switch(type) {  
                    case plus.barcode.QR:  
                        type = "QR";  
                        break;  
                    case plus.barcode.EAN13:  
                        type = "EAN13";  
                        break;  
                    case plus.barcode.EAN8:  
                        type = "EAN8";  
                        break;  
                    default:  
                        type = "其它" + type;  
                        break;  
                }  
                result = result.replace(/\n/g, '');  
                mui.fire(plus.webview.currentWebview().opener(), 'scaned', {  
                    type: type,  
                    result: result  
                })  
                mui.back();  
            }  
            // 从相册中选择二维码图片   
            function scanPicture() {  
                plus.gallery.pick(function(path) {  
                    plus.barcode.scan(path, onmarked, function(error) {  
                        mui.toast("无法识别此图片");  
                    });  
                }, function(err) {  
                    //plus.nativeUI.alert("Failed: " + err.message);  
                });  
            }  
        </script>  
    </body>  

</html>
  • kay

    我也是这么写的代码,可是在华为的机器上就不行,我再看看吧,谢谢你

    2018-03-01 13:21

该问题目前已经被锁定, 无法添加新回复