声明:本文乃博主亲自实践记录和总结,属于原创博文,如有雷同,不胜荣幸。
如果你有自己的博客网站,那么肯定需要生成二维码这么逼格的操作。 或许你的主题自带这个功能,又或许你的主题、博客程序不能满足你的需求,总有或多或少的需求矛盾,那么你就得自己动手,修改的你的程序相关文件。
博主就这,博主的博客就是使用的 Typecho
程序搭建的,使用的主题是 GreenGrapes
,这个主题默认是不带分享代码的,为此在建站之初,也是费尽一番折腾。总算有了点样子。
分享到 QQ、QQ空间、新浪微博 用 js 还是比较轻松实现的,只要你有对应的 接口 即可,分享到微信就有点曲折了,我喜欢简单的代码,至少我自己写的得尽可能的少,同时又想减少服务器开销,一开始调用的二维码接口是第三方的,用过一段时间,不太理想,遂又开始思考。
庆幸的是,我找到了 jquery-qrcode
,直接在前端就完成二维码生成,同时方法人家已经写好,只需要调用即可,还是比较方便的。
需求及逻辑: 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。
其实这篇博文没太大难度,会前端的都能想的明白,之所以要写出来,主要是给那些和我一样的作为一个参考,同时也能给自己日后作出参考。
「 希望熬过一切,星光璀璨 」
「 道路坎坷,感谢有您 ---来自 anYun 的感谢 」
使用微信扫描二维码完成支付
2020-09-13
已阅:14070 人/次
分享是一种美德
x
打开微信,右上角的"+"选择"扫一扫"
使用“扫一扫”将博文分享至朋友圈吧
本文由 anYun 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3oibnoh9lo6cs
- 上一篇: 分享几个IP接口使用案例
- 下一篇: 我和前端的那些事儿
还不快抢沙发