前端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_韵七七