HTML implementation is introduced with a simple sharing function

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="/static/imghwm/default1.png"  data-src="~/Content/WapHomeicon/qq.png"  class="lazy"   / alt="HTML implementation is introduced with a simple sharing function" > 
 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="/static/imghwm/default1.png"  data-src="~/Content/WapHomeicon/weixin.png"  class="lazy"   / alt="HTML implementation is introduced with a simple sharing function" >
 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="/static/imghwm/default1.png"  data-src="~/Content/WapHomeicon/qz.png"  class="lazy"   / alt="HTML implementation is introduced with a simple sharing function" >
 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="/static/imghwm/default1.png"  data-src="~/Content/WapHomeicon/weibo.png"  class="lazy"   / alt="HTML implementation is introduced with a simple sharing function" >
 23                             新浪微博
 24                         </a>
 25                     </div><!-- /.modal-content -->

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 = '自定义标题'; 
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, 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="/static/imghwm/default1.png"  data-src="http://s.jiathis.com/qrcode.php?url=http://www.baidu.com"  class="lazy"   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. 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="/static/imghwm/default1.png"  data-src="~/Content/WapHomeicon/xian.png"  class="lazy"     style="max-width:90%" alt="xian"/>&#39;); 
7  
8         //创建DOM对象 
9          var $ul = $("#xian");   //获取UL对象
10          $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表
11 
12         } else {
13             //不是微信
14            }
15    
}

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!