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. 如何實現输入字符串This is an Apple on eBay 输出 Siht si na Elppa no yAbe

    <?php $str = "This is an Apple on eBay"; //定义字符串 $len = strlen($str); //字符串长度 $sup = [] ...

  2. shell脚本 自启动tomcat，nginx

    分为2步走 1. 脚本文件 : /usr/local 2. crontab -e : /5 * * * /bin/sh /usr/local/restart.sh 注意事项:可能用户权限会影响脚本的部 ...

  3. Thinkphp5.0快速入门笔记（3）

    学习来源与说明 https://www.kancloud.cn/thinkphp/thinkphp5_quickstart 测试与部署均在windows10下进行学习. 快速入门第三节 获取当前的请求 ...

  4. 使用TableSnapshotInputFormat读取Hbase快照数据

    根据快照名称读取hbase快照中的数据,在网上查了好多资料,很少有资料能够给出清晰的方案,根据自己的摸索终于实现,现将代码贴出,希望能给大家有所帮助: public void read(org.apa ...

  5. Dubbo消费方服务调用过程源码分析

    参考:dubbo消费方服务调用过程源码分析dubbo基于spring的构建分析Dubbo概述--调用过程dubbo 请求调用过程分析dubbo集群容错机制代码分析1dubbo集群容错策略的代码分析2d ...

  6. wpf ActualWidth为0解决方法

    LocalNewsControl() { var descriptor = DependencyPropertyDescriptor.FromProperty(ActualWidthProperty, ...

  7. mysql复习(2)

    一.数据定义: SQL数据的定义包括模式的定义.表定义.视图定义和索引的定义. 1.基本的模式定义情况如下表. 2.一个关系数据库管理系统的实例中可以创建多个数据库,一个数据库中可以建立多个模式,一个 ...

  8. Vue 路由拦截（对某些页面需要登陆才能访问）

    前言 做项目的时候有个需求,就是发现没有登录,竟然也可以进入我的主页,这样肯定是不能容忍的.于是就要让他进入主页的时候,加个判断是否有登录,若没有登录,则返回登录界面,登录成功后还可以跳转到之前进入的 ...

  9. 3、Eclipse 的SVN 插件

    3.Eclipse 的SVN 插件 3.1 简介 Subversive Eclipse 团队开发的SVN 插件. Subclipse Apache 的SVN 团队开发的Eclipse 插件. 3.2 ...

  10. shell脚本if判断语句报错[: too many arguments的两种原因

    shell脚本,if判断语句报错[: too many arguments 我遇到过两种情况: 1.第一中情况就是网上大家说的,字符串变量中可能存在空格,shell解析时将其认为是多个参数,再进行判断 ...