Dcloud(HbuilderX打包的APP)实现扫一扫功能带参数跳转

2020-06-06 建站知识 浏览 手机预览
文章来源:http://www.imtr.cn/html/n256.html

本文写出了扫码并跳转的代码,直接保存使用吧。

demo只有在真机运行才能起作用哦

引入Dcloud的js和css(右键保存到本地)common.css    mui.min.js    common.js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>扫一扫</title>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="mui.min.js"></script>
<link rel="stylesheet" href="common.css" type="text/css" charset="utf-8"/>
<script type="text/javascript">
var ws=null,wo=null;
var scan=null;
// H5 plus事件处理
function plusReady(){
	// 获取窗口对象
	ws=plus.webview.currentWebview();
	nv=ws.getTitleNView();
	wo=ws.opener();
	// 开始扫描		
	ws.addEventListener('show', function(){
		scan=new plus.barcode.Barcode('bcid',[plus.barcode.QR,plus.barcode.EAN8,plus.barcode.EAN13],{frameColor:'#00FF00',scanbarColor:'#00FF00'});
	    scan.onmarked=onmarked;
	    scan.start({conserve:true,filename:'_doc/barcode/'});
		createSubview();
	}, false);
	// 显示页面并关闭等待框
    ws.show();
}
document.addEventListener('plusready', plusReady, false);

// 二维码扫描成功
function onmarked(type, result, file){
    switch(type){
    	case plus.barcode.QR:
    	type = 'QR';//二维码
    	break;
    	case plus.barcode.EAN13:
    	type = 'EAN13';//13位条形码
    	break;
    	case plus.barcode.EAN8:
    	type = 'EAN8';//8位条形码
    	break;
    	default:
    	type = '其它'+type;//其它
    	break;
    }
		
	//判断是不是网址
	if(result.indexOf('http://')==0  || result.indexOf('https://')==0){
		//是网址,直接跳转
		//plus.runtime.openURL(result);//调用手机浏览器跳转
		
		/*		
		mui.openWindow({//APP内带参数跳转
            url: 'a.html',//把结果传递给指定页面
            id: 'deok',
            extras:{
              result:result
            }
        });
		*/
		
		//plus.webview.open(result,'id');//APP内不带参数直接跳转
		
        //plus.webview.currentWebview().hide();//关闭窗口
		
        //plus.webview.currentWebview().close('none');//先隐藏再关闭窗口,否则页面会闪一下再关闭
		
		//plus.webview.close("deok");//关闭指定id的窗口
		
	} else{
		//不是网址,打印出结果
		alert(result);
		scan.start({conserve:true, filename:'_doc/barcode/'});//扫描出结果后自动重新扫描
	}
	
	//switchFlash();//开/关闪光灯
}
	

// 开/关闪光灯 
var bFlash = false;
var AVCaptureDevice=null;
var Camera=null;
function switchFlash(){//控制闪关灯
	bFlash = !bFlash;
	scan.setFlash(bFlash);
}

// 创建闪光灯按钮子窗口
var view = null;
function createSubview(){
	view = new plus.nativeObj.View('nbutton', {
		bottom: '20px',
		left: '30%',
		width: '40%',
		height: '44px'
	}, [{
		tag: 'rect',
		id: 'rect',
		rectStyles: {
			radius: '8px',
			color: 'rgba(255,0,0,0.8)'
		}},{
		tag: 'font',
		id: 'text',
		text: '开启闪光灯',
		textStyles: {
			color: '#FFFFFF'
		}
	}]);
	// 处理点击事件
	view.addEventListener('click', function(e){
		switchScan();//改变按按钮文字
	}, false);
	ws.append(view);
}

var bScan = false;
function switchScan(){
    if(bScan){
    	switchFlash();
    	view&&(view.drawText('开启闪光灯', {}, {color:'#FFFFFF'}, 'text'));
    }else{
    	switchFlash();
    	view&&(view.drawText('关闭闪光灯', {}, {color:'#FFFFFF'}, 'text'));
    }
    bScan=!bScan;
}
</script>
<style type="text/css">
#bcid {
	width: 100%;
	position: absolute;
	top: 0px;
	bottom: 0px;
	text-align: center;
}
.tip {
	color: #FFFFFF;
	font-weight: bold;
	text-shadow: 0px -1px #103E5C;
}
</style>
</head>
<body style="background-color:#000000;">
  <div id="bcid">
    <div style="height:40%"></div>
    <p class="tip">...载入中...</p>
  </div>
</body>
</html>

如果扫码后需要传递参数到a.html,那么a.html的代码如下

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>扫码结果</title>
    <style type="text/css"></style>
  </head>
  
  <body>
    <div>下面是扫码页面传过来的数据</div>
    <div><p id="data"></p></div>
    <script type="text/javascript">
	if (window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }
      function plusready() {
        var w = plus.webview.currentWebview();
        var result = w.result;//获取传递过来的参数
        document.querySelector('#data').innerText = result;//打印结果
		//plus.webview.close("deok");
		//window.location.href=result;//跳转到目标网址
        //处理返回事件
        plus.key.addEventListener('backbutton',function() {plus.webview.currentWebview().close();})
      }
	</script>
  </body>

</html>


原文地址:http://www.imtr.cn/html/n256.html
  • 如果你的问题还没有解决,可以点击页面右侧的“ ”,站长收到问题后会尽快回复解决方案到你的邮箱。
  • 创造始于问题,有了问题才会思考,有了思考,才有解决问题的方法,才有找到独立思路的可能。 —— 陶行知