Heim > Web-Frontend > js-Tutorial > Drei Code-Sharing-Methoden zum Teilen auf Weibo und WeChat

Drei Code-Sharing-Methoden zum Teilen auf Weibo und WeChat

零到壹度
Freigeben: 2018-04-10 10:44:30
Original
7417 Leute haben es durchsucht


Der Inhalt dieses Artikels besteht darin, drei Codes mit Ihnen zu teilen, um das Teilen auf Weibo und WeChat zu realisieren. Freunde in Not können sich darauf beziehen

html

<!-- 分享 --><p class="share-box">
    <b style="vertical-align: middle;">分享到:</b>
    <a title="分享到新浪微博" class="shareSina"><span class="share-icon"></span><span class="share-text">新浪微博</span></a>
    <a title="分享到微信" class="shareWX"><span class="share-icon"></span><span class="share-text">微信</span></a></p><!-- 微信弹出二维码 --><p class="wx-box">
    <p class="wx-box-head">
        <span>分享到微信</span>
        <a href="#" onclick="return false;" class="wx-box-close">×</a>
    </p>
    <p id="wxCode" class="wx-box-main">

    </p>
    <p class="wx-box-foot">
        打开微信,点击底部的“发现”,        <br>
        使用“扫一扫”即可将网页分享至朋友圈。    </p></p>
Nach dem Login kopieren

css

/* share */
.shareSina,
.shareWX{  
  display: inline-block;    
  height: 25px;    
  z-index: 1;    
  cursor: pointer;    
  vertical-align: middle;
}
.share-icon{  
  display: inline-block;    
  width: 22px;    
  height: 22px;    
  z-index: 1;    
  cursor: pointer;    
  text-indent: -9999px;    
  vertical-align: middle;
}
.shareSina .share-icon{  
  background: url(/img/share-sina.png) no-repeat;    
  background-size:100%;
}
.shareWX .share-icon{   
  background: url(/img/share-wx.png) no-repeat;    
  background-size:100%;
}
.share-text{  
  vertical-align: middle;
}
.wx-box{  
  left: 3rem;    
  top: 1rem;    
  position: absolute;    
  margin: 0;    
  z-index: 1001;    
  background: #fff;    
  border: solid 1px #d8d8d8;    
  font-size: 0.12rem;   
  padding: 0.15rem;    
  display: none;
}
.wx-box .wx-box-head{  
  font-size: 0.12rem;    
  text-align: left;    
  line-height: 0.16rem;    
  height: 0.16rem;    
  position: relative;    
  color: #000;
}
.wx-box .wx-box-close{  
  width: 0.16rem;    
  height: 0.16rem;    
  position: absolute;    
  right: 0;    
  top: 0;    
  color: #999;    
  text-decoration: none;    
  font-size: 0.16rem;
}
.wx-box .wx-box-main{  
  padding: 0.15rem 0.1rem;    
  min-height: 2rem;    
  text-align: center;
}
.wx-box .wx-box-foot{  
  font-size: 12px;    
  text-align: left;    
  line-height: 22px;    
  color: #666;
}
Nach dem Login kopieren

js

<!-- share -->
<script src="js/jquery/jquery.qrcode.min.js"></script>
<script>
    var ShareTip = function(){}    //分享到新浪微博
    ShareTip.prototype.sharetosina=function(title,url)
    {
        var sharesinastring=&#39;http://v.t.sina.com.cn/share/share.php?title=&#39;+title+&#39;&url=&#39;+url+&#39;&content=utf-8&sourceUrl=&#39;+url;
 //            var sharesinastring=&#39;http://v.t.sina.com.cn/share/share.php?&appkey=&#39;+appkey+&#39;&title=&#39;+title+&#39;&url=&#39;+url+&#39;&content=utf-8&sourceUrl=&#39;+url+&#39;&pic=&#39;picurl;
        window.open(sharesinastring,&#39;newwindow&#39;,&#39;height=400,width=400,top=100,left=100&#39;);
    }

    $(&#39;.shareSina&#39;).on(&#39;click&#39;, function () {
        var shareTitle = $(&#39;.blog-single-head h1&#39;).text();        
        var shareContent = $(&#39;.blog-single-head h2&#39;).text();        
        var shareUrl = window.location.href;        
        var share1 = new ShareTip();
        share1.sharetosina(shareTitle + "  " + shareContent,shareUrl);
    })    
    
    
    //分享到微信
    $(&#39;.shareWX&#39;).on(&#39;click&#39;, function () {
        $(&#39;.wx-box&#39;).css(&#39;display&#39;, &#39;block&#39;);        
        var shareUrl = window.location.href;        
        //生成二维码
        $("#wxCode").empty().qrcode({
            render: &#39;canvas&#39;, 
            text: shareUrl //任意内容
        });
    })
    $(&#39;.wx-box-close&#39;).on(&#39;click&#39;, function () {
        $(&#39;.wx-box&#39;).css(&#39;display&#39;, &#39;none&#39;);
    })</script><!-- share end -->
Nach dem Login kopieren

Sie können die Bilder selbst auswählen und herunterladen, ich verwende Alibaba Vektor-PNG

-Renderings, die aus der Symbolbibliothek heruntergeladen wurden:
Drei Code-Sharing-Methoden zum Teilen auf Weibo und WeChat

Drei Code-Sharing-Methoden zum Teilen auf Weibo und WeChat

Drei Code-Sharing-Methoden zum Teilen auf Weibo und WeChat

Das obige ist der detaillierte Inhalt vonDrei Code-Sharing-Methoden zum Teilen auf Weibo und WeChat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage