vue中QQ/微博/微信分享文章

一、QQ分享

<script src="http://qzonestyle.gtimg.cn/qzone/app/qzlike/qzopensl.js#jsdate=20111201" charset="utf-8"></script>//QQ分享需要引入的一个js

1，先定义两个空字符串：

var ftit = ''; // 分享出去得文章得标题

var flink = ''; // 分享出去logo

（1）ftit这个可以获取文章得标题，
（2）flit这个可以获取文章内容得第一张图片作为分享出去得logo，或者这个参数也可以设置为网站的logo，

可以把logo放在服务器，获取一个固定的链接

2，之后就可以把参数直接拼到路径的后边

window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(document.location) + '?sharesource=qzone&title=' + ftit + '&pics=' + flink + '&summary=' + '');

（1）里边的title参数是之前获取的标题
（2）pics参数是文章的标题

二、微博分享

1，第一步和 QQ 的一样

2，

window.open('http://service.weibo.com/share/share.php?url=' + encodeURIComponent(document.location) + '?sharesource=weibo&title=' + ftit + '&pic=' + flink + '&appkey=**********');

（#）最后要加一个appkey，这个参数要去微博进行注册申请

三、微信分享

需要引入微信的js-sdk import wx from 'weixin-js-sdk'; //"weixin-js-sdk": "^1.3.2",也可以是其他版本

这时需要调取服务端的接口来拿到

1、appId // 必填，公众号的唯一标识

2、timestamp //必填，生成签名的时间戳

3、nonceStr //必填，生成签名的随机串

4、signature //必填，签名

5、jsApiList：['onMenuShareAppMessage', 'onMenuShareTimeline'] //必填，需要使用的JS接口列表

（1）当ajax请求的时候post需要传入的参数是页面当前的地址的域名，例如key是address，那么就是

var address = location.href.split('#')[0];

（2）ajax请求要加请求头

headers: {

  'Content-type': 'application/x-www-form-urlencoded'

},

（3）这个也是必加的

transformRequest: [function(data) {

  let ret = ''

  for(let it in data) {

    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'

  }

  return ret

}],

当接口调用成功拿到服务端返回的数据之后这时候需要调用微信js-sdk的config函数

wx.config({

  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，    仅在pc端时才会打印。

  appId: res.data.data.appId, // 必填，公众号的唯一标识

  timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳

  nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串

  signature: res.data.data.signature, // 必填，签名

  jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表

});

这时和QQ和微博分享一样定义三个变量

var ftit = ''; // 这个可以是文章的标题

var flink = ''; //这个可以是文章中的第一张图片 还可以是网站的logo

var str = location.href; //这个是分享出的点击进去的链接

var address  = str.replace("#", "?#"); 
// 这里定义一个address 把拿到的当前页面的路径在#前边拼接一个‘?’，这是因为微信分享的时候对vue的哈希模式下的‘#’不友好，所以对当前的路径要做这个兼容，还可以使用vue的history模式也可以避免这个问题

把准备工作做好之后，就来真正的微信分享了=>

wx.ready(function() {

  //分享到朋友圈

  wx.onMenuShareTimeline({

    title: ftit, // 分享标题

    link: address, // 分享链接（注意要对#进行处理）

    imgUrl: '', // 分享图标（可以获取文章的第一张图片，如果没有第一张图片的时候可以选择分享一个固定的官网的logo）

    success: function() {

     // 在这里提示"成功分享到朋友圈"

    },

    cancel: function() {

      // 在这里提示"分享失败,您取消了分享!"

    }

});

 //分享给朋友

  wx.onMenuShareAppMessage({

    title: ftit, // 分享标题

    desc: $this.content, // 分享描述

    link: address, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

    imgUrl: '/icon.jpg', // 分享图标

    type: 'link', // 分享类型,music、video或link，不填默认为link

    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

    success: function() {

      // 在这里提示"成功分享给朋友"

    },

    cancel: function() {

      // 在这里提示"分享失败,您取消了分享!"

    }

  });

})