2***@qq.com
2***@qq.com
  • 发布:2018-08-10 19:49
  • 更新:2018-08-11 13:39
  • 阅读:2604

一个扫码页面两种方式切换

分类:MUI

就像支付宝一样扫码和AR在同一个页面里切换,我用mui.openwindow做按钮的点击跳转不行,还有扫码方法嘛

2018-08-10 19:49 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

  • 2***@qq.com (作者)

    已经上传了demo的代码,主要的话还是按钮跳转那部分

    2018-08-10 22:04

  • Trust

    回复 2***@qq.com:上传个可以直接运行起来的示例,上传附件。。。

    2018-08-10 22:54

  • 2***@qq.com (作者)

    回复 Trust:不好意思。。 已上传

    2018-08-11 13:39

2***@qq.com

2***@qq.com (作者) - sea

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="../css/mui.min.css" rel="stylesheet" />
<title>Hello H5+</title>
<script src="../js/mui.min.js"></script>
<style>
.mui-bar .mui-pull-left .mui-icon {
padding-right: 5px;
font-size: 28px;
}

        .mui-bar .mui-btn {  
            font-weight: normal;  
            font-size: 17px;  
        }  
        .mui-bar .mui-btn-link {  
            top: 1px;  
        }  
</style>  
<script type="text/javascript">   
var ws=null,wo=null;   
var scan=null,domready=false;   
// H5 plus事件处理   
function plusReady(){   
    if(ws||!window.plus||!domready){   
        return;   
    }   
    // 获取窗口对象   
    ws=plus.webview.currentWebview();   
    wo=ws.opener();   
    // 开始扫描   
    ws.addEventListener('show', function(){   
        scan=new plus.barcode.Barcode('bcid');   
        scan.onmarked=onmarked;   
        scan.start({conserve:true,filename:'_doc/barcode/'});   
    }, false);   
    // 显示页面并关闭等待框   
    ws.show('pop-in');   

}   
if(window.plus){   
    plusReady();   
}else{   
    document.addEventListener('plusready', plusReady, false);   
}   
// 监听DOMContentLoaded事件   
document.addEventListener('DOMContentLoaded', function(){   
    domready=true;   
    plusReady();   
}, false);   
// 二维码扫描成功   
function onmarked(type, result, file){   
    switch(type){   
        case plus.barcode.QR:   
        type = 'QR';   
        break;   
        case plus.barcode.EAN13:   
        type = 'EAN13';   
        break;   
        case plus.barcode.EAN8:   
        type = 'EAN8';   
        break;   
        default:   
        type = '其它'+type;   
        break;   
    }   
    resultresult = result.replace(/\n/g, '');   

    //分析扫描结果:是URL就跳转 ,不是就提示   
    if(result.indexOf('http://')==0  || result.indexOf('https://')==0){   
        plus.nativeUI.confirm(result, function(i){   
            if(i.index == 0){   

                back();//返回上一页   
                plus.runtime.openURL(result);   
            }else{  
                back();//返回上一页   

            }   
        }, '', ['打开', '取消']);   
    } else{   
        back();//返回上一页  //扫描到的ISBN返回到的字符串  
        mui.ajax('http://192.168.1.101:6002/api/getmybook.ashx',{  
        data:{},  
        dataType:'json',//服务器返回json格式数据  
        type:'post',//HTTP请求类型  
        timeout:10000,//超时时间设置为10秒;                
        success:function(data){  
            for(var i =0;i<data.length;i++)  
            {  
                if(result ==data[i].Num)  
                {  
                    mui.openWindow("saomaresult.html?id="+data[i].ID,"saomaresult","");  
                }  
            }  
        },  

});
// window.addEventListener('refresh',function(e){
// location.reload();
// console.log("123");
// });

// plus.nativeUI.alert(result);
}
}
// 从相册中选择二维码图片
function scanPicture(){
plus.gallery.pick(function(path){
plus.barcode.scan(path,onmarked,function(error){
plus.nativeUI.alert('无法识别此图片');
});
}, function(err){
plus.nativeUI.alert('Failed: '+err.message);
});
}
mui.init();
function back(){
mui.openWindow("homepage.html","homepage","");
}

</script>   
    <style type="text/css">   
        #bcid {   
            width: 100%;   
            position: absolute;   
            top: 0px;   
            bottom: 44px;   
            text-align: center;   
        }   
        .tip {   
            color: #FFFFFF;   
            font-weight: bold;   
            text-shadow: 0px -1px #103E5C;   
        }   
        footer {   
            width: 100%;   
            height: 44px;   
            position: absolute;   
            bottom: 0px;   
            line-height: 44px;   
            text-align: center;   
            color: #FFF;   
        }   
        .fbt {   
            width: 33.33%;   
            height: 100%;   
            background-color: #1296db;   
            float: left;   
        }   
        .fbt:active {   
              -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);   
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);   
        }   
    </style>   
</head>   
<header id="header" class="mui-bar mui-bar-transparent">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">扫码</h1>  
    </header>  
<body style="background-color: #000000;">   
    <div id="bcid">   
        <div style="height:40%"></div>   
        <p class="tip">...载入中...</p>   
    </div>   
    <footer>   
        <div class="fbt" onclick="jump1()"><p style="font-size: 18px;color: #FFFFFF;">识  别1</p></div>   
        <div class="fbt" onclick="jump2()"><p style="font-size: 18px;color: #FFFFFF;">识  别2</p></div>  
        <div class="fbt" onclick="scanPicture()"><p style="font-size: 18px;color: #FFFFFF;">相  册</p></div>   
    </footer>   
     <script>  
        function jump1()  
        {  
            mui.openWindow("borrowbook.html","shibie1","");  
        }  
        function jump2()  
        {  
            mui.openWindow("borrowbook2.html","shibie2","");  
        }  
     </script>  
</body>   

</html>

2***@qq.com

2***@qq.com (作者) - sea

这是示例

该问题目前已经被锁定, 无法添加新回复