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%錯誤。