HTML implementation is introduced with a simple sharing function-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML implementation is introduced with a simple sharing function

黄舟

May 26, 2017 pm 04:17 PM

Super simple sharing.

Includes: QQ, QQ Space, Sina Weibo, Tencent Weibo, WeChat (just a QR code);

1. The first is the html code:

( I’m not very good at the front end, I’ve always used bootstrap)

 1  <div class="col-sm-5 col-xs-5 btn btn-success img-fen"> 
 2                         <a href="#" class="a-link " onclick="open_share(&#39;qq&#39;)"> 
 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(&#39;qzone&#39;)">
 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(&#39;weibo&#39;)">
 22                             <img src="~/Content/WapHomeicon/weibo.png" />
 23                             新浪微博
 24                         </a>
 25                     </div><!-- /.modal-content -->

Copy after login

1, and then the js code:

(WeChat is not included here,)

1  function open_share(type) { 
2         var shareUrl = ‘http://www.baidu.com’; 
3         var shareTitle = &#39;自定义标题&#39;; 
4         var shareImg = &#39;http://s.jiathis.com/qrcode.php?url=&#39; + shareUrl; 
5         var shareDesc = &#39;自定义内容&#39;; 
6         var openUrl = &#39;&#39;; 
7         switch (type) { 
8             case &#39;qzone&#39;: 
9                 openUrl = &#39;http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=&#39; + shareUrl + &#39;&title=&#39; + shareTitle + &#39;&pics=&#39; + shareImg
12                 break;
13             case &#39;weixin&#39;:
14                 t_delay(&#39;请在微信客户端使用&#39;);
15                 return false;
16                 break;
17             case &#39;qq&#39;:
18 openUrl = &#39;http://connect.qq.com/widget/shareqq/index.html?url=&#39; + shareUrl + &#39;&desc=&#39; + shareDesc + &#39;
&summary=&#39; + shareDesc + &#39;&site=&#39; + shareUrl + &#39;&pics=&#39; + shareImg;
21                 break;
22             case &#39;tqq&#39;:
23  openUrl = &#39;http://v.t.qq.com/share/share.php?title=&#39; + shareTitle + &#39;&url=&#39; + shareUrl + &#39;&site=&#39; + shareUrl + 
&#39;&pic=&#39; + shareImg;
26                 break;
27             case &#39;weibo&#39;:
28          openUrl = &#39; 
=&#39; + shareUrl + &#39;&title=&#39; +  shareTitle + &#39;&&source=&#39; + shareUrl + &#39;
&sourceUrl=&#39; + shareUrl + &#39;&content=&#39; + shareDesc + &#39;&pic=&#39; + shareImg;
33                 break;
34         }
35         window.open(openUrl);   
}

Copy after login

3, Then the QR code pops up on WeChat:

(still using the bootstrap modal box)

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 -->

Copy after login

4. Finally, it is judged whether to open it in WeChat:

(from I picked it up from elsewhere. What I did here was to remove the QR code and modal box that originally popped up if it was opened in WeChat, and put a prompt picture with an arrow to allow users to share using WeChat. .)

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 = $(&#39;<img src="~/Content/WapHomeicon/xian.png" style="margin-left:120px;" alt="xian"/>&#39;); 
7  
8         //创建DOM对象 
9          var $ul = $("#xian");   //获取UL对象
10          $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表
11 
12         } else {
13             //不是微信
14            }
15    
}

Copy after login

The above is the detailed content of HTML implementation is introduced with a simple sharing function. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn