首页 > 代码库 > 简易分享功能（非第三方）
简易分享功能（非第三方）
在做一个新项目时，需要一个新浪和微信的分享功能，起初看到这个需求，感觉没有什么，直接使用第三方比较成熟的分享组件就可以的，比如：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=http://www.mamicode.com/"#" data-type="sina">新浪微博</a></li> <li><a href=http://www.mamicode.com/"#" data-type="tecent">腾讯微博</a></li> <li><a href=http://www.mamicode.com/"" 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
简易分享功能（非第三方）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。