a 标签实现分享功能

在网页中，经常会用到分享功能，例如分享到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 分享：

 

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

 

 

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

转载于:https://www.cnblogs.com/huanying2015/p/9720507.html