整理简易分享功能

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

说明：

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

源码实现：

/**
 * 简易分享功能
 * author: 黑MAO
 * 2014年10月21日
 * 由于个开放平台参数不一致，这里提出比较有用的四个参数，并加以说明
 * 其他字段由于不是公共生效，使用的时候自行查阅资料
 * {
		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