就像支付宝一样扫码和AR在同一个页面里切换,我用mui.openwindow做按钮的点击跳转不行,还有扫码方法嘛
![2***@qq.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/2c3da74813e9c59ab3bec240263920f1.png)
- 发布:2018-08-10 19:49
- 更新:2018-08-11 13:39
- 阅读:2604
![2***@qq.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/2c3da74813e9c59ab3bec240263920f1.png)
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 (作者)
已经上传了demo的代码,主要的话还是按钮跳转那部分
2018-08-10 22:04
Trust
回复 2***@qq.com:上传个可以直接运行起来的示例,上传附件。。。
2018-08-10 22:54
2***@qq.com (作者)
回复 Trust:不好意思。。 已上传
2018-08-11 13:39