声明:本文乃博主亲自实践记录和总结,属于原创博文,如有雷同,不胜荣幸。

如果你有自己的博客网站,那么肯定需要生成二维码这么逼格的操作。 或许你的主题自带这个功能,又或许你的主题、博客程序不能满足你的需求,总有或多或少的需求矛盾,那么你就得自己动手,修改的你的程序相关文件。

博主就这,博主的博客就是使用的 Typecho 程序搭建的,使用的主题是 GreenGrapes,这个主题默认是不带分享代码的,为此在建站之初,也是费尽一番折腾。总算有了点样子。 1.webp

分享到 QQ、QQ空间、新浪微博 用 js 还是比较轻松实现的,只要你有对应的 接口 即可,分享到微信就有点曲折了,我喜欢简单的代码,至少我自己写的得尽可能的少,同时又想减少服务器开销,一开始调用的二维码接口是第三方的,用过一段时间,不太理想,遂又开始思考。

庆幸的是,我找到了 jquery-qrcode,直接在前端就完成二维码生成,同时方法人家已经写好,只需要调用即可,还是比较方便的。 2.webp

需求及逻辑: 1、鼠标点击,二维码才出来; 2、二维码地址为当前页面地址; 3、可以点击关闭;

思路: 1、使用div 标签存放二维码; 2、默认是隐藏状态,点击才出来(display: none;) 3、点击关闭后,继续 display:none;

  • CSS 代码
#WX {
    width: 230px;
    height: 285px;
    background: red;
    padding: 10px;
    float: left;
    background: #fff;
    border: solid 1px #d8d8d8;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: none;
}

.bd_weixin_popup_head {
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    line-height: 16px;
    height: 16px;
    position: absolute;
    color: #000;
}

.bd_weixin_popup_head span {
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    line-height: 16px;
}

.bd_weixin_popup_close {
    width: 16px;
    height: 16px;
    text-decoration: none;
    font-size: 16px;
    text-align: right;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.bd_weixin_popup_close {
    top: -10px;
    right: -10px;
    position: absolute;
}

.bd_weixin_popup_foot {
    font-size: 12px;
    text-align: left;
    line-height: 22px;
    color: #666;
}

#weixin {
    width: 185px;
    height: auto;
    margin: 15px auto;
}

  • JS 相关


  • HTML 代码

分享是一种美德 x
打开微信,右上角的"+"选择"扫一扫"
使用“扫一扫”将博文分享至朋友圈吧

在你需要的地方,将上述 HTML 代码加入到你的博客中即可,比如博主使用的 Typecho ,我就是加入到 post.php 文件中的。效果需要自行调整下,包括 CSS。

1.gif

其实这篇博文没太大难度,会前端的都能想的明白,之所以要写出来,主要是给那些和我一样的作为一个参考,同时也能给自己日后作出参考。

「 希望熬过一切,星光璀璨 」

流年小站,感谢有您的支持

「 道路坎坷,感谢有您 ---来自 anYun 的感谢 」

使用微信扫描二维码完成支付

2020-09-13
已阅:14070 人/次

 
 
 
分享是一种美德 x
打开微信,右上角的"+"选择"扫一扫"
使用“扫一扫”将博文分享至朋友圈吧

本文由 anYun 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3oibnoh9lo6cs

还不快抢沙发

添加新评论

Myssl安全认证