为博客的文章添加二维码

文章地址：http://www.xiabingbao.com/blogs/2016/08/31/blogs-qrcode.html

为博客的文章添加了一个生成二维码的功能，可以在扫描二维码后在移动端进行阅读，还能分享给朋友或者分享到朋友圈。只在文章的页面才有生成二维码的功能，首页及其他页面是没有的。

具体的步骤是：

1. 在文章页面添加一个“生成二维码”的点击按钮

2. 用户点击按钮后，请求生成二维码的js

3. 请求完毕后，生成二维码并添加到页面中

4. 用户再次点击按钮时，只是切换二维码的显示与隐藏

本博客采用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
            });
        })
    }
})

文章地址：http://www.xiabingbao.com/blogs/2016/08/31/blogs-qrcode.html