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. rabbitmq五种消息模型整理

    目录 0. 配置项目 1. 基本消息模型 1.1 生产者发送消息 1.2 消费者获取消息(自动ACK) 1.3 消息确认机制(ACK) 1.4 消费者获取消息(手动ACK) 1.5 自动ACK存在的问 ...

  2. python中format格式化函数

    http://www.runoob.com/python/att-string-format.html

  3. [Next] 五.next自定义内容

    自定义 head 这是默认的 head 这样的 head 并不能满足我们的需求.next 公开了一个内置组件,用于将元素追加到<head>标签的.我们可以通过这个自定义 head 新建 c ...

  4. iis 8.0 HTTP 错误 404.3 server 2012

    最近在学习WCF,发现将网站WCF服务放到IIS上时不能正常运行,从网上搜了一下: 解决方法,以管理员身份进入命令行模式,运行: "%windir%\Microsoft.NET\Framew ...

  5. 超详细思路讲解SQL语句的查询实现，及数据的创建。

    最近一直在看数据库方面的问题,总结了一下SQL语句,这是部分详细的SQL问题,思路讲解: 第一步:创建数据库表,及插入数据信息 --Student(S#,Sname,Sage,Ssex) 学生表 CR ...

  6. LInux安装MySQL5.7.24详情

    安装包下载 MySQL 的官网下载地址:http://www.mysql.com/downloads/ 我安装的是5.7版本 第二步: 选择:TAR (mysql-5.7.24-el7-x86_64. ...

  7. 韦东山嵌入式Linux学习笔记07--Nandflash

    常用的flash有两种, Norflash和Nandflash, 前几年市场上的产品比较常见的方案时Norflash和Nandflash搭配使用, 因为norflash比较昂贵,相同的容量norfla ...

  8. C# 类的继承和访问

    学习笔记------类的继承和访问: class MyBaseClass { public void PrintSun(){ Console.WriteLine("base111111111 ...

  9. Flow-based model

    文章1:  NICE: NON-LINEAR INDEPENDENT COMPONENTS ESTIMATION 文章2:Real-valued Non-Volume Preserving (Real ...

  10. js 点击不同li 切换颜色

    html <div> <li " onclick='addColor(this.id)'> 会议简介 </li> <li " onclic ...