一個簡單的qrcode.js二維碼例項
阿新 • • 發佈：2018-12-11
業務背景：背景比較簡單就是將資料存入二維碼中並生成二維碼！
程式碼：
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; }
業務比較簡單程式碼寫的比較糙，歡迎指正！