前端QRCode.js生成二維碼插件

本文用於推薦一款很好用的二維碼生成插件QRCode.js，測試使用方便且簡單。 其實官方就有很好的文檔，這裏只是作一個我工做的記錄和總結。

• 目錄
  • 介紹
  • 使用
    • 1.引入js文件
    • 2.定義承載二維碼標籤
    • 3.js調用
    • 4.頁面預覽
  • 參數API
    • QRCode參數
    • Option參數
    • API接口
  • 實踐
    • 生成二維碼，微信QQ識別打開網頁

介紹

• 這個插件主要使用canvas實現的。
• 原生代碼不須要依賴jquery，或者zepto。
• 兼容性也很好，IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.
• 前端開發者倉庫官網
• GitHub地址

使用

1.引入js文件

<script src="qrcode.js"></script>
複製代碼

2.定義承載二維碼標籤

<div id="qrcode"></div>
複製代碼

3.js調用

簡單調用

new QRCode(document.getElementById('qrcode'), 'your content');
複製代碼

設置參數調用

下面會有參數詳解

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

4.頁面預覽

這樣就很簡單的生成了一個二維碼

參數API

QRCode參數

new QRCode(element, option)
複製代碼

名稱	默認值	說明
element	-	承載二維碼的DOM元素的ID
option	-	參數設置

Option參數

名稱	默認值	說明	備註
text	-	二維碼承載的信息	若是是string那沒有什麼好說的。 若是是url的話，爲了微信和QQ能夠識別，鏈接中的中文使用encodeURIComponent進行編碼
width	256	二維碼寬度	單位像素（百分比不行）
height	256	二維碼高度	單位像素（百分比不行）
colorDark	'#000000'	二維碼前景色	英文\十六進制\rgb\rgba\transparent均可以
colorLight	'#ffffff'	二維碼背景色	英文\十六進制\rgb\rgba\transparent均可以
correctLevel	QRCode.CorrectLevel.L	容錯級別	由低到高 QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H

API接口

名稱	參數	說明	使用
clear	-	清除二維碼	qrcode.clear()
makeCode	string	替換二維碼（參數裏面是新的二維碼內容）	qrcode.makeCode('new content')

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');
複製代碼

實踐

生成二維碼，微信QQ識別打開網頁

需求

• 前端根據傳的不一樣的參數，在頁面生成一個二維碼
• 由端分享到QQ、QQ空間、微信、朋友圈的時候，截屏成圖片
• 長按圖片，識別其中的二維碼，打開網頁連接。

思路

• 和端交互的網頁a.html後面加query參數，如：http://www.test.html/a.html?code=123
• a.html中調用QRCode.js生成一個二維碼，二維碼中的信息是http://www.test.html/b.html?code=123
• 分享出去的頁面是截屏是a.html的，識別圖中的二維碼打開b.html

實現

因爲很簡單，因此就不貼代碼了。

注意

若是傳的是url，可是打開的時候只是一堆字符串讓手動複製，那麼說明url的地址不正確。 若是是微信，傳的url的地址中有中文是能夠識別的，可是在QQ中是不行的 因此其中的中文要進行encodeURIComponent編碼，可是不要總體都編碼，只是中文的部分編碼便可。

@version1.0——2018-11-22——建立《前端QRCode.js生成二維碼插件》

©burning_韻七七