a 标签实现分享功能

在网页中，经常会用到分享功能，例如分享到qq,分享到微信，分享到微博等，但是怎么实现呢？一直没有想清楚这个问题，觉得好高大上的样子，于是在网上找了一些资料，也没有看出个什么所以然来；

于是有些心急了，就照着网上的样子，照葫芦画瓢，写一个分享的代码出来，很新奇，居然能够实现了；然后拆解分享的步骤，似乎相同了一些，归纳如下：

我们要分享的页面，提取它的几个参数，例如标题，网页来源（微博用到），要展示分享的图片，简要内容，分享的地址（即当前网页的地址）；另外一个就是分享目的地，一般有微博，微信，QQ这几个是常见的，也就是分享到的目的地址

如果用到一下几个参数，就可以吧分享的内容展示到分享目的地了，另外，微博的话，需要申请一个appkey秘钥

例如：要分享如下分享按钮：分别分享到微博，qq，微信

那怎么做呢，一种是拼接好分享地址：包括分享的地址（即要跳转的地址），以及上面说到的那些参数，把这些拼接成一个字符串地址，然后使用window.open(url)方法包起来，在点击到对应的图标上时，window.open()方法会跳转到对应的分享页面，这样就可以达到分享的目的了；

但是我在做的时候，引入了 layer.js 框架，似乎这个框架对window.open()方法改写了，当使用window.open()打开分享地址时，老是弹出来一个弹框，跳转不到目标分享页面；

所以我改用了另一种跳转方法，直接在图标上加 a 标签，把a标签的地址设置成分享地址，这样，在点击图标时，就可以跳转到分享页面了；

html代码：（分享图标对应的代码）

  <ul class="sharexia">
                             <div class="fenxiangdao clearfix">
                                 <a href="http://service.weibo.com/share/share.php?" class="toweibo" target="_blank"><span
                                         class="weibo yunafen"></span></a>
                                 <a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" class="toqq"
                                     target="_blank">
                                     <span class="qq yunafen"></span></a>
                                 <a href="http://zixuephp.net/inc/qrcode_img.php?" class="toweixin" target="_blank"><span
                                         class="weixin yunafen"></span></a>
                                 <span class="dianzan cangfen">
                                     <i class="zan"></i>
                                     <code class="wen" iszhan="0">赞</code>
                                     <code class="su" isshou="0">{$articleData['zan']}</code>
                                 </span>
                                 <span class="shoucang cangfen">
                                     <i class="xin"></i>
                                     <code class="wen">收藏</code>
                                     <code class="su">{$articleData['collect']}</code>
                                 </span>
                             </div>
                         </ul>

下面是对应的js代码：（备注：这是一个函数，只需在文件加载完成后，执行下面这个方法就可以了）

  function fenxianginit() {
         var oweibourl = $("a.toweibo").attr("href");
         var oqqurl = $("a.toqq").attr("href");
         var oweixinurl = $("a.toweixin").attr("href");
         var cururl = location.href;
         var omiao = $.trim($("div.neirong").text().substring(0, 100)) + "......";

         var otitle = $.trim($("div.zhengwen ul.title h3").html());
         var lk;
         var flink = $('div.neirong img').eq(0).attr('src');

         if (typeof flink == 'undefined') {
             flink = '';
         }
         //当内容中没有图片时，设置分享图片为网站logo
         if (flink == '') {
             lk = 'http://' + window.location.host + '/static/logo/image/yizhanche.png';
         }
         //如果是上传的图片则进行绝对路径拼接
         if (flink.indexOf('/uploads/') != -1) {
             lk = 'http://' + window.location.host + flink;
         }
         //百度编辑器自带图片获取
         if (flink.indexOf('ueditor') != -1) {
             lk = 'http://' + window.location.host + flink;
         }

         var newoweibourl = oweibourl + "url=" + cururl + "?sharesource=weibo&title=" + otitle + "&pics=" + lk +
             "&appkey=3254906705";
         var newoqqurl = oqqurl + "url=" + cururl + "?sharesource=qzone&title=" + otitle + "&pics=" + lk + "&summary=" +
             omiao + "&desc=一站车，一站式购车平台";
         var newoweixinurl = oweixinurl + "url=" + cururl + "&pics=" + lk;

         $("a.toweibo").attr("href", newoweibourl);
         $("a.toqq").attr("href", newoqqurl);
         $("a.toweixin").attr("href", newoweixinurl);
     }

结果：可以实现分享，如下：

微博分享：

qq 分享：

微信分享：先弹出一个二维码，然后使用微信扫面二维码，查看分享内容

以上，就可以实现分享了。如果谁有更好的方法，请留言，大家相互学习一下~~~