html简单的分享功能
超级简单的分享。
包括:QQ、QQ空间、新浪微博、腾讯微博,微信(只是一个二维码);
1、首先是html代码:
(前端我并不太会,一直用的都是bootstrap)
<div class="col-sm-5 col-xs-5 btn btn-success img-fen">
<a href="#" class="a-link " onclick="open_share('qq')">
<img src="~/Content/WapHomeicon/qq.png" />
QQ好友
</a>
</div> <div class="col-sm-5 col-xs-5 btn btn-success img-fen">
<a href="#" class="a-link" data-toggle="modal" data-target="#myWeixin">
<img src="~/Content/WapHomeicon/weixin.png" />
微信
</a>
</div>
<div class="col-sm-5 col-xs-5 btn btn-success img-fen">
<a href="#" class="a-link" onclick="open_share('qzone')">
<img src="~/Content/WapHomeicon/qz.png" />
QQ空间
</a>
</div>
<div class="col-sm-5 col-xs-5 btn btn-success img-fen">
<a href="#" class="a-link" onclick="open_share('weibo')">
<img src="~/Content/WapHomeicon/weibo.png" />
新浪微博
</a>
</div><!-- /.modal-content -->
1、然后js代码:
(这里不包括微信的,)
function open_share(type) {
var shareUrl = ‘http://www.baidu.com’;
var shareTitle = '自定义标题';
var shareImg = 'http://s.jiathis.com/qrcode.php?url=' + shareUrl;
var shareDesc = '自定义内容';
var openUrl = '';
switch (type) {
case 'qzone':
openUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + shareUrl + '&title=' + shareTitle + '&pics=' + shareImg
break;
case 'weixin':
t_delay('请在微信客户端使用');
return false;
break;
case 'qq':
openUrl = 'http://connect.qq.com/widget/shareqq/index.html?url=' + shareUrl + '&desc=' + shareDesc + '&summary=' + shareDesc + '&site=' + shareUrl + '&pics=' + shareImg;
break;
case 'tqq':
openUrl = 'http://v.t.qq.com/share/share.php?title=' + shareTitle + '&url=' + shareUrl + '&site=' + shareUrl + '&pic=' + shareImg;
break;
case 'weibo':
openUrl = 'http://v.t.sina.com.cn/share/share.php?url=' + shareUrl + '&title=' + shareTitle + '&&source=' + shareUrl + '&sourceUrl=' + shareUrl + '&content=' + shareDesc + '&pic=' + shareImg;
break;
}
window.open(openUrl); }
3、然后微信的是弹出二维码:
(用的还是bootstrap模态框)
<!-- 模态框(Modal) -->
<div class="modal fade" id="myWeixin" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="xian">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
用微信扫描二维码分享到朋友圈
</h4>
</div>
<div class="modal-body erweima">
<img src="http://s.jiathis.com/qrcode.php?url=http://www.baidu.com" alt="微信二维码" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
4、最后是判断是否在微信中打开:
(从别处扒来的,我这里做的是如果是微信中打开,就把原先弹出的二维码和模态框给移除,放上一张带箭头的提示图片,让用户用微信自带的分享。)
//判断微信
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
$("div").remove("div[class=modal-content]");
var $htmlLi = $('<img src="~/Content/WapHomeicon/xian.png" style="margin-left:120px;" alt="xian"/>'); //创建DOM对象
var $ul = $("#xian"); //获取UL对象
$ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表 } else {
//不是微信
}
}
html简单的分享功能的更多相关文章
- 在Android中使App高速、简单地支持新浪微博、微信、QQ、facebook等十几个主流社交平台的分享功能
前言 在如今的APP或者游戏中,分享功能差点儿已经成为标配.分享功能不但能够满足用户的需求.也能够为产品带来很多其它的用户,甚至能够对用户的行为.活跃度.年龄段等情况进行数据统计,使得软件公司能够对产 ...
- Android中使用ShareSDK集成分享功能
引言 现在APP开发集成分享功能已经是非常普遍的需求了.其他集成分享技术我没有使用过,今天我就来介绍下使用ShareSDK来进行分享功能开发的一些基本步骤和注意点,帮助朋友们避免一些坑.好了 ...
- Web 项目中分享到微博、QQ空间等分享功能
Web 项目中分享到微博.QQ空间等分享功能 网上有很多的模板以及代码,但是有很多都不能分享内容,简单的测试了下: 以新浪微博为例,文本框中的内容是title属性,下面的链接是url属性,如果你的链接 ...
- Android 微信SDK分享功能中的最全过程步骤分析
在前面有一章已经分析过怎么用官方的demo分享微信信息了,在这里我就不再多说,其中关于在自己应用分享说得很简单,本文作者也是经过一番折腾才弄成功,为了以后让大家都少走弯路,决定在这里从头到尾介绍怎么在 ...
- 【Android进阶】使用第三方平台ShareSDK实现新浪微博的一键分享功能
在公司最近的一个项目中,需要实现一键分享功能,在这里我使用的是第三方平台ShareSDK,将使用经验与大家分享 先看效果图 主界面 分享界面 由于第一次使用,所以需要先进行新浪授权,授权界面 分享结果 ...
- android 实现分享功能两种方法
当我想做一个智能的记事本的时候,我就在尝试自己写一组分享功能.后来才知道,原来每个社交软件中都有自己的分享接口. 这就大大减少了我们的代码量了. 第一种方法:特点--简单 package com.ex ...
- 在Unity3D项目中接入ShareSDK实现安卓平台微信分享功能(可使用ShareSDK默认UI或自定义UI)
最近公司的大厅要重做,我协助主程一起制作新大厅和新框架,前面制作的编辑器也派上了用场.等全部功能做完后我会再写一个复盘,这两天主程在忙于写热更新的功能,所以把接入分享SDK功能的任务交给了我,Shar ...
- 通过JiaThis API接口自定义分享功能按钮实现分享功能本地化
http://www.mdaima.com/jingyan/20.html 最早李雷博客采用的是百度分享插件,为此还发过博文讲解如何在一个页面调用多个按钮分享不同的文章,感兴趣的朋友可以在本站搜索一下 ...
- React Native(十五)——RN中的分享功能
终于,终于,可以总结自己使用RN时的分享功能了-- 为什么呢?且听我慢慢道来吧: 从刚开始接触React Native(2017年9月中旬)就着手于分享功能,直到自己参与公司的rn项目开发中,再到现在 ...
随机推荐
- ZOJ 3379 Master Spark
计算出中轴能覆盖到某个点的极角范围,最大覆盖次数即是答案. 首先把中轴和点重合,此时中轴的角度为theta = atan(y/x), 然后以原点为圆心旋转点和抛物线相交求出之间的夹角, 把x = a* ...
- Android NDK r8 Cygwin CDT 在window下开发环境搭建 安装配置与使用 具体图文解说
版权声明:本博客全部文章均为原创.欢迎交流.欢迎转载:转载请勿篡改内容,而且注明出处,谢谢! https://blog.csdn.net/waldmer/article/details/3272500 ...
- gluon 实现多层感知机MLP分类FashionMNIST
from mxnet import gluon,init from mxnet.gluon import loss as gloss, nn from mxnet.gluon import data ...
- 【洛谷P1265】公路修建
公路修建 题目链接 分析题意,可以发现,在(1)的条件下,(2)的情况是不会发生的, 于是直接求MST(Min Set Tree) 然而稠密图克鲁斯卡尔会TLE,建图还会爆空间, 所以用prime,用 ...
- HDU 1399 Starship Hakodate-maru(暴力搜索)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1399 Starship Hakodate-maru Time Limit: 2000/1000 MS ...
- Tomcat 服务器体系结构
connector 监听端口,监听到以后,交给 Engine 引擎 处理,引擎会根据请求找到对应的主机,找到主机后再去找对应的应用. 如果我们将 port 改为 80,那访问的时候就不用输入端口号,因 ...
- 配置两台Azure服务器,一台加入另一台的ad域加入不进去的问题
AD服务器 10.0.0.4 数据库服务器 10.0.0.5 将数据库服务器加入到AD域中,需要将Azure的DNS改成10.0.0.4 Copy一下
- how to create a custom form for sharepoint list
在VS中创建一个applicationPage映射到Layouts文件夹下,然后代码如下: SPList lstTest = web.Lists["Shared Documents" ...
- js点赞效果图
点赞时点赞图标会发生变化. html部分: <img src="img/icon_thumb_up.png" id="imgs1" style=" ...
- 'version' contains an expression but should be a constant. @ line 13, column 11问题的解决
<modelVersion>4.0.0</modelVersion> <groupId>cy.nad.cyg</groupId> <artifac ...