简易分享功能(非第三方)

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359505.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

达梦定时迁移数据

1. 生成迁移源代码 1.1 启动DM迁移工具&#xff08;bin/dts.exe&#xff09; 1.2 右击迁移管理空白处 -> 新建工程 1.3 展开工程 -> 右击迁移&#xff0c;新建迁移 -> 输入迁移名称&#xff0c;确认 1.4 右击迁移名称&#xff0c;打开 -> 输入源数据库连接信息&…

JSP教程–最终指南

编者注&#xff1a; JavaServer Pages&#xff08;JSP&#xff09;技术使您可以轻松创建同时包含静态和动态组件的Web内容。 JSP技术提供了Java Servlet技术的所有动态功能&#xff0c;但提供了一种更自然的方法来创建静态内容。 JSP技术的主要功能包括用于开发JSP页面的语言&…

CRC校验(转)

CRC即循环冗余校验码&#xff08;Cyclic Redundancy Check[1] &#xff09;&#xff1a;是数据通信领域中最常用的一种差错校验码&#xff0c;其特征是信息字段和校验字段的长度可以任意选定。循环冗余检查&#xff08;CRC&#xff09;是一种数据传输检错功能&#xff0c;对数据…

tongweb6数据源使用中时常报空异常处理方式

1.在tongweb控制台 -> jdbc配置中设置数据源参数 1.1 勾选空闲超时&#xff0c;时间默认 1.2 勾选泄露超时时间 &#xff0c;时间为半天&#xff08;14400&#xff09; 1.3 勾选连接有效性检查、创建连接验证、获取连接验证、归还连接验证 图中设置泄露超时时间为900…

Ios tab Bar 使用方法

http://blog.sina.com.cn/s/blog_63578f140100w56m.html UITabBar* tabBar [[UITabBar alloc] initWithFrame:CGRectMake(40,0.0,240,30)]; [mainView addSubview:tabBar]; [tabBar release]; UITabBarItem *tabBarItem1 [[UITabBarItem alloc] initWithTitle:"排队人数…

spring smtp_使用Spring使用Java发送电子邮件– GMail SMTP服务器示例

spring smtp对于使用Java发送电子邮件&#xff0c; JavaMail API是标准解决方案。 如官方网页所述&#xff0c;“ JavaMail API提供了独立于平台和协议的框架来构建邮件和消息传递应用程序”。 必需的类包含在JavaEE平台中&#xff0c;但是要在独立的JavaSE应用程序中使用它&am…

关闭uboot MMU 会导致android2.3 S5pv210 系统不稳定?!why

问题描述在uboot里面屏蔽了MMU 使能//#define CONFIG_ENABLE_MMU就导致android 2.3 在S5pv210 上不稳定了&#xff0c;如果没屏蔽就稳定很多&#xff0c;why&#xff1f;&#xff01;坑爹的人啊&#xff0c;问了一些做了几年linux和android的人说没影响的&#xff0c;啥玩意啊&…

Java 9中的5个功能将改变您开发软件的方式(还有2个不会)

有望在Java 9中发布的最令人兴奋的功能是什么&#xff1f; 不要对Java 9的相对沉默近来分散注意力。JDK提交者正在努力准备下一个版本&#xff0c;该版本预计将在2015年12月完成&#xff0c;而功能将在几个月后完成 。此后&#xff0c;它将通过严格的测试和错误修复了将其计划…

eclipse远程tomcat javaweb debug样例(windows)

1.tomcat配置可被远程debug端口参数 catalina.bat 中添加 set CATALINA_OPTS-Xdebug -agentlib:jdwptransportdt_socket,servery,suspendn,address8000 导出项目war包到tomcat/webapps/目录下 切换到tomcat/bin目录下 双击startup.bat启动运行项目 2.eclipse中启动远程debug…

总账分录追溯发票或者付款

--总账分录追溯发票 SELECT DISTINCT AIA.*FROM AP_AE_HEADERS_ALL AAH, --帐户分录头表AP_AE_LINES_ALL AAL, --账户分录行表&#xff0c;每一个会计事件都会在此表中产生会计分录GL_JE_BATCHES GJB,GL_JE_HEADERS GJH,GL_JE_LINES GJL,AP_INVOICES_ALL …

mysqlDM判断字符串中是否存在非中文

MYSQL判断字符串是否全中文 正则表达式匹配[一-龥]中文字符[ a-zA-Z]英文字母[ 0-9]数字[ぁ-ゞァ-ヾ]日文字符1.查询存在非中文的记录 &#xff1a;select * from tablename where columnname REGEXP [^一-龥]; 2.查询存在中文的记录&#xff1a;select * from columnname wh…

ASP.NET MVC的ContentResult

ASP.NET MVC的ContentResult返回简单的纯文本内容&#xff0c;可通过ContentType属性指定应答文档类型&#xff0c;通过ContentEncoding属性指定应答文档的字符编码。一个例子来演习&#xff0c;自定义一个RwResult&#xff0c;它继承ContentResult&#xff0c;为视图象ASP.NET…

windows搜索指定目录下包含某个字符串的文件

1.打开cmd窗口 &#xff1a;winr 快捷键-> 输入cmd 回车 2.切换到被搜索的文件夹&#xff08;E:\shgwy文档\日常\更新\20220808&#xff09;下 如输入&#xff1a; cd E:\shgwy文档\日常\更新\20220808 e: 3.输入搜索命令 c:\Windows\System32\findstr.exe /s /i "wa…

IIS7日志文件位置

准备统计下页面访问量 查找IIS日志,发现在以前IIS6日志的位置&#xff0c;竟然木有找到日志... 查看下IIS设置&#xff0c;发现IIS7和6的默认日志位置不一样额... IIS 6 Log files location IIS 6中日志文件的位置 %windir%\System32\LogFiles IIS 7 Log files location IIS的日…

编写下载服务器。 第二部分:标头:Last-Modified,ETag和If-None-Match

客户端缓存是万维网的基础之一。 服务器应告知客户端资源的有效性&#xff0c;客户端应尽可能快地对其进行缓存。 如我们所见&#xff0c;如果不缓存Web&#xff0c;将会非常慢。 只需在任何网站上Ctrl F5并将其与普通F5进行比较-后者就会更快&#xff0c;因为它使用了已缓存的…

jwt重放攻击_4个点搞懂JWT、JWS、JWE

1.JWT是何物&#xff0c;有哪些常用的场景JWT(json web token)是设计一种简洁&#xff0c;安全&#xff0c;无状态的token的实现规范rfc7519&#xff0c;通常用于网络请求方和网络接收方之间的网络请求认证。jwt的常用场景1.1: restful api接口的无状态认证, 在传统的web应用中…

Verification Mind Games---how to think like a verifier像验证工程师一样思考

1. 有效的验证需要验证工程师使用不同于设计者的思维方式思考问题。具体来说&#xff0c;验证更加关心在严格遵循协议的基础上发现设计里面的bug&#xff0c;搜索corner cases&#xff0c;对设计的不一致要保持零容忍的态度。mindset&#xff1a;一套人们应该持有的确定的态度&…

discuz安装_手动搭建 Discuz! 论坛

一、搭建LAMP环境安装软件(Apache、MariaDB、PHP)yum install httpd php php-fpm php-mysql mariadb mariadb-server -y2.启动服务systemctl start httpdsystemctl start mariadbsystemctl start php-fpm3.安装后首次启动mariadb设置mysql_secure_installation4.登录 MariaDB&a…

关系数据库的几种设计范式介绍

关系数据库的几种设计范式介绍1、第一范式&#xff08;1NF&#xff09; 在任何一个关系数据库中&#xff0c;第一范式&#xff08;1NF&#xff09;是对关系模式的基本要求&#xff0c;不满足第一范式&#xff08;1NF&#xff09;的数据库就不是关系数据库。 所谓…

蓝桥杯 1223 第 2 场 小白入门赛

蓝桥小课堂-平方和 模拟 1 2 2 2 3 2 ⋯ n 2 n ⋅ ( n 1 ) ⋅ ( 2 n 1 ) 6 1^22^23^2\cdotsn^2\dfrac{n\;\cdot\;(n 1)\;\cdot\;(2n1)}{6} 122232⋯n26n⋅(n1)⋅(2n1)​。 write(n * (n 1) * (n * 2 1) / 6);房顶漏水啦 m a x ( 最大的行 − 最小的行 , 最大的列 −…