在网页中，经常会用到分享功能，例如分享到qq,分享到微信，分享到微博等，但是怎么实现呢？一直没有想清楚这个问题，觉得好高大上的样子，于是在网上找了一些资料，也没有看出个什么所以然来；
于是有些心急了，就照着网上的样子，照葫芦画瓢，写一个分享的代码出来，很新奇，居然能够实现了；然后拆解分享的步骤，似乎相同了一些，归纳如下：
我们要分享的页面，提取它的几个参数，例如标题，网页来源（微博用到），要展示分享的图片，简要内容，分享的地址（即当前网页的地址）；另外一个就是分享目的地，一般有微博，微信，QQ这几个是常见的，也就是分享到的目的地址
如果用到一下几个参数，就可以吧分享的内容展示到分享目的地了，另外，微博的话，需要申请一个appkey秘钥
例如：要分享如下分享按钮：分别分享到微博，qq，微信
那怎么做呢，一种是拼接好分享地址：包括分享的地址（即要跳转的地址），以及上面说到的那些参数，把这些拼接成一个字符串地址，然后使用window.open(url)方法包起来，在点击到对应的图标上时，window.open()方法会跳转到对应的分享页面，这样就可以达到分享的目的了；
但是我在做的时候，引入了 layer.js 框架，似乎这个框架对window.open()方法改写了，当使用window.open()打开分享地址时，老是弹出来一个弹框，跳转不到目标分享页面；
所以我改用了另一种跳转方法，直接在图标上加 a 标签，把a标签的地址设置成分享地址，这样，在点击图标时，就可以跳转到分享页面了；
html代码：（分享图标对应的代码）
1 <ul class="sharexia"> 2 <div class="fenxiangdao clearfix"> 3 <a href="http://service.weibo.com/share/share.php?" class="toweibo" target="_blank"><span 4 class="weibo yunafen"></span></a> 5 <a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" class="toqq" 6 target="_blank"> 7 <span class="qq yunafen"></span></a> 8 <a href="http://zixuephp.net/inc/qrcode_img.php?" class="toweixin" target="_blank"><span 9 class="weixin yunafen"></span></a> 10 <span class="dianzan cangfen"> 11 <i class="zan"></i> 12 <code class="wen" iszhan="0">赞</code> 13 <code class="su" isshou="0">{$articleData['zan']}</code> 14 </span> 15 <span class="shoucang cangfen"> 16 <i class="xin"></i> 17 <code class="wen">收藏</code> 18 <code class="su">{$articleData['collect']}</code> 19 </span> 20 </div> 21 </ul>
下面是对应的js代码：（备注：这是一个函数，只需在文件加载完成后，执行下面这个方法就可以了）
1 function fenxianginit() { 2 var oweibourl = $("a.toweibo").attr("href"); 3 var oqqurl = $("a.toqq").attr("href"); 4 var oweixinurl = $("a.toweixin").attr("href"); 5 var cururl = location.href; 6 var omiao = $.trim($("div.neirong").text().substring(0, 100)) + "......"; 7 8 var otitle = $.trim($("div.zhengwen ul.title h3").html()); 9 var lk; 10 var flink = $('div.neirong img').eq(0).attr('src'); 11 12 if (typeof flink == 'undefined') { 13 flink = ''; 14 } 15 //当内容中没有图片时，设置分享图片为网站logo 16 if (flink == '') { 17 lk = 'http://' + window.location.host + '/static/logo/image/yizhanche.png'; 18 } 19 //如果是上传的图片则进行绝对路径拼接 20 if (flink.indexOf('/uploads/') != -1) { 21 lk = 'http://' + window.location.host + flink; 22 } 23 //百度编辑器自带图片获取 24 if (flink.indexOf('ueditor') != -1) { 25 lk = 'http://' + window.location.host + flink; 26 } 27 28 var newoweibourl = oweibourl + "url=" + cururl + "?sharesource=weibo&title=" + otitle + "&pics=" + lk + 29 "&appkey=3254906705"; 30 var newoqqurl = oqqurl + "url=" + cururl + "?sharesource=qzone&title=" + otitle + "&pics=" + lk + "&summary=" + 31 omiao + "&desc=一站车，一站式购车平台"; 32 var newoweixinurl = oweixinurl + "url=" + cururl + "&pics=" + lk; 33 34 $("a.toweibo").attr("href", newoweibourl); 35 $("a.toqq").attr("href", newoqqurl); 36 $("a.toweixin").attr("href", newoweixinurl); 37 }
结果：可以实现分享，如下：
微博分享：
qq 分享：
微信分享：先弹出一个二维码，然后使用微信扫面二维码，查看分享内容
以上，就可以实现分享了。如果谁有更好的方法，请留言，大家相互学习一下~~~
