首页 > 代码库 > 整理简易分享功能

整理简易分享功能

    在做一个新项目时,需要一个新浪和微信的分享功能,起初看到这个需求,感觉没有什么,直接使用第三方比较成熟的分享组件就可以的,比如: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="http://www.mamicode.com/#" data-type="sina">新浪微博</a></li>    <li><a href="http://www.mamicode.com/#" data-type="tecent">腾讯微博</a></li>    <li><a href="" data-type="qzone">QQ空间</a></li>    <li><a href="http://www.mamicode.com/#" data-type="renren">人人</a></li>    <li><a href="http://www.mamicode.com/#" 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="http://www.mamicode.com/‘+url+‘" height=150 width=150>‘);                });                break;            default:                alert(type);        }    });

  

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

 

整理简易分享功能