分享到微博，空间，QQ好友的前端代码

我就是我 2021-08-19 14:32 501阅读 0赞

第一步，首先在iconfont中下载喜欢的图标，引入，然后编写结构部分代码，下面使用的是iconfont的彩色图标

如何使用彩色图标[https://blog.csdn.net/lanseguhui/article/details/103023791][https_blog.csdn.net_lanseguhui_article_details_103023791]

![20191212144533687.png][]  如图所示，关于横竖排列，按自己需求

第二步，编写shareTo函数

shareTo(stype){
          var ftit = '';
          var flink = '';
          var lk = '';
          var fflag = '';
        //获取文章标题
        ftit = this.nowList.title;
        fflag = this.botFlag;
        //获取网页中内容的第一张图片
        flink = $('.proChar img').eq(0).attr('src');
        if(flink){
          lk = flink;
        }
        //qq空间接口的传参
        if(stype=='qzone'){
            window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+document.location.href+'&title='+ftit+'&pics='+lk+'&summary='+document.querySelector('meta[name="description"]').getAttribute('content'));
        }
        //新浪微博接口的传参
        if(stype=='sina'){
            window.open('http://service.weibo.com/share/share.php?url='+document.location.href+'&title='+ftit+'&pic='+lk+'&appkey=');
        }
        //qq好友接口的传参
        if(stype == 'qq'){
            window.open('http://connect.qq.com/widget/shareqq/index.html?url='+document.location.href+'&title='+ftit+'&pics='+lk+'&summary='+document.querySelector('meta[name="description"]').getAttribute('content'));
        }
        },

分享的网址就是此刻地址栏的链接，以及分享的title之类的自己按需设置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_lanseguhui_article_details_103023791]: https://blog.csdn.net/lanseguhui/article/details/103023791
[20191212144533687.png]: /images/20210813/2a093930f30b4ae297b4bb9a7f93da8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/679fa34b9a694af5933f3c9cd6fb51b7.png