Trois méthodes de partage de code pour le partage sur Weibo et WeChat

Le contenu de cet article est de partager avec vous trois codes pour réaliser le partage sur Weibo et WeChat. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

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

Vous pouvez choisir et télécharger les photos par vous-même, j'utilise Alibaba rendus vectoriels PNG

téléchargés depuis la bibliothèque d'icônes :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!