当前位置:

正文

前段时间做了一个博客网站,对于其中发布的文章想实现可以分享给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、参数说明:

参数 说明 必要性
url 分享的当前链接地址(文章地址,可让别人通过链接访问你分享的内容) 必须
desc 描述信息(通过QQ对话框的形式发送给你分享的好友) 可选
title 分享的标题 必须
summary 分享的摘要信息 可选
pics 分享的当前文章的封面图片 可选

 

4、分享示例:

qq分享图片-魏超个人博客

 

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、参数说明:

参数 说明 必要性
url 设置分享的内容链接|默认当前页location 可选
title 设置分享的标题|默认当前页标题 可选
content 设置页面编码gb2312|utf-8 可选
pic 设置图片链接|默认为空 可选

 

4、分享示例: 

 

 

三、微信分享

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

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

 

 

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

插件下载方式:

npm install vue-qr --save

 

 

创作不易,感谢您对作者的支持!~( ̄▽ ̄)~
文章评论
评论列表 (有 0 条评论)
还没有评论,来说两句吧......