包括：qq、qq空间、新浪微博、腾讯微博，微信（只是一个二维码）；
1、首先是html代码：
（前端我并不太会，一直用的都是bootstrap）
1 <div class="col-sm-5 col-xs-5 btn btn-success img-fen"> 2 <a href="#" class="a-link " onclick="open_share('qq')"> 3 <img src="~/content/waphomeicon/qq.png" /> 4 qq好友 5 </a> 6 </div> 7 8 <div class="col-sm-5 col-xs-5 btn btn-success img-fen"> 9 <a href="#" class="a-link" data-toggle="modal" data-target="#myweixin"> 10 <img src="~/content/waphomeicon/weixin.png" /> 11 微信 12 </a> 13 </div> 14 <div class="col-sm-5 col-xs-5 btn btn-success img-fen"> 15 <a href="#" class="a-link" onclick="open_share('qzone')"> 16 <img src="~/content/waphomeicon/qz.png" /> 17 qq空间 18 </a> 19 </div> 20 <div class="col-sm-5 col-xs-5 btn btn-success img-fen"> 21 <a href="#" class="a-link" onclick="open_share('weibo')"> 22 <img src="~/content/waphomeicon/weibo.png" /> 23 新浪微博 24 </a> 25 </div><!-- /.modal-content -->
1、然后js代码：
（这里不包括微信的，）
1 function open_share(type) { 2 var shareurl = ‘http://www.baidu.com’; 3 var sharetitle = '自定义标题'; 4 var shareimg = 'http://s.jiathis.com/qrcode.php?url=' + shareurl; 5 var sharedesc = '自定义内容'; 6 var openurl = ''; 7 switch (type) { 8 case 'qzone': 9 openurl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + shareurl + '&title=' + sharetitle + '&pics=' + shareimg 12 break; 13 case 'weixin': 14 t_delay('请在微信客户端使用'); 15 return false; 16 break; 17 case 'qq': 18 openurl = 'http://connect.qq.com/widget/shareqq/index.html?url=' + shareurl + '&desc=' + sharedesc + ' &summary=' + sharedesc + '&site=' + shareurl + '&pics=' + shareimg; 21 break; 22 case 'tqq': 23 openurl = 'http://v.t.qq.com/share/share.php?title=' + sharetitle + '&url=' + shareurl + '&site=' + shareurl + '&pic=' + shareimg; 26 break; 27 case 'weibo': 28 openurl = ' =' + shareurl + '&title=' + sharetitle + '&&source=' + shareurl + ' &sourceurl=' + shareurl + '&content=' + sharedesc + '&pic=' + shareimg; 33 break; 34 } 35 window.open(openurl); }
3、然后微信的是弹出二维码：
（用的还是bootstrap模态框）
1 <!-- 模态框（modal） --> 2 <div class="modal fade" id="myweixin" tabindex="-1" role="dialog" 3 aria-labelledby="mymodallabel" aria-hidden="true"> 4 <div class="modal-dialog" id="xian"> 5 <div class="modal-content"> 6 <div class="modal-header"> 7 <button type="button" class="close" data-dismiss="modal" 8 aria-hidden="true"> 9 × 10 </button> 11 <h4 class="modal-title" id="mymodallabel"> 12 用微信扫描二维码分享到朋友圈 13 </h4> 14 </div> 15 <div class="modal-body erweima"> 16 <img src="http://s.jiathis.com/qrcode.php?url=http://www.baidu.com" alt="微信二维码" /> 19 </div> 20 <div class="modal-footer"> 21 <button type="button" class="btn btn-default" 22 data-dismiss="modal"> 23 关闭 24 </button> 25 </div> 26 </div><!-- /.modal-content --> 27 </div><!-- /.modal-dialog --> 28 </div><!-- /.modal -->
4、最后是判断是否在微信中打开：
（从别处扒来的，我这里做的是如果是微信中打开，就把原先弹出的二维码和模态框给移除，放上一张带箭头的提示图片，让用户用微信自带的分享。）
1 //判断微信 2 function is_weixn(){ 3 var ua = navigator.useragent.tolowercase(); 4 if(ua.match(/micromessenger/i)=="micromessenger") { 5 $("div").remove("div[class=modal-content]"); 6 var $htmlli = $('<img src="~/content/waphomeicon/xian.png" style="margin-left:120px;" alt="xian"/>'); 7 8 //创建dom对象 9 var $ul = $("#xian"); //获取ul对象 10 $ul.append($htmlli); //将$htmlli追加到$ul元素的li列表 11 12 } else { 13 //不是微信 14 } 15 }
以上就是html实现以一个简单的分享功能介绍的详细内容。