Home > Web Front-end > JS Tutorial > Three code sharing methods for sharing on Weibo and WeChat

Three code sharing methods for sharing on Weibo and WeChat

零到壹度
Release: 2018-04-10 10:44:30
Original
7417 people have browsed it


The content of this article is to share with you three codes to realize sharing on Weibo and WeChat. It has certain reference value. Friends in need can refer to it

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>
Copy after login

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;
}
Copy after login

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 -->
Copy after login

You can choose to download the picture yourself. I used the png downloaded from the Alibaba vector icon library.

Rendering:
Three code sharing methods for sharing on Weibo and WeChat

Three code sharing methods for sharing on Weibo and WeChat

Three code sharing methods for sharing on Weibo and WeChat

The above is the detailed content of Three code sharing methods for sharing on Weibo and WeChat. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template