首页 > 建站教程 > JS、jQ、TS >  PC端分享到微信、qq空间、微博正文

PC端分享到微信、qq空间、微博

一个简单的PC端分享到微信、QQ控件、微博的代码,分享到微信采用的是qrcode.js生成二维码,可以用微信扫一扫,效果如下:



1、html代码
<div class="share-div">
    <span>分享</span>
    <a class="a1">
        <img src="images/shejiao_02.png">
        <!--这个容器用来生成qrcode-->
        <div class="wxpop" id="qrcode"></div>
    </a>
    <!--分享到QQ空间-->
    <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=文章标题&desc=文章描述&pics=图片地址&url=文章地址"><img src="images/shejiao_03.png"></a>
    <!--分享到新浪微博-->
    <a href="http://v.t.sina.com.cn/share/share.php?title=文章标题&url=文章地址&pic=图片地址"><img src="images/shejiao_01.png"></a>
</div>
如上代码,分享到QQ空间和分享到新浪微博,就是跳转到对应的分享页面,同时把当前页面的一些参数带过去。

2、引入qrcode.js
<script type="text/javascript" src="./js/qrcode.js"></script>
3、js代码:
//分享到微信的二维码
var path = window.location.href;
var qrcodeBox = document.getElementById("qrcode");
qrcodeBox.innerHTML = '';
var qrcode = new QRCode(qrcodeBox, {
    text: path,
    width: 100,
    height: 100,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.L
});