让你的博文可以扫码分享

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

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

博主就这，博主的博客就是使用的 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 相关

<script src="https://jian.deyun.fun/js/jquery-3.5.1.js">//引入 jquery 文件</sript>
<srcipt src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js">// 引入jquery-qrcode</script>

• HTML 代码

<button  onclick="wxshare()">点击分享</button>
<div id="WX" >
    <div class="bd_weixin_popup_head">
    <span>分享是一种美德</span>
    <span class="bd_weixin_popup_close" onclick="wxclose()">x</span>
    <div id="weixin">
        <script>
            var path = window.location.href;//获取页面的链接
            $("#weixin").qrcode({
                text: path, //设置二维码内容 
                render: "canvas", //设置渲染方式 
                width: 185, //设置宽度,默认生成的二维码大小是 256×256
                height: 185, //设置高度 
                typeNumber: -1, //计算模式 
                background: "#ffffff", //背景颜色 
                foreground: "#000000" //前景颜色  
            });
        </script>
    </div>
    <div class="bd_weixin_popup_foot">打开微信，右上角的"+"选择"扫一扫"<br>使用“扫一扫”将博文分享至朋友圈吧</div>
</div>

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

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