本篇文章给大家分享的内容是三种代码实现微博、微信分享 ,有着一定的参考价值,有需要的朋友可以参考一下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='?title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url; // var sharesinastring='?&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

效果图:

分享按钮

微博分享

微信分享