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

转载于:https://www.cnblogs.com/WeiGe/p/4042523.html

简易分享功能(非第三方)相关推荐

  1. iOS集成QQ、微信、微博、短信、邮件分享(非第三方集成)

    首先appdelegate中加入 - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplica ...

  2. Android进阶之使用第三方平台ShareSDK实现新浪微博的一键分享功能

    http://www.it165.net/pro/html/201402/9510.html http://www.it165.net/pro/html/201402/9510.html http:/ ...

  3. js实现第三方平台分享功能

    1. qq好友分享实现           API文档:https://connect.qq.com/intro/sharetoqq/   链接为 : http://connect.qq.com/wi ...

  4. 安卓一键分享到qq,微信,微博,官方SDK非第三方

    当我们项目中需要集成分享功能时,我们通常会采取一下几个办法: 1.调用系统自带分享 优点:简单快速,几行代码搞定,不需添加任何额外包: 缺点:系统会调出手机内部所有带分享功能的APP,且界面风格跟随系 ...

  5. ShareSDK实现第三方微信分享功能

    目标: 集成ShareSDK,然后实现自己的软件可以分享信息到微信等第三方交互平台上面去. 本文以集成ShareSDK和实现微信分享为例,具体说一下实现软件第三方分享的流程. 1. 获取注册Share ...

  6. android一键分享功能不使用任何第三方sdk

    在android中有自带的一键分享功能,不过它会把所有带分享的应用都找出来,如果我们只需要一些常见的分享应用,该如何做呢? 下面看我的效果图(横屏和竖屏自动适配): 接下来看我的调用(支持图片和文字分 ...

  7. Android 第三方QQ分享功能实现

    QQ分享功能记录和一些获取APP签名使用工具,微信分享功能现在需要公司开发者账号了,这里就不写了. 文章目录 一.QQ互联官网 1.获取应用APPID 2.下载官方SDK 二.代码部分 1.manif ...

  8. 使用第三方平台 ShareSDK 实现新浪微博的一键分享功能

    http://software.intel.com/zh-cn/blogs/2014/03/02/android-sharesdk/?utm_campaign=CSDN&utm_source= ...

  9. Android APP分享功能实现 .

    [Android应用开发详解]第01期:第三方授权认证(一)实现第三方授权登录.分享以及获取用户资料 安卓分享功能也可以使用mob提供的SDK来开发分享功能,短信验证功能.http://www.mob ...

最新文章

  1. libjpeg-turbo介绍及测试代码
  2. FD.io/VPP — VNF 应用场景
  3. 西文是指什么_儒家君子文化:何为君子?为什么要做君子,而不做小人?
  4. JAVA 对象引用,以及对象赋值
  5. tab in English
  6. linux下java多线程_Linux系统下Java问题排查——cpu使用率过高或多线程锁问题
  7. “智”在这里,图扑软件解码智慧选煤厂
  8. 数值分析实验四 最小二乘法曲线拟合
  9. lzg_ad:XPE的发布与部署步骤详解
  10. Windows 7下Git SSH 创建Key的步骤(by 星空武哥)
  11. 三角形的几何公式大全_椰岛数学:超全高中数学公式记忆表(文末分享PDF)
  12. 笔记本拆装步骤及注意事项
  13. js获取上一个页面url
  14. Java基础知识点总结(面试版)
  15. 1002 写出这个数 (C语言实现)
  16. http协议(一)/应用层
  17. springboot_vue校园二手交易平台
  18. PR字幕模板 12个大气紫色风格PR大屏字幕动态标题PR字幕模板
  19. No virtual method initSDK(Landroid/content/Context;ILcom/tencent/imsdk/v2/V2
  20. TreeSize Free 软件简介

热门文章

  1. python 坐标轴 单位刻度_Python学习笔记(matplotlib篇)--坐标轴刻度
  2. C语言中几个容易踩的“坑”!
  3. C语言和图形界面编程打造——浪漫的表白程序
  4. python在材料模拟中的应用_材料模拟python_模拟-python模拟-在不妨碍实现的情况下修补方法...
  5. elisa数据处理过程图解_ELISA原理示意图详解.ppt
  6. unsafehelper java_Java 9中将移除 Sun.misc.Unsafe
  7. V.35协议转换器指示灯告警常见故障以及排除方法解析
  8. 什么是千兆光纤收发器?其产品标准具体有哪些?
  9. 电话光端机安装的方法,电话光端机设备安装注意事项
  10. 什么叫POE交换机?POE交换机使用方法介绍?