随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站、加个好友什么的,比起手工输入真的是方便太多了。
前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统。
基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种:
1、借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器
缺点:变更二维码的维护略显麻烦
2、在后端利用java或.net代码生成二维码图片,再在网站上引用图片,如qrcode、zxing等
缺点:重量级实现方式,对于简单应用来讲开发成本较高
3、在前端页面通过javascript等方式即时生成为二维码(ˇ?ˇ) ,如jquery-qrcode
优点:轻量级实现方式,减少图片IO,节省流量
当然在实际应用中,这三种实现方式也不是完全孤立的,我们也可以根据项目实际情况结合应用,最大限度地提高效率、节约成本。
晚上时间也不多就选了个jquery-qrcode研究下。
jquery-qrcode
jquery-qrcode是一个能够在浏览器端生成二维码的jquery插件。它是独立的,最小压缩之后不足4k,也没有图片下载请求。引入该类库之后,只需要一行代码,就可以很容易在web页面加上二维码。
jquery-qrcode主要包含两个文件:
1、qrcode.js:二维码算法实现类
2、jquery.qrcode.js:用jquery将qrcode.js封装起来,根据用户参数,实现canvas及table两种方式渲染生成二维码
压缩之后的只有一个文件jquery.qrcode.min.js。
代码实现
github上其实已经有了非常详细的使用说明及示例,在此就不多做说明了。
不过为了方便今后使用,我还是结合网络上大家的使用心得重新整理一份代码。
jquery-qrcode.HTML代码如下:
<div id="qrcodeTable">