간단한 공유 기능으로 HTML 구현이 도입되었습니다.-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

간단한 공유 기능으로 HTML 구현이 도입되었습니다.

黄舟

May 26, 2017 pm 04:17 PM

공유하기가 매우 쉽습니다.

포함: QQ, QQ Space, Sina Weibo, Tencent Weibo, WeChat(QR 코드만)

1 첫 번째는 html 코드입니다.

프론트엔드가 별로 좋지 않아서 항상 부트스트랩을 사용했습니다.)

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

로그인 후 복사

1. 그러면 js 코드는 다음과 같습니다.

(여기에는 WeChat이 포함되지 않습니다.)

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

로그인 후 복사

3. 그러면 WeChat에 QR 코드가 나타납니다:

(아직도 부트스트랩 모달 상자를 사용하고 있습니다)

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. 마지막으로 WeChat에서 열지 여부를 판단합니다:

(from 다른 곳에서 주웠어요. 여기서 한 일은 원래 위챗을 열면 뜨는 QR코드와 모달박스를 없애고, 사용자들이 공유할 수 있도록 화살표가 있는 프롬프트 사진을 넣은 것이었습니다. )

아아아.

위 내용은 간단한 공유 기능으로 HTML 구현이 도입되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.