最近做着项目需要用到二维码,前端就用了jquery-qrcode,后端传个json值过来,二维码里面显示json值得内容。中间还有很多,废话就不说,记录一下一些问题。
jquery-qrcode使用方法:
1、jquery.qrcode.js是依赖jquery的,所以要先引入jquery再引入jquery.qrcode.js
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
2、 在页面上添加一个div标签,用于创建渲染区域
<div id="qrcode"></div>
3、通过代码就可以生成一个默认256×256大小的二维码
<script type="text/javascript">
jQuery('#qrcode').qrcode("http://www.wdooc.com/");
</script>
4、详细配置
jQuery("#qrcode").qrcode({
render: "canvas", // 渲染方式有table方式和canvas方式
width: 256, //宽度
height: 256, //高度
text: "http://www.wdooc.com/", //二维码任意内容
typeNumber: -1, //计算模式一般默认为-1
correctLevel: 2, //二维码纠错级别
background: "#ffffff", //背景颜色
foreground: "#000000" //二维码颜色
});
jquery-qrcode中文解决方案
function utf16to8(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;
}
最后分享我项目前端的部分代码
$("#checkButton").click(function(){
SendCodeId();
//设置二维码信息
var textJSON = {
codeId:QRcode.codeId,
course:QRcode.course,
courseTime:QRcode.courseTime,
classRoom:QRcode.classRoom,
teacheerName:QRcode.teacheerName
};
var text = JSON.stringify(textJSON);
//展示二维码
Bar();
$('#qrcode').qrcode({width:400,height:400,text:utf16to8(text)});
});
2017年12月28日 15:41 沙发
很实用的东西!
2017年12月28日 23:27 1层
@美词创意设计 还好h还好