简易分享功能(非第三方)
在做一个新项目时,需要一个新浪和微信的分享功能,起初看到这个需求,感觉没有什么,直接使用第三方比较成熟的分享组件就可以的,比如: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); } });
郑重声明:本博客仅用于个人整理和总结学习笔记,如有任何疑问欢迎留言!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述