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简单的分享功能

最新文章

热门文章