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