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. Dango之模版系统

    1.模板渲染 可以传列表,字典,对象等 {{ 变量 }} {% 逻辑 %} -- 标签 urls.py path('login/', views.login), views.py def login( ...

  2. JDK安装及JAVA环境变量配置（JDK1.8版本）

    一:JDK官网下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk12-downloads-5295953.html JD ...

  3. CSS(上)

    目录 CSS(上) 什么是CSS? CSS的优点 CSS的引入方式 行内样式 内部样式 外部样式 CSS的两大特性 CSS选择器 基本选择器 组合选择器 更多选择器 选择器的优先级 CSS(上) 什么 ...

  4. 如何让 node 运行 es6 模块文件，及其原理

    如何让 node 运行 es6 模块文件,及其原理 最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机 ...

  5. Codeforces 1194D. 1-2-K Game

    传送门 先考虑只能走 $1,2$ 步的情况,设 $p[i]$ 表示当 $n=i$ 时先手是否必胜 自己手玩一下发现 $p$ 就是 $011011011...011$ 这样循环(下标从 $0$ 开始,其 ...

  6. sql server lower函数

    lower()函数 --将大写字符数据转换为小写字符数据 语法:lower(character_expression) --character_expression是指定要进行转换的字符串

  7. vue运行碰到的问题

    Expected indentation of 0 spaces but found 2 解决方案: 文件中加入"indent": ["off", 2]就可以了 ...

  8. Linux shellcode sample

    Linux shellcode sample HelloWorld.nasm ;HelloWorld.asm ;Author: Kul Subedi global _start section .te ...

  9. CF407D Largest Submatrix 3

    cf luogu 被自己菜到自闭了/kk 既然是子矩阵,那么惯用套路为枚举矩阵上下边界,然后\(O(n)\)扫描求解.这题里要从左往右枚举右端点,然后看左端点最多能放到哪,那就对于每个数求出在上下边界 ...

  10. SpringCloudGateWay之限流

    一.引言在高并发系统中,经常需要限制系统中的电流化妆.一方面是防止大量的请求使服务器过载,导致服务不可用,另一方面是防止网络攻击.常用的限流方法,如hystrix.应用线程池隔离.超过线程池的负载和g ...