超级简单的分享。

包括: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简单的分享功能的更多相关文章

  1. 在Android中使App高速、简单地支持新浪微博、微信、QQ、facebook等十几个主流社交平台的分享功能

    前言 在如今的APP或者游戏中,分享功能差点儿已经成为标配.分享功能不但能够满足用户的需求.也能够为产品带来很多其它的用户,甚至能够对用户的行为.活跃度.年龄段等情况进行数据统计,使得软件公司能够对产 ...

  2. Android中使用ShareSDK集成分享功能

    引言      现在APP开发集成分享功能已经是非常普遍的需求了.其他集成分享技术我没有使用过,今天我就来介绍下使用ShareSDK来进行分享功能开发的一些基本步骤和注意点,帮助朋友们避免一些坑.好了 ...

  3. Web 项目中分享到微博、QQ空间等分享功能

    Web 项目中分享到微博.QQ空间等分享功能 网上有很多的模板以及代码,但是有很多都不能分享内容,简单的测试了下: 以新浪微博为例,文本框中的内容是title属性,下面的链接是url属性,如果你的链接 ...

  4. Android 微信SDK分享功能中的最全过程步骤分析

    在前面有一章已经分析过怎么用官方的demo分享微信信息了,在这里我就不再多说,其中关于在自己应用分享说得很简单,本文作者也是经过一番折腾才弄成功,为了以后让大家都少走弯路,决定在这里从头到尾介绍怎么在 ...

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

    在公司最近的一个项目中,需要实现一键分享功能,在这里我使用的是第三方平台ShareSDK,将使用经验与大家分享 先看效果图 主界面 分享界面 由于第一次使用,所以需要先进行新浪授权,授权界面 分享结果 ...

  6. android 实现分享功能两种方法

    当我想做一个智能的记事本的时候,我就在尝试自己写一组分享功能.后来才知道,原来每个社交软件中都有自己的分享接口. 这就大大减少了我们的代码量了. 第一种方法:特点--简单 package com.ex ...

  7. 在Unity3D项目中接入ShareSDK实现安卓平台微信分享功能(可使用ShareSDK默认UI或自定义UI)

    最近公司的大厅要重做,我协助主程一起制作新大厅和新框架,前面制作的编辑器也派上了用场.等全部功能做完后我会再写一个复盘,这两天主程在忙于写热更新的功能,所以把接入分享SDK功能的任务交给了我,Shar ...

  8. 通过JiaThis API接口自定义分享功能按钮实现分享功能本地化

    http://www.mdaima.com/jingyan/20.html 最早李雷博客采用的是百度分享插件,为此还发过博文讲解如何在一个页面调用多个按钮分享不同的文章,感兴趣的朋友可以在本站搜索一下 ...

  9. React Native(十五)——RN中的分享功能

    终于,终于,可以总结自己使用RN时的分享功能了-- 为什么呢?且听我慢慢道来吧: 从刚开始接触React Native(2017年9月中旬)就着手于分享功能,直到自己参与公司的rn项目开发中,再到现在 ...

随机推荐

  1. ZOJ 3379 Master Spark

    计算出中轴能覆盖到某个点的极角范围,最大覆盖次数即是答案. 首先把中轴和点重合,此时中轴的角度为theta = atan(y/x), 然后以原点为圆心旋转点和抛物线相交求出之间的夹角, 把x = a* ...

  2. Android NDK r8 Cygwin CDT 在window下开发环境搭建 安装配置与使用 具体图文解说

    版权声明:本博客全部文章均为原创.欢迎交流.欢迎转载:转载请勿篡改内容,而且注明出处,谢谢! https://blog.csdn.net/waldmer/article/details/3272500 ...

  3. gluon 实现多层感知机MLP分类FashionMNIST

    from mxnet import gluon,init from mxnet.gluon import loss as gloss, nn from mxnet.gluon import data ...

  4. 【洛谷P1265】公路修建

    公路修建 题目链接 分析题意,可以发现,在(1)的条件下,(2)的情况是不会发生的, 于是直接求MST(Min Set Tree) 然而稠密图克鲁斯卡尔会TLE,建图还会爆空间, 所以用prime,用 ...

  5. HDU 1399 Starship Hakodate-maru(暴力搜索)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1399 Starship Hakodate-maru Time Limit: 2000/1000 MS ...

  6. Tomcat 服务器体系结构

    connector 监听端口,监听到以后,交给 Engine 引擎 处理,引擎会根据请求找到对应的主机,找到主机后再去找对应的应用. 如果我们将 port 改为 80,那访问的时候就不用输入端口号,因 ...

  7. 配置两台Azure服务器,一台加入另一台的ad域加入不进去的问题

    AD服务器   10.0.0.4 数据库服务器    10.0.0.5 将数据库服务器加入到AD域中,需要将Azure的DNS改成10.0.0.4 Copy一下

  8. how to create a custom form for sharepoint list

    在VS中创建一个applicationPage映射到Layouts文件夹下,然后代码如下: SPList lstTest = web.Lists["Shared Documents" ...

  9. js点赞效果图

    点赞时点赞图标会发生变化. html部分: <img src="img/icon_thumb_up.png" id="imgs1" style=" ...

  10. 'version' contains an expression but should be a constant. @ line 13, column 11问题的解决

    <modelVersion>4.0.0</modelVersion> <groupId>cy.nad.cyg</groupId> <artifac ...