整理简易分享功能

    在做一个新项目时，需要一个新浪和微信的分享功能，起初看到这个需求，感觉没有什么，直接使用第三方比较成熟的分享组件就可以的，比如：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