三种实现微博、微信分享的代码分享

本篇文章给大家分享的内容是三种代码实现微博、微信分享 ，有着一定的参考价值，有需要的朋友可以参考一下

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='http://v.t.sina.com.cn/share/share.php?title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url;
 //            var sharesinastring='http://v.t.sina.com.cn/share/share.php?&appkey='+appkey+'&title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url+'&pic='picurl;
        window.open(sharesinastring,'newwindow','height=400,width=400,top=100,left=100');
    }

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

图片可以自己去选择下载，我用的是阿里巴巴矢量图标库中下载的png

效果图：

以上就是三种实现微博、微信分享的代码分享的详细内容，更多请关注Gxl网其它相关文章！