Maison > interface Web > js tutoriel > Trois méthodes de partage de code pour le partage sur Weibo et WeChat

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

零到壹度
Libérer: 2018-04-10 10:44:30
original
7417 Les gens l'ont consulté


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>
Copier après la connexion
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;
}
Copier après la connexion
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 -->
Copier après la connexion
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 :


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

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

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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal