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. golang强制类型转换

    github.com/Unknwon/com包的使用 package main import ( "fmt" "github.com/Unknwon/com" ...

  2. c语言:<tchar.h>

    头文件“<tchar.h>”作用就是为了进行ASCII码和UNICODE(wide-character)码的头文件(该头文件由微软提供): 这样我们就可以使用TCHAR.H头文件中的定义的 ...

  3. Codeforces 1203F2. Complete the Projects (hard version)

    传送门 首先对于 $b>0$ 的工作显然有个贪心,把 $b>0$ 的按 $a$ 从小到大排序 把能做的都做了,然后得到一个最大等级 剩下就是考虑 $b<0$ 的工作了,看到数据显然可 ...

  4. PanDownload/AD16/MDK5/CAD2019及2007/Dev-C++/Office2016专业版软件安装包

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 作者:struct_mooc 博客地址:https://www.cnblogs.com/stru ...

  5. Vue 路由(对路由页面编写做规范)

    前言 上一篇写了“Vue 路由拦截(对某些页面需要登陆才能访问)” 的博客,此篇是续上篇对路由页面模块化,可以看到之前的路由配置都写在main.js中,真正开发肯定不能都写在main.js,所以我们要 ...

  6. vue iview面包屑

    简单看一下vue,iview的面包屑怎么写呢? 简单的思路:1.获取到路由记录$route.matched 2.渲染 效果: 一.$route.matched 官网地址:https://router. ...

  7. 移动端 app

    上传到蒲公英

  8. 什么是RTTI

    参考:  http://www.cnblogs.com/vamei/archive/2013/04/14/3013985.html 运行时类型识别(RTTI, Run-Time Type Identi ...

  9. vue+webpack项目环境搭建

    首先安装node.js 下载地址:https://nodejs.org/en/download/ 看下是否成功安装 node -v 安装webpack,命令行npm install webpack - ...

  10. ansible的基本学习-安装和简单的配置测试

    当下有许多的运维自动化工具(配置管理),例如:ansible.saltstack.puppet.fabric等 ansible 是一种集成it系统的配置管理.应用部署.执行特定任务的开源平台,是ans ...