zoukankan      html  css  js  c++  java
  • mui 二维码扫描功能

    mui 扫一扫识别二维码 以及多次扫码后从结果页返回时黑屏问题解决

     扫一扫页面全部代码

    <!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" />
            <link rel="stylesheet" href="css/index.css" />
            <style type="text/css">
                .mui-bar {
                    height: 3rem;
                    line-height: 2.8rem;
                    color: #fff;
                    background: #000;
                }
                
                .mui-bar h1 {
                    color: #fff;
                }
                
                .code {
                    position: absolute;
                    top:3rem;
                    left: 0;
                     100%;
                    height: 100%;
                    background: #000000;
                    
                }
            </style>
        </head>

        <body>
            <header class="mui-bar">
                <a class="mui-pull-left" onclick="goReturn()">返回</a>
                <h1 class="mui-title">二维码扫描</h1>
                <span class="mui-spin mui-pull-right" onclick="scanPicture();">相册</span>
            </header>
            <div id="code" class="code" style="">
                <!--盛放扫描控件的div-->
            </div>
            
    <script src="js/mui.min.js"></script>

               <script type="text/javascript">
                scan = null; //扫描对象  
                mui.plusReady(function() {
                    mui.init();
                    startRecognize();
                });
                
                function startRecognize() {
                    try {
                        var filters;
                        //自定义的扫描控件样式  
                        var styles = {
                            frameColor: "#0000FF",
                            scanbarColor: "#0000FF"
                        };
                        //扫描控件构造  
                        scan = new plus.barcode.Barcode('code', filters, styles);
                        scan.onmarked = onmarked;
                        scan.onerror = onerror;
                        scan.start();
                    } catch(e) {
                        mui.alert("出现错误啦: " + e);
                    }
                };

                function onerror(e) {
                    miu.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;
                    }          
                       // plus.runtime.openURL(result);               
                      scan.cancel();//结束条码识别
                    scan.close(); //关闭条码识别控件

                plus.runtime.openURL("add.html?"+"giveId="+ result);
                };
                // 从相册中选择二维码图片   
                function scanPicture() {
                    plus.gallery.pick(function(path) {
                        plus.barcode.scan(path, onmarked, function(error) {
                            plus.nativeUI.alert("无法识别此图片");
                        });
                        
                    });
                }

                //返回关闭条码识别控件不然识别控件会一直显示
                function goReturn() {
                    scan.cancel();//结束条码识别
                    scan.close(); //关闭条码识别控件
                    mui.back();
                }                        
                
                //子页面按键返回
                document.addEventListener('plusready', function() {
                    var webview = plus.webview.currentWebview();
                    plus.key.addEventListener('backbutton', function() {
                        scan.close(); //关闭扫码条件
                        webview.canBack(function(e) {
                            if(e.canBack) {
                                webview.back();
                            } else {
                                webview.close();
                            }
                        })
                    });
                });
            </script>
        </body>

    </html>

    黑屏的原因是打开的不是一个新页面是之前缓存的页面,mui.openWindow里面的createNew默认为false,因为一直使用同一个页面这个带有缓存页面所以会出现黑屏bug

     这个createNew默认为false有时候还会导致同一个页面第二次点击时没有反应 解决方法把它变为true即可。

    以下代码意思是打开一个新页面

    mui.openWindow({
        url: "wd.html",
        createNew:true 
    });
                                        

     createNew:false //是否重复创建同样id的webview,默认为false:不重复创建,直接显示 这里设为true表示每次都创建一个新页面。

  • 相关阅读:
    hive与hbase整合
    待重写
    hive DML
    【知识强化】第六章 总线 6.1 总线概述
    【知识强化】第五章 中央处理器 5.1 CPU的功能和基本结构
    【知识强化】第四章 指令系统 4.3 CISC和RISC的基本概念
    【知识强化】第四章 指令系统 4.2 指令寻址方式
    【知识强化】第四章 指令系统 4.1 指令格式
    【知识强化】第三章 存储系统 3.6 高速缓冲存储器
    【知识强化】第三章 存储系统 3.5 双口RAM和多模块存储器
  • 原文地址:https://www.cnblogs.com/zimengxiyu/p/9996305.html
Copyright © 2011-2022 走看看