一、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() {
// 在这里提示"分享失败,您取消了分享!"
}
});
})
网友评论