Qrcode生成二维码的实现(2种方式)
html代码:
<ul> <li><a href="javascript:void(0)" id="clickQrCodeBox" title="en_US"><span>点击右方扫二维码</span></a></li> <li style="background:transparent !important;margin-left: -15px"> <a href="javascript:void(0)" style="display: block"> <span id="qrCodeBox"></span> </a> </li> </ul>
js代码:
$(function(){ //获取adminTd传给获取二维码链接的函数 $.ajax({ url: "/getAdmin", type: "get", dataType: "json", success: function(res) { if(res.code == 0){ let admId = res.data.adminId getAuthUrl(admId) } } }); //获取二维码链接 var getUrl function getAuthUrl(adminId){ // console.log(adminId) if(adminId && adminId != null && adminId != ""){ $.ajax({ url: "/authWeiXin/getAuthUrl", type: "get", data: { adminId:adminId }, contentType: "application/json", dataType: "json", async:false, success: function(res) { if(res.code == 0){ getUrl = res.data var qrcode = new QRCode(document.getElementById("qrCodeBox"), {//这个是你创建的div的id,必须用原生DOM width : 45, height : 45, correctLevel: 3 }); qrcode.makeCode(getUrl); // $('#qrCodeBox').qrcode({ // render: "canvas", //也可以替换为table // width: 20, // height: 20, // text: getUrl // }); } } }); }else{ $("#clickQrCodeBox").remove() } } //渲染弹出层的大二维码 var qrCodePanel = "<div id=\"qrCodeBigBox\"></div>\n" $(document).on("click","#qrCodeBox,#clickQrCodeBox",function(){ // console.log(getUrl) if(getUrl){ layer.open({ title: '请扫描下方二维码获得授权', type: 1, skin: 'layui-layer-rim', //加上边框 area: ['312px', '412px'], //宽高 btn: ['确定'], content: qrCodePanel, success: function(layero, index){ // 如果引入qrcode.min.js用makeCode方式 var qrcode = new QRCode(document.getElementById("qrCodeBigBox"), {//这个是你创建的div的id,必须用原生的方式获取,如果用jq获取则是$("#qrCodeBigBox")[0] width : 300, height : 300, // colorDark:"red",//二维码前景色 // colorLight:"green",//二维码背景色 correctLevel: QRCode.CorrectLevel.L }); qrcode.makeCode(getUrl); //如果引入jquery.qrcode.min.js用$('#qrCodeBigBox').qrcode("http://www.jq22.com")方式; // $('#qrCodeBigBox').qrcode({ // render: "canvas", //也可以替换为table // width: 300, // height: 300, // foreground: "purple" ,//前景颜色 // background: "yellow", //背景颜色 // text: getUrl // }); }, }); } }) })
说明:
页面除了引入jq外需要引入:
<script type="text/javascript" src="${base}/res/js/jquery.qrcode.min.js"></script>//下载地址http://www.jq22.com (去搜索下载)
<script src="${base}/res/special/js/pager/comms/qrcode.min.js"></script> //下载地址https://github.com/davidshimjs/qrcodejs
里面layer.open使用layui组件
var QRErrorCorrectLevel = { L : 1, M : 0, Q : 3, H : 2};
分有几级,纠错级别越高,整体需要携带的信息越多:L级可纠正约7%错误、M级别可纠正约15%错误、Q级别可纠正约25%错误、H级别可纠正约30%错误。