简易分享功能（非第三方）

在做一个新项目时，需要一个新浪和微信的分享功能，起初看到这个需求，感觉没有什么，直接使用第三方比较成熟的分享组件就可以的，比如：jiathis、百度分享组件，这些都可以很轻松并且方便的完成所需要的分享任务。一般情况下，在介绍这么多之后，总要有一个但是。这次也不例外，考虑到某种原因，公司不能使用第三方的分享组件，此时就有了我现在的做的事情。做一个比较基础的分享功能，并且只提供了四新浪微博、腾讯微博、腾讯空间、微信、人人的分享功能，实现特别简单，这里只做整理。

 

    说明：

• 原生JS实现，可以任何框架完美结合使用
• 页面分享样式可自定义展示
• 自定义参数内容
• 支持弹窗和新标签页两种形式
• 可以很方便的进行新分享方式的扩展

 

    源码实现：

  

/**

 * 由于个开放平台参数不一致，这里提出比较有用的四个参数，并加以说明
 * 其他字段由于不是公共生效，使用的时候自行查阅资料
 * {
        url: '', //显示的分享链接
        title: '', //显示的分享说明
        description: '', //该参数不能公用的，只有空间和人人有效
        pic: '',    //需要显示的展示图片
    }
 */

(function() {
    /**
     * 分享构造函数
     * @param {String} type ['pop', 'tab']
     * @constructor
     */
    function Share(type) {
        this.type = type || "pop";
    }
    window.Share = Share;
    var optionsCache = {};
    Share.prototype = {
        sina: function(opts) {
            opts = opts || {};
            optionsCache = {
                url: opts.url || location.href,
                appkey: opts.appkey || '', /**您申请的应用appkey,显示分享来源(可选)*/
                title: opts.title || document.title,
                pic: opts.pic || '', /**分享图片的路径(可选)*/
                ralateUid: opts.uid || '', /**关联用户的UID，分享微博会@该用户(可选)*/
                rnd:+new Date()
            }
            var temp = [];
            for( var k in optionsCache ){
                temp.push(k + '=' + encodeURIComponent( optionsCache[k] || '' ) )
            }
            var url = 'http://service.weibo.com/share/share.php?' + temp.join('&');
            this.open(url, this.type);
        },
        renren: function(opts) {
            opts = opts || {};
            optionsCache = {
                resourceUrl: opts.url || location.href,
                api_key: opts.appkey || '',
                title: opts.title || document.title,
                pic: opts.pic || '',
                description: opts.description,
                charset: opts.charset,
                rnd:+new Date()
            }
            var temp = [];
            for( var k in optionsCache ){
                temp.push(k + '=' + encodeURIComponent( optionsCache[k] || '' ) )
            }
            var url = 'http://widget.renren.com/dialog/share?' + temp.join('&');
            this.open(url, this.type);
        },
        qzone: function(opts) {
            opts = opts || {};
            optionsCache = {
                url: opts.url || location.href,
                title: opts.title || document.title,
                pics: opts.pic || '',
                desc: opts.description,
                rnd:+new Date()
            }
            var temp = [];
            for( var k in optionsCache ){
                temp.push(k + '=' + encodeURIComponent( optionsCache[k] || '' ) )
            }
            var url = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?' + temp.join('&');
            this.open(url, this.type);

        },
        tecent: function(opts) {
            opts = opts || {};
            optionsCache = {
                url: opts.url || location.href,
                appkey: opts.appkey,
                title: opts.title || document.title,
                pic: opts.pic || '',
                desc: opts.description,
                rnd:+new Date()
            }
            var temp = [];
            for( var k in optionsCache ){
                temp.push(k + '=' + encodeURIComponent( optionsCache[k] || '' ) )
            }
            var url = 'http://share.v.t.qq.com/index.php?c=share&a=index&' + temp.join('&');
            this.open(url, this.type);
        },
        weixin: function(url, callback) {
            if(typeof url === "function") {
                callback = url;
                url = 'http://s.jiathis.com/qrcode.php?url='+decodeURIComponent(location.href);
            }else {
                url = 'http://s.jiathis.com/qrcode.php?url='+decodeURIComponent(url);
            }
            callback && callback(url);
        },
        /**

         * 打开新窗口或新标签

         * @param url 开启地址

         * @param type 开启类型

         */
        open: function(url, type) {
            var params = '';
            var windowWidth = window.innerWidth || document.body.clientWidth;
            var windowHeight = window.innerHeight || document.body.clientHeight;
            var width = Math.floor((windowWidth - 875)/2);
            var height = Math.floor((windowHeight - 645)/2);
            if(type == "pop") {
                params = 'width=875, height=645, top='+height+', left='+width+', toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no';
            }
            window.open(url,'', params);
        }
    }
})(); 

使用方法：

<ul class="share">
    <li><a href="#" data-type="sina">新浪微博</a></li>
    <li><a href="#" data-type="tecent">腾讯微博</a></li>
    <li><a href="" data-type="qzone">QQ空间</a></li>
    <li><a href="#" data-type="renren">人人</a></li>
    <li><a href="#" data-type="weixin">微信</a></li>
</ul>
<div id="qrcode-div"></div>

//分享
    var share = new Share();
    $('.share').find('a').on('click', function(e) {
        e.preventDefault();
        var opts = {
            url: 'http://www.so.com',
            title: '自定义的title',
            description: '自定义描述',
            pic: 'http://quc.qhimg.com/dm/100_100_100/t010fa3a46e8f98da93.jpg'
        };
        var type = $(this).data('type');
        switch(type) {
            case 'sina':
                share.sina(opts);
                break;
            case 'renren':
                share.renren(opts);
                break;
            case 'qzone':
                share.qzone(opts);
                break;
            case 'tecent':
                share.tecent(opts)
                break;
            case 'weixin':
                share.weixin(function(url) {
                    $('#qrcode-div').html('<img src="'+url+'" height=150 width=150>');

                });
                break;
            default:
                alert(type);
        }
    }); 

例子展示：http://cnblogs.sinaapp.com/demo/share.html