温江做网站

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

新网创想网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

html简单的分享功能

目前创新互联已为近千家的企业提供了网站建设、域名、雅安服务器托管、网站运营、企业网站设计、剑河网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

超级简单的分享。

包括：QQ、QQ空间、新浪微博、腾讯微博，微信（只是一个二维码）；

1、首先是html代码：

（前端我并不太会，一直用的都是bootstrap）

html简单的分享功能

 1   2                          3                              4                             QQ好友 5                          6

7 8 9 10 11 微信12 13

14 15 16 17 QQ空间18 19

20 21 22 23 新浪微博24 25

html简单的分享功能

1、然后js代码：

（这里不包括微信的，）

html简单的分享功能

 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);   }

html简单的分享功能

3、然后微信的是弹出二维码：

（用的还是bootstrap模态框）

html简单的分享功能

 1   2              4                  5                      6                          7                              9                                 ×10                             11                             12                                 用微信扫描二维码分享到朋友圈13                             14                         15                         16                             19                         20                         21                             23                                 关闭24                             25                         26                     27                 28

html简单的分享功能

4、最后是判断是否在微信中打开：

（从别处扒来的，我这里做的是如果是微信中打开，就把原先弹出的二维码和模态框给移除，放上一张带箭头的提示图片，让用户用微信自带的分享。）

html简单的分享功能

 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 = $(''); 
 7  8         //创建DOM对象 9          var $ul = $("#xian");   //获取UL对象10          $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表11 12         } else {13             //不是微信14            }15    }

html简单的分享功能

当前标题：html简单的分享功能
文章链接：http://wjwzjz.com/article/jeseii.html