网页前端知识汇总（三）——网页前端利用二维码插件qrcode生成在线二维码

最近几年二维码的广泛应用，方便了很多行业，如支付宝，微信，小程序扫码之类的，这个在二十年前，想都不敢想这么方便，那时候有书刊编码扫一扫都感觉是高科技了，如今，二维码的广泛应用，生活还是方便了不少！这个得益于移动智能设备的发展

 

那网页上的二维码是怎么生成的呢？一般很少中小企业自己开发JS库，大部分使用第三方库使用，下面我讲解下我现在在使用的JS库，qrcode.js

首先，在使用之前，你要在网络上下载qrcode.js库文件，网络上很多下载点；下载好后新建一个demo.html文件，引入qrcode.js库文件；

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

这个路径是我测试用的路径，你可以根据自己的项目路径自定义，确保路径能够访问该库文件地址

下面就是新建一个div，如下面

<div id="xycms_qrcode"></div>

注意，一定要命名id属性值，这个也是指定生成区域的唯一标识，我命名为xycms_qrcode；

下面我说下生成方法（默认使用CSDN网址作为测试）

方法一：利用默认生成方法

<script>
new QRCode(document.getElementById('xycms_qrcode'), 'https://www.csdn.net/');
</script>

刷新下浏览器地址，是不是二维码就生成好了呢

方法二：自定义生成，根据自己喜好，对二维码颜色，大小自定义设置

<script>
var qrcode = new QRCode('xycms_qrcode', {
  width: 256,
  height: 256,
  colorDark : '#ffffff',
  colorLight : '#6C3',
  correctLevel : QRCode.CorrectLevel.H
});
qrcode.makeCode('https://www.csdn.net/');
</script>

这样就生成底色白色，绿色线条的二维码了，替代了默认白底黑条的二维码；比起默认，我自己更倾向于自定义，根据自己的喜好自定义随意调整；

好了，简单的生成二维码技术就介绍到这里了