生成二维码
一. jquery.qrcode.js (支持canvas和table两种方式)
a. 首先在页面加入jquery库文件，和qrcode插件
<script src="jquery.js"></script>
<script src="jquery.qrcode.min.js"></script>
b. 在需要显示二维码的地方加入一下代码
<div id="code"></div>
c. 调用qrcode插件
支持两种方式渲染，table & canvas，默认是canvas，效率最高，但一定要支持H5
$('#code').qrcode('string'); //任意字符串
或者用以下方式：
$("#code").qrcode({
render: "table", //table方式
width: 200, //宽度
height:200, //高度
text: "hello world" //任意内容
});
⚠️ 识别中文会出现乱码
因为jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码，如果有中文内容，在生成二维码前就要把字符串转换成UTF-8，然后再生成二维码。
//汉字转成utf-8
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
我遇到的问题
1.生成的二维码是没有白色边框，因为活动页面的背景色是红色，导致用扫码枪扫描二维码非常困难，只需在二维码加上border为白色，适当放大二维码，即可解决这个问题。
二、QRCode.js
a. 引入QRCode.js文件
<script src='qrcode.js'></script>
b. 在需要显示二维码的地方，如下：
<div id="code"></div>
c. 调用QRCode插件
var code = new QRCode(document.getElementById('code'), {
width: 200,
height: 200
});
code.makeCode('hello world');
QRCode.js 还可以使用svg
a. 引入QRCode.js
b. 在需要显示二维码的地方，如下：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="qrcode">
</svg>
c. 调用QRCode插件
var code = new QRCode(document.getElementById('code'), {
width: 200,
height: 200,
useSVG: true
});
Compare
QRCode.js：无依赖，原生js即可。可直接使用。
jquery.qrcode.js：依赖jquery，中文需进行转码
