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%错误。