本文用于推薦一款很好用的二維碼生成插件QRCode.js，測(cè)試使用方便且簡(jiǎn)單滤灯。
其實(shí)官方就有很好的文檔坪稽，這里只是做一個(gè)我工作的記錄和總結(jié)。

@version1.0——2018-11-22——?jiǎng)?chuàng)建《前端QRCode.js生成二維碼插件》
@version1.1——2019-01-20——修改《前端QRCode.js生成二維碼插件（解決長(zhǎng)字符串顯示模糊問(wèn)題）》

• 將注意事項(xiàng)提出不可忽略的問(wèn)題
• 添加長(zhǎng)字符串顯示模糊力喷，手機(jī)二維碼不能識(shí)別的問(wèn)題
• 添加解決小米8手機(jī)不顯示二維碼的問(wèn)題

?burning_韻七七

• 目錄
  • 介紹
  • 使用
    • 1.引入js文件
    • 2.定義承載二維碼標(biāo)簽
    • 3.js調(diào)用
    • 4.頁(yè)面預(yù)覽
  • 參數(shù)API
    • QRCode參數(shù)
    • Option參數(shù)
    • API接口
  • 實(shí)踐
    • 生成二維碼刽漂，微信QQ識(shí)別打開網(wǎng)頁(yè)
  • 不可忽略的問(wèn)題（踩坑）
    • url的中文編碼問(wèn)題
    • 長(zhǎng)字符串的顯示模糊問(wèn)題
      • 問(wèn)題分析
      • 解決思路
      • 實(shí)踐真知
        • 1. 二維碼難以識(shí)別
        • 2. 觀察生成的結(jié)構(gòu)
        • 3. 放大倍數(shù)
        • 4. css縮小倍數(shù)
        • 5. 解決小米8手機(jī)不顯示二維碼的問(wèn)題
        • 此案例完整代碼

介紹

• 這個(gè)插件主要使用canvas實(shí)現(xiàn)的演训。
• 原生代碼不需要依賴jquery弟孟，或者zepto。
• 兼容性也很好样悟，IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.
• 前端開發(fā)者倉(cāng)庫(kù)官網(wǎng)
• GitHub地址

使用

1.引入js文件

<script src="qrcode.js"></script>

2.定義承載二維碼標(biāo)簽

<div id="qrcode"></div>

3.js調(diào)用

簡(jiǎn)單調(diào)用

new QRCode(document.getElementById('qrcode'), 'your content');

設(shè)置參數(shù)調(diào)用

下面會(huì)有參數(shù)詳解

var qrcode = new QRCode('qrcode', {
    text: 'your content',
    width: 256,
    height: 256,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H
});

4.頁(yè)面預(yù)覽

這樣就很簡(jiǎn)單的生成了一個(gè)二維碼

qrcode.jpg

參數(shù)API

QRCode參數(shù)

new QRCode(element, option)

Option參數(shù)

API接口

var qrcode = new QRCode('qrcode',{
    'text':'content',
    'width':256,
    'height':256,
    'colorDark':'red',
    'colorLoght':'transparent',
    'correctLevel':QRCode.CorrectLevel.H
})


qrcode.clear();
qrcode.madkCode('new content');

實(shí)踐

生成二維碼陈症，微信QQ識(shí)別打開網(wǎng)頁(yè)

需求

• 前端根據(jù)傳的不同的參數(shù)蔼水，在頁(yè)面生成一個(gè)二維碼
• 由端分享到QQ、QQ空間录肯、微信趴腋、朋友圈的時(shí)候，截屏成圖片
• 長(zhǎng)按圖片论咏，識(shí)別其中的二維碼优炬，打開網(wǎng)頁(yè)鏈接。

思路

• 和端交互的網(wǎng)頁(yè)a.html后面加query參數(shù)厅贪，如：http://www.test.html/a.html?code=123
• a.html中調(diào)用QRCode.js生成一個(gè)二維碼蠢护，二維碼中的信息是http://www.test.html/b.html?code=123
• 分享出去的頁(yè)面是截屏是a.html的，識(shí)別圖中的二維碼打開b.html

實(shí)現(xiàn)

由于很簡(jiǎn)單养涮，所以就不貼代碼了葵硕。
但是下面有幾個(gè)踩的坑，不可忽略的問(wèn)題贯吓，必看懈凹。

不可忽略的問(wèn)題（踩坑）

url的中文編碼問(wèn)題

如果傳的是url，但是打開的時(shí)候只是一堆字符串讓手動(dòng)復(fù)制宣决，那么說(shuō)明url的地址不正確蘸劈。
如果是微信，傳的url的地址中有中文是可以識(shí)別的尊沸，但是在QQ中是不行的
所以其中的中文要進(jìn)行encodeURIComponent編碼威沫，但是不要整體都編碼，只是中文的部分編碼即可洼专。

長(zhǎng)字符串的顯示模糊問(wèn)題

問(wèn)題分析

顯示模糊的問(wèn)題棒掠，應(yīng)該是canvas的問(wèn)題。由于字符串比較長(zhǎng)屁商，尤其是需要傳一個(gè)連接地址烟很，后面還加一些參數(shù)的時(shí)候，就會(huì)加大二維碼的像素復(fù)雜度蜡镶，而本身canvas在繪制的時(shí)候雾袱，就一直有像素模糊的問(wèn)題，尤其是在手機(jī)上的時(shí)候官还。

解決思路

所以可以利用這個(gè)問(wèn)題芹橡，不動(dòng)源碼去解決因?yàn)殚L(zhǎng)字符串導(dǎo)致的二維碼模糊，手機(jī)無(wú)法識(shí)別的問(wèn)題——先將生成的二維碼進(jìn)行倍數(shù)擴(kuò)大望伦，然后在css上面固定其顯示寬高林说，這樣就可以擴(kuò)大顯示像素精度煎殷。

實(shí)踐真知

1. 二維碼難以識(shí)別

下面二維碼的識(shí)別難度：

• QQ > weChat（相同長(zhǎng)度的二維碼，微信的識(shí)別程度比QQ的要好）
  • 微信中在大部分安卓手機(jī)上面是可以長(zhǎng)按識(shí)別的腿箩，小部分安卓手機(jī)比如小米豪直、oppo是無(wú)法識(shí)別的。還有蘋果手機(jī)大部分也不能識(shí)別珠移，更別說(shuō)QQ了弓乙，所以這個(gè)問(wèn)題需要解決。

cant1.png

2. 觀察生成的結(jié)構(gòu)

生成的頁(yè)面結(jié)構(gòu)可以看到是這樣的钧惧。通過(guò)canvas生成二維碼圖片唆貌，然后canvas隱藏顯示img。所以只要確保生成的canvas和img的寬高是100%即可垢乙。

生成的頁(yè)面結(jié)構(gòu)

3. 放大倍數(shù)

//顯示二維碼
var qrcode = new QRCode(document.getElementById("qrcodeConIn"), {
    text: `${location.origin}/codesearch/activity/broadcastgroup?requestAct=openview&openId=${data.openId}&random=${data.random}`,
    width: fontSize * 1.92 * 4,  //這里是根據(jù)rem進(jìn)行了換算锨咙，后面的4指的就是四倍
    height: fontSize * 1.92 * 4, //這里是根據(jù)rem進(jìn)行了換算，后面的4指的就是四倍
    colorDark : '#000',
    colorLight : "transparent",
    correctLevel : QRCode.CorrectLevel.H
});

看一下放大倍數(shù)的圖片（為了效果展示的是3倍的圖片）

3倍的二維碼

4. css縮小倍數(shù)

/*固定寬高*/
.qrcodeCon{
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.15rem;
}

/*內(nèi)容自適應(yīng)*/
.qrcodeConIn{
    width: 100%;
    height: 100%;
}

/*生成的二維碼里面的img標(biāo)簽寬高自適應(yīng)*/
.qrcodeConIn img{
    width: 100%;
    height: 100%;
}
/*一開始生成的canvas也要進(jìn)行寬高自適應(yīng)*/
.qrcodeConIn canvas{
    width: 100%;
    height: 100%;
}

這樣就可以看到生成的效果了追逮。
下面這個(gè)二維碼酪刀，幾乎所有手機(jī)的QQ和微信都可以識(shí)別了，如果還不能識(shí)別钮孵，那就繼續(xù)加大倍數(shù)骂倘。

can1.png

5. 解決小米8手機(jī)不顯示二維碼的問(wèn)題

先說(shuō)我只是在測(cè)試的時(shí)候，發(fā)現(xiàn)小米8手機(jī)并不能生成二維碼巴席，我覺得肯定是有一些代碼不兼容历涝。但是目前沒有時(shí)間去研究源碼，留下一個(gè)坑漾唉。

但是是知道处硬，小米8在生成二維碼之后的img標(biāo)簽中的src為空轩拨。
根據(jù)這個(gè)現(xiàn)象后面做了一個(gè)planB疼电，待以后有時(shí)間研究了再完善模聋。

//把代碼放到事件隊(duì)列后面
setTimeout(function(){
    //檢測(cè)一下如果img標(biāo)簽里面的src沒有base64就進(jìn)行下面操作
    if(!$("#qrcodeConIn img").attr("src")){
        $("#qrcodeConIn img").show();
        $("#qrcodeConIn canvas").hide();
        var canvas = $("#qrcodeConIn canvas")[0];
        var dataURL = canvas.toDataURL("image/png");
        $("#qrcodeConIn img").attr("src",dataURL);
    }
},0);

此案例完整代碼

html

<div class="codeCon">
    <!--撐開的后面背景-->
    <div class="inlineBlock qrcode">
        <!--白色部分占位-->
        <div id="qrcodeCon" class="qrcodeCon">
            <!--二維碼顯示范圍-->
            <div id="qrcodeConIn" class="qrcodeConIn"></div>
        </div>
    </div>
    <div class="inlineBlock">
        <h3>長(zhǎng)按識(shí)別</h3>
        <h3>掃碼免費(fèi)領(lǐng)</h3>
        <p>僅限今日</p>
    </div>
</div>

css

.codeCon{
    margin: 0 auto;
    width: 6.6rem;
    padding: 0.35rem 0;
    border-radius: 0.2rem;
    background-color: #eee;
}

.inlineBlock{
    display: inline-block;
    vertical-align: middle;
}
.qrcode{
    background-color: #fff;
    border-radius: 0.2rem;
    border: 1px solid #eee;
}
/*固定寬高*/
.qrcodeCon{
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.15rem;
}

/*內(nèi)容自適應(yīng)*/
.qrcodeConIn{
    width: 100%;
    height: 100%;
}

h3{
    font-size: 0.4rem;
    margin-bottom: 0.15rem;
    letter-spacing: 0.04rem;
    text-indent: 0.04rem;
}
p{
    font-size: 0.32rem;
    letter-spacing: 0.2rem;
    text-indent: 0.2rem;
}

/*生成的二維碼里面的img標(biāo)簽寬高自適應(yīng)*/
.qrcodeConIn img{
    width: 100%;
    height: 100%;
}
/*一開始生成的canvas也要進(jìn)行寬高自適應(yīng)*/
.qrcodeConIn canvas{
    width: 100%;
    height: 100%;
}

js

//顯示二維碼
var qrcode = new QRCode(document.getElementById("qrcodeConIn"), {
    text: `${location.origin}/codesearch/activity/broadcastgroup?requestAct=openview&openId=${data.openId}&random=${data.random}`,
    width: fontSize * 1.92 * 4,
    height: fontSize * 1.92 * 4,
    colorDark : '#000',
    colorLight : "transparent",
    correctLevel : QRCode.CorrectLevel.H
});
setTimeout(function(){
    if(!$("#qrcodeConIn img").attr("src")){
        $("#qrcodeConIn img").show();
        $("#qrcodeConIn canvas").hide();
        var canvas = $("#qrcodeConIn canvas")[0];
        var dataURL = canvas.toDataURL("image/png");
        $("#qrcodeConIn img").attr("src",dataURL);
    }
},0);