a 标签实现分享功能

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

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

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

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

例如:要分享如下分享按钮:分别分享到微博,qq,微信

a 标签实现分享功能_第1张图片

 

那怎么做呢,一种是拼接好分享地址:包括分享的地址(即要跳转的地址),以及上面说到的那些参数,把这些拼接成一个字符串地址,然后使用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     }

 

结果:可以实现分享,如下:

微博分享:

a 标签实现分享功能_第2张图片

 

qq 分享:

a 标签实现分享功能_第3张图片

 

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

a 标签实现分享功能_第4张图片

 

 

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

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

你可能感兴趣的:(a 标签实现分享功能)