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

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>

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

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

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

-Renderings, die aus der Symbolbibliothek heruntergeladen wurden:

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!