超簡單的分享。
包括：QQ、QQ空間、新浪微博、騰訊微博，微信（只是一個二維碼）；
#1、首先是html代碼：
（前端我並不太會，一直用的都是bootstrap）
1 <div class="col-sm-5 col-xs-5 btn btn-success img-fen">
2 <a href="#" class="a-link " onclick="open_share('qq')">
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('qzone')">
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('weibo')">
22 <img src="~/Content/WapHomeicon/weibo.png" />
23 新浪微博
24 </a>
25 </div><!-- /.modal-content -->
登入後複製
1、然後js程式碼：
（這裡不包括微信的，）
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、然後微信的是彈出二維碼：
（用的還是bootstrap模態框）
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 -->
登入後複製
4、最後是判斷是否在微信中開啟：
（從別處扒來的，我這裡做的是如果是微信中打開，就把原先彈出的二維碼和模態框給移除，放上一張帶箭頭的提示圖片，讓用戶用微信自帶的分享。
以上是html實作以一個簡單的分享功能介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
