social-share，社会化分享组件之jquery版

Posted 2020-07-07 沉默王二

social-share，诚如其简洁所述“支持微信（二维码）、微博、Github、Google++、LinkedIn、Twitter、Facebook、RSS…， 支持四种大小设置”，够简洁，够漂亮。之前使用的“百度分享”组件，却发现可恶的植入了后台广告，页面刷新一次，广告就加载一次，让人生厌。今天有幸发现这款轻量级的social-share，真让人爱不释手，所以借此机会推广给更多需要的人。

原生的social-share（可通过harttle/social-sharegit进行下载）有两点遗憾：

1. 不支持QQ空间的分享。
2. 分享新浪时只限于文字说明，缺少图片的支持。

那么现在呢，我们来解决掉上述两个问题。

一、效果图

没有制作gif动画，图片看起来有些单调了。那么有必要通过文字描述介绍一下：

1. 百度分享的对象过于繁杂，让人有些眼花缭乱；就目前国内的社会化交流平台来说，QQ空间、新浪微博、微信的用户基数足够多，那么选定这三家，我认为更便于流量的传播。
2. 页面布局超清爽，参数配置超简单。
3. 没有任何多余的代码植入，更不会植入广告。

二、实例讲解

①、引入jquery.js和font-awesome.css

<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="${ctx}/components/jquery/jquery-1.9.1.min.js"></script>

tips：

对于jquery，特别不建议使用cdn，因为很难保证cdn的网络一直通畅，一旦jquery没有引入，整个项目几乎处于瘫痪状态。那么，你可能会问：“既然如此，为啥你的font-awesome.css要用cdn呢？”，我的回答是：“font-awesome.css版本更迭很频繁，再加上缺少font-awesome.css，项目只会在某一些式样上没有效果，影响不大。”

②、引入qrcode.min.js

<script type="text/javascript" src="${ctx}/components/share/qrcode.min.js"></script>

二维码的生成。

③、social-share.css

.social-share .qqzone a {
    background-position: 0 -756px;
    background-image: url("../../assets/images/bgs.png");
    background-repeat: no-repeat;
}

为qq空间加上图标式样。这里用的是我本地的（你酌情处理），font-awesome最新版中暂时还没有加入qq空间的图标。

其他式样不需要改动，再重复一次，原生文件从harttle/social-share git官网下载。

④、social-share.js

function render(link, config) {
    var cls = 'fa-' + (config.classMapping[link.style] || link.style), $li = $('<li class="social-share-item">'), $a = $('<a>', {
        // 此处为href上添加图片的路径
        href : link.url.replaceAll('{pic}', config.pic) || '#'
    }), $i = $('<i>', {
        class : 'fa ' + cls
    });
    $a.append($i);
    if (config.blank)
        $a.attr('target', '_blank');

    $li.append($a);
    $li.addClass(link.style);

    if ([ 'wechat', 'qrcode' ].indexOf(link.style) > -1) {
        $a.removeAttr('target');
        $li.click(function() {
            qrCodeHandler(link.url);
            return false;
        });
    }

    return $li;
}

在原生的social-share.js文件上，只需要按照注释中的提示，在a标签的href上加上图片的路径，至于使用怎样的方法，你可以自行处理。qq空间分享、新浪微博分享、微信分享，其关键之所在于a标签的href属性如何封装，那么接下来看如何通过以下三个步骤来配置a标签的href属性。

⑤、a标签的href

var YUNM = {
    linkArr : [ {
        style : 'qqzone',
        url : 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?pics={pic}&' + $.param({
            title : document.title,
            url : encodeURIComponent(location.href)
        }),
    }, {
        style : 'weibo',
        url : 'http://v.t.sina.com.cn/share/share.php?pic={pic}&' + $.param({
            appid : 'xxx',
            title : document.title,
            url : encodeURIComponent(location.href)
        })
    }, {
        style : 'wechat',
        url : location.href
    } ],
}

为social-share定义linkArr，也就是封装好a标签的href属性值。

• qq空间
  
  • style定义为qqzone
  • url的参数变量值主要有pics、title 、url （假如URL不正确的话，用firebug可查看qq空间分享的提示错误）
• 新浪微博
  
  • style定义为weibo
  • url的参数变量值主要有pic（和qq空间不同）、title 、url
• 微信
  
  • style定义为wechat
  • url为location.href，生成二维码用

⑥、页面布局

<section class="xs" pic="${deal.attrs.image_str}"></section>

1. class定义为xs，开篇有提到social-share有四种大小设置，xs为最小，原生demo中有例子。
2. pic，传递对应的分享图片，目前支持一张图片，多图暂未了解。

⑦、加载social-share

$(function() {
                // 分享
    $('section.xs', $p).each(function() {
        var $this = $(this);
        YUNM.debug('section.xs' + $this.selector);

        $this.socialShare(YUNM.linkArr, {
            size : 'xs',
            pic : $this.attr("pic")
        });
    });
});

将图片pic传递到social-share。

---

到此为止，jquery版的社会化分享组件social-share就介绍完毕了，希望对你有所帮助。