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

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

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 = '自定义标题'; 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); }

Copy after login

3, Then the QR code pops up on WeChat:

(still using the bootstrap modal box)

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

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 = $(''); 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!