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

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

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

             <div @click="shareTo('qzone')">     
                <svg class="icon" aria-hidden="true"  style="font-size:30px;">
                  <use xlink:href="#icon-kongjian"></use>
                </svg>
             </div> 
             <div @click="shareTo('qq')">     
                <svg class="icon" aria-hidden="true" style="font-size:25px;">
                   <use xlink:href="#icon-qq"></use>
                </svg>
             </div> 
             <div @click="shareTo('sina')">    
                <svg class="icon" aria-hidden="true" style="font-size:28px;">
                   <use xlink:href="#icon-icon_xinlang-chunselogo"></use>
                </svg>
             </div> 

  如图所示，关于横竖排列，按自己需求

第二步，编写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之类的自己按需设置