为博客的文章添加了一个生成二维码的功能,可以在扫描二维码后在移动端进行阅读,还能分享给朋友或者分享到朋友圈。只在文章的页面才有生成二维码的功能,首页及其他页面是没有的。
具体的步骤是:
- 在文章页面添加一个“生成二维码”的点击按钮
- 用户点击按钮后,请求生成二维码的js
- 请求完毕后,生成二维码并添加到页面中
- 用户再次点击按钮时,只是切换二维码的显示与隐藏
本博客采用jquery.code.min.js
生成二维码,使用方法也非常的简单。首先引入jQuery和jquery.code.min.js,然后在页面中准备一个元素(如 <div id="qrcode"></div>
),用来存放二维码。
$('#qrcode').qrcode({
render : 'canvas', // 采用canvas或table的方式生成,默认canvas
width : 176, // 默认256
height: 176, // 默认256
text : 'this is text' // 内容
})
如果其他的参数都不需要,只要内容即生成二维码,还可以:
$('#qrcode').qrcode('this is text')
具体的代码如下:
$('.bcontent').append('<div class="qrcode"><a href="javascript:;">点击生成二维码,可在手机端观看</a><div class="tsp"></div></div>');
$('.bcontent').on('click', '.qrcode a', function(){
var $tsp = $(this).next();
if( $tsp.find('canvas').length ){
if( $tsp.css('display')=='block' ){
$tsp.hide();
}else{
$tsp.show();
}
}else{
if( self.showing ){
return;
}
self.showing = true;
$tsp.show().html( '正在生成中...' );
$.ajax({
url : 'jquery.qrcode.min.js',
dataType : 'script',
type : 'get'
}).done(function(){
self.showing = false;
$tsp.html('');
$tsp.qrcode({
render : 'canvas',
width : 176,
height: 176,
text : window.location.href
});
})
}
})
你可以扫描本文章下的二维码,分享到朋友圈中。