PC端分享到微信、qq空间、微博_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

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

来源：我爱模板网作者：类型：图文教程点击次数：发布时间：2021-09-01 11:40:10

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

1、html代码

01<div class="share-div">
02    <span>分享</span>
03    <a class="a1">
04        <img src="images/shejiao_02.png">
05        <!--这个容器用来生成qrcode-->
06        <div class="wxpop" id="qrcode"></div>
07    </a>
08    <!--分享到QQ空间-->
09    <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=文章标题&desc=文章描述&pics=图片地址&url=文章地址"><img src="images/shejiao_03.png"></a>
10    <!--分享到新浪微博-->
11    <a href="http://v.t.sina.com.cn/share/share.php?title=文章标题&url=文章地址&pic=图片地址"><img src="images/shejiao_01.png"></a>
12</div>

如上代码，分享到QQ空间和分享到新浪微博，就是跳转到对应的分享页面，同时把当前页面的一些参数带过去。

2、引入qrcode.js

`1`	`<script` `type="text/javascript"` `src="./js/qrcode.js"></script>`

3、js代码：

01//分享到微信的二维码
02var path = window.location.href;
03var qrcodeBox = document.getElementById("qrcode");
04qrcodeBox.innerHTML = '';
05var qrcode = new QRCode(qrcodeBox, {
06    text: path,
07    width: 100,
08    height: 100,
09    colorDark: "#000000",
10    colorLight: "#ffffff",
11    correctLevel: QRCode.CorrectLevel.L
12});