html簡單的分享功能

超級簡單的分享。

包括：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=' + shareImg12                 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 = 'http://v.t.sina.com.cn/share/share.php?url=' + 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                             <h5 class="modal-title" id="myModalLabel">12                                 用微信掃描二維碼分享到朋友圈13                             </h5>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"  alt="xian"/>'); 
 7  8         //創建DOM對象 9          var $ul = $("#xian");   //獲取UL對象10          $ul.append($htmlLi); //將$htmlLi追加到$ul元素的li列表11 12         } else {13             //不是微信14            }15    }