即使页面使用了pjax,用下面的方法加载生成二维码也没有问题,pjax需要注意的就是javascript 代码最好不要卸载js文件中,直接写在页面中就可以,反正也就一点儿

之前写过一篇使用 jquery.qrcode.js 显示二维码的文章,这个插件真的是非常好用。

typecho(或者其他的任何博客系统、CMS系统)如果需要开启二维码,则 全部适用

因为不需要开发插件,直接在前端界面使用就可以。

一、需求

在文章页面生成二维码

二、为什么不用插件

1. 系统太多,无法通用

typecho/z-blog/wordpress/各种cms系统,如果都用插件支撑,则都不需要不同的插件,虽然可能已经有人开发了相关的插件。

2. 多次引入jquery

相关插件其实还是使用 jquery.qrcode.js 来实现的,如果系统已经使用了jquery,则直接使用就可以,很多插件又引入了一次jquery,需要对插件进行更改(一般都会引入的)。

3. 插件本身有局限性

插件无法做到随地随用。

以typecho的二维码插件举例, 单页page 我不希望有二维码,只希望在post上显示二维码 ,插件做不到这一点,page底部也会生成二维码。

三、实现

以 Typecho 举例:

1.引入jquery

一般都会引入

2.引入jquery.qrcode.js

我用的是 bootcdn > http://www.bootcdn.cn/jquery.qrcode/ 的cdn地址,很快。

3.将下面的代码复制到页面中需要使用的地方

  • 这是基本的一个样式,更多的样式当然可以自己去定制,更加的方便快捷
  • jquery.qrcode.js 的使用方法随便查查就一堆
  • 如果url太长,不建议将二维码大小设置过小
  • 如果要生成其他页面的url,将text替换为内容即可
  • 如果要有中文内容的二维码,则需要百度一下中文二维码解决方法

<div style="text-align:center;">
    <div id="qrcodeContent" >
    
    </div> 
    <div style="padding:10px;">
        <span>扫描二维码,在手机阅读!</span>
    </div>
</div>
<script> 
    var options={
        text     : location.href, //设置二维码内容  
        render   : "canvas",//设置渲染方式  
        width       : 150,     //设置宽度  
        height      : 150,     //设置高度  
        typeNumber  : -1,      //计算模式  
        background      : "#ffffff",//背景颜色  
        foreground      : "#000000" //前景颜色  
    };
    jQuery('#qrcodeContent').qrcode(options);  
</script>

4.效果

可以看看本文最后(如果你是在我的网站看到的文章)

QQ截图20170510150912.jpg