本期介绍一个前端动态生成二维码的插件 jquery.qrcode.js，jquery.qrcode.js 是一个能够在客户端生成矩阵二维码 QRCode 的 jquery 插件 ，使用它可以很方便的在页面上生成二维码。

引入

将 jquery.qrcode.min.js 和 jquery 直接引入

<script src="jquery.min.js"></script><script type="text/javascript" src="jquery.qrcode.min.js"></script>

创建 dom

创建一个 DOM 元素去包含生成 qr 码

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

生成二维码

在此容器中的添加 qrcode

<script>    jQuery(function(){    jQuery('#qrcode').qrcode("https://www.baidu.com/");})</script>

进阶用法

指定二维码的生成方式：

//使用table生成jQuery('#qrcode').qrcode({    render: "table",    text: "https://www.baidu.com/"});//使用canvas生成jQuery('#qrcode').qrcode({    render: "canvas",    text: "https://www.baidu.com/"});

指定生成二维码的大小：

可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。

//生成100*100(宽度100，高度100)的二维码jQuery('#qrcode').qrcode({    render: "canvas", //也可以替换为table    width: 100,    height: 100,    text: "https://www.baidu.com/"});

指定生成二维码的色彩样式：

可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。

//生成前景色为红色背景色为白色的二维码jQuery('#qrcode').qrcode({    render: "canvas", //也可以替换为table    foreground: "#C00",    background: "#FFF",    text: "https://www.baidu.com/"});

中文 ULR 生成方法:

jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码

「感谢阅读，后面会不断分享自己工作中用到的开源库，大家一起交流学习」