记录web平台分享到qq、微信、微博的一些问题

前段时间做了一个博客网站，对于其中发布的文章想实现可以分享给QQ好友、微信、新浪微博，这里做一个整理。

一、QQ好友分享

1、api请求地址：

http://connect.qq.com/widget/shareqq/index.html

2、代码示例：

const qqShare = () => {
  let shareArgs = {
    desc: "",
    url: document.location,
    pics: this.content.cover,
    title: this.content.title,
    summary: this.content.descript || "暂无摘要信息",
  };

  let temp = [];
  for (var i in shareArgs) {
    temp.push(i + "=" + encodeURIComponent(shareArgs[i] || ""));
  }

  let url = "http://connect.qq.com/widget/shareqq/index.html?" + temp.join("&");
  window.open(url, "_blank");
}

3、参数说明：

4、分享示例：

5、注意事项：

今天通过QQ分享给好友时，发现分享出去的文章死活都不出相关的文章封面，在找了一大堆资料之后，终于找到了破解之法（先问候一下腾讯做api的这个人，淦！😒）。分享的图片一定要是你当前域名下可访问的图片地址，比如说你的站点域名是：http://www.baidu.com,那么你的图片地址必须是http://www.baidu.com/xxxx/xxxx.png。换成http://www.baidu.com:3000/xxxx/xxxx.png都不行🙄（因为我站点的图片都是分开的，不在同一个站点下面，最终的解决办法是通过nginx做了一个反向代理，把存放图片的站点地址，代理到博客网站的域名下，通过访问博客的地址来获取图片）。

二、微博分享

1、api请求地址：

http://v.t.sina.com.cn/share/share.php

2、代码示例：

const wbShare = () => {
  let shareUrl = "http://v.t.sina.com.cn/share/share.php?";
  shareUrl += "&url=" + encodeURIComponent(document.location); 
  shareUrl += "&title=" + encodeURIComponent(document.title); 
  shareUrl += "&content=" + "utf-8"; 
  shareUrl += "&pic=" + encodeURIComponent(this.content.cover); 
  
  window.open(shareUrl, "_blank");
}

3、参数说明：

4、分享示例： 

三、微信分享

关于微信分享这里就不在做过多描述，PC上的微信分享都是通过手机微信扫码，在移动端微信环境中进行查看分享的，详细的操作可以登录 微信开放文档-JSSDK说明文档 进行详细的查看。

关于微信分享，首先要生成你文章的相关二维码，然后通过手机微信扫码进行访问，比如像一下图示这样：

关于生成二维码的相关插件，博主用的是“vue-qr”这个二维码生成插件，关于插件的使用介绍，请参考：https://www.jianshu.com/p/ef5803f2b96b

插件下载方式：

npm install vue-qr --save