为博客的文章添加二维码

蚊子前端博客
发布于 2016-08-31 00:00
为博客的文章添加了一个生成二维码的功能,可以在扫描二维码后在移动端进行阅读,还能分享给朋友或者分享到朋友圈

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

具体的步骤是:

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

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

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

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

本博客采用jquery.code.min.js生成二维码,使用方法也非常的简单。首先引入jQuery和jquery.code.min.js,然后在页面中准备一个元素(如 <div id="qrcode"></div>),用来存放二维码。

COPYJAVASCRIPT

$('#qrcode').qrcode({ render : 'canvas', // 采用canvas或table的方式生成,默认canvas width : 176, // 默认256 height: 176, // 默认256 text : 'this is text' // 内容 })

如果其他的参数都不需要,只要内容即生成二维码,还可以:

COPYJAVASCRIPT

$('#qrcode').qrcode('this is text')

具体的代码如下:

COPYJAVASCRIPT

$('.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 }); }) } })

你可以扫描本文章下的二维码,分享到朋友圈中。

标签:
阅读(732)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆