一个简单的qrcode.js二维码实例

最新推荐文章于 2024-08-13 21:31:15 发布

置顶 h_2017

最新推荐文章于 2024-08-13 21:31:15 发布

阅读量2.6k

点赞数 4

分类专栏：前端技术文章标签：二维码 qrcode.js

本文链接：https://blog.csdn.net/h_2017/article/details/82804547

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

业务背景：背景比较简单就是将数据存入二维码中并生成二维码！

代码：

1. qrcode.jsp （所需要的依赖 qrcode.min.js 自行百度下载）

在jsp中引入qrcode.min.js
<script src="<%=basePath%>/libs/qrcode.min.js"></script>

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
		String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 
					request.getServerPort() + request.getContextPath();
		String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getRequestURI()+"?"+request.getQueryString();

 %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="<%=basePath%>/libs/jquery/jquery.min.js"></script>
<script src="<%=basePath%>/libs/qrcode.min.js"></script>
<script src="<%=basePath%>/common/js/config.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>二维码</title>
<style type="text/css">
	 #qrcode {
	 	 position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	} 
</style>
</head>
<body>
<input type="hidden" id='url' value='<%=url%>' readonly="readonly"/>
<div id='qrcode'></div>
</body>
<script type="text/javascript">

	var url=$('#url').val();
        //从请求路径上获取到请求参数
	var data=parent.parseURLargs(url);

        //将参数拼接到二维码需要跳转的页面url上
	var phoneUrl=parent.createURL(CONF_CONTROLLINE_PHONE_SERVIERURL,data);

	var qrcode = new QRCode(document.getElementById('qrcode'), {
	  text: phoneUrl,
	  width: 150,
	  height: 150,
	  colorDark : '#000000',
	  colorLight : '#ffffff',
	  correctLevel : QRCode.CorrectLevel.H
	});
//	qrcode.clear(); //清除二维码
//	qrcode.makeCode('new content');//设置二维码内容

</script>

</html>

2.父页面生成二维码的方法

//生成二维码
function createQrcode(proid){
//url拼时间戳防止缓存  不是必须的
	var time=new Date().getTime();
	var hz='&t='+time
	var qrcodeUrl=createURL('qrcode.jsp',proid);
	layer.open({
		type: 2,
		title:false,
		closeBtn: 2,
		anim: 1,
		shadeClose :true,
		scrollbar: false,
		area: ['200px','200px'],
		content:qrcodeUrl+hz
	});

}

截止到现在二维码已经生成！

附带上面两个相关url拼接参数和解析url上的参数的方法

//将对象解析拼到url上
function createURL(url, param) {
	console.log(param);
    var urlLink = '';

//拼单个参数
    if( typeof param =='string'){
	    
	    urlLink = url + "?proid=" + param;
//拼json对象
    }else{
    	$.each(param, function(item, key) {
	        var link = '&' + item + "=" + key;
	        urlLink += link;
	    })
    	urlLink = url + "?" + urlLink.substr(1);
    }
    return encodeURI(urlLink.replace(' ', ''));

}
//解析url上的参数  解析为json对象
function parseURLargs(url) {
    var _url=decodeURI(url);
    var result = {};
    if (_url.indexOf('?') > -1) {
        var str = _url.split('?')[1];  
        var temp = str.split('&');  
        for (var i = 0; i < temp.length; i++) {     
            var temp2 = temp[i].split('=');     
            result[temp2[0]] = temp2[1];  
        }  
    }
    return result;
}