为博客的文章添加二维码

王岩威发布于2019-08-20 11:40 / 2828人阅读

摘要：文章地址为博客的文章添加了一个生成二维码的功能，可以在扫描二维码后在移动端进行阅读，还能分享给朋友或者分享到朋友圈。

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

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

具体的步骤是：

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

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

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

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

本博客采用jquery.code.min.js生成二维码，使用方法也非常的简单。首先引入jQuery和jquery.code.min.js，然后在页面中准备一个元素（如

），用来存放二维码。

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

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

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

具体的代码如下：

$(".bcontent").append("点击生成二维码，可在手机端观看");
$(".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

服务器托管超融合服务器博客中国最新文章添加文章将该小程序添加为开发小程序云计算的文章

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80695.html

手把手教你使用Hexo + Github Pages搭建个人独立博客

摘要：设置什么是本用于介绍托管在的项目，不过，由于他的空间免费稳定，用来做搭建一个博客再好不过了。你可以通过来访问你的个人主页。执行过程中可能需要让你输入账户的用户名及密码，按照提示操作即可。推荐使用腾讯公益。系统环境配置要使用Hexo，需要在你的系统中支持Nodejs以及Git，如果还没有，那就开始安装吧！安装Node.js 下载Node.js参考地址：安装Node.js 安装Git...

刘福 2019-08-21 13:43 评论0 收藏0
关于Hexo6.0搭建个人博客(高级篇)

摘要：本篇博文将继续带大家深入文章效果优化教你打造炫酷的个人博客站点阅读本文前建议先行阅读本人另外两篇遍基础博文关于搭建个人博客基础篇关于搭建个人博客进阶篇目录优化博客文章样式修改文章内链接文本样式修改文章底部的的标签样式在每篇文章末尾统一添加本本篇博文将继续带大家深入文章效果优化,教你打造炫酷的个人博客站点. 阅读本文前建议先行阅读本人另外两篇遍基础博文1.关于Hexo6.0搭建个人博客...

Hydrogen 2019-08-05 13:44 评论0 收藏0
Django 学习小组：博客开发实战第二周教程 —— 实现博客详情页面和分类页面

摘要：本节接上周的文档学习小组博客开发实战第一周教程编写博客的首页面，我们继续给博客添加功能，以及改善前面不合理的部分。返回该视图要显示的对象。目前小组正在完成第一个项目，本文即是该项目第二周的相关文档。本教程内容已过时，更新版教程请访问： django 博客开发入门教程。上周我们完成了博客的 Model 部分，以及 Blog 的首页视图 IndexView。本节接上周的文档 Djan...

ingood 2019-07-25 10:29 评论0 收藏0
个人博客全新UI：我心中你最美

摘要：那个月就是对着和的文档写出来了网站的前后端，也是第一次买服务器备案网站做反向代理读文档学做，怀念那些时光，让现在的网站有了基础。因此，管理系统听歌台被抽离成了单独的应用，后台利用做反向代理，用二级域名记性访问。不知道你是否也有想过完全用自己的代码实现自己的个人博客？定制专属 UI、定制专属逻辑、在信息爆炸的时代真正地沉淀下属于自己的东西。我也曾经历了同样的纠结，最终下定决心做了自己的...

oliverhuang 2019-08-23 11:52 评论0 收藏0
用小程序·云开发打造功能全面的博客小程序丨实战

摘要：用小程序云开发将博客小程序常用功能一网打尽本文介绍博客小程序的详情页的功能按钮如何实现，具体包括评论点赞收藏和海报功能，这里记录下整个实现过程和实际编码中的一些坑。考虑到小程序本身的大小限制，使用的方式是最佳的。用小程序·云开发将博客小程序常用功能一网打尽本文介绍mini博客小程序的详情页的功能按钮如何实现，具体包括评论、点赞、收藏和海报功能，这里记录下整个实现过程和实际编码中的一...

cc17 2019-08-30 15:44 评论0 收藏0