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