首页 > web前端 > js教程 > 正文

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

零到壹度
发布: 2018-04-10 10:44:30
原创
8199人浏览过


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

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

效果图:
分享按钮

微博分享

微软爱写作
微软爱写作

微软出品的免费英文写作/辅助/批改/评分工具

微软爱写作 17
查看详情 微软爱写作

微信分享

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

相关标签:
微信app下载
微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号