标签:des style blog http color io ar 使用 for
在做一个新项目时,需要一个新浪和微信的分享功能,起初看到这个需求,感觉没有什么,直接使用第三方比较成熟的分享组件就可以的,比如:jiathis、百度分享组件,这些都可以很轻松并且方便的完成所需要的分享任务。一般情况下,在介绍这么多之后,总要有一个但是。这次也不例外,考虑到某种原因,公司不能使用第三方的分享组件,此时就有了我现在的做的事情。做一个比较基础的分享功能,并且只提供了四新浪微博、腾讯微博、腾讯空间、微信、人人的分享功能,实现特别简单,这里只做整理。
/** * 由于个开放平台参数不一致,这里提出比较有用的四个参数,并加以说明 * 其他字段由于不是公共生效,使用的时候自行查阅资料 * { 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); } });
标签:des style blog http color io ar 使用 for
原文地址:http://www.cnblogs.com/WeiGe/p/4042523.html