国内现在用的最多的 SNS 估计就是微信、微博和 QQ 空间了吧。 现在网页上一般都有分享到微博啊之类的按钮，之前我们网站上的这些都是外包做的，基本都是用别人集成好的 js 控件，但是现在因为站点升级到 https 了，而这些分享控件 js 文件都是 http 的，直接失效了。而且之前使用别人控件有些样式也不受控制，于是准备自己搞定。恩，其实很简单的，就是链接上拼接上参数就行了，下面我详细介绍下吧。
微信分享
在微信内浏览网页的时候想要把这个网页分享出去或者发送给朋友，最简单的就是直接 copy url 了。还有就是菜单栏中发送给好友和分享到朋友圈，直接发送的话会自动读取网页的 title 和 图片。我们要做的是自定义 发送出去的时候看到的图片和标题。微信分享自定义内容是最麻烦的了。 首先，你要有自己的公众号。有没有权限，直接登入公众号然后看看 【接口权限】里的分享权限是否已经拥有。 然后你们自己看 文档 吧，说起来有点麻烦啊。
其实坑爹的是要去获取签名，涉及到后端的开发，也是挺麻烦的。不过一般都写成工具类，然后访问这个页面的时候去调用下，然后把相应的参数传回前端。下面就是 html 上验证权限配置。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
然后就是获取“分享给朋友”按钮点击状态及自定义分享内容接口和获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
如果是做过微信公众号开发相关的话，应该一看就懂了。
微博分享
相比微信而言，微博就简单多了。 首先你要上 微博开放平台 申请一个账号，然后 接入网站 ，然后你会得到 appkey ，使用起来很简单，详细说明。也挺奇怪的，这个分享被放到了 wap 站接入。搞不懂，真的很难找到这个地方。
接入地址：http://weibo.cn/ext/share
| 接受参数(CGI) | 作用 | 说明 |
|---|---|---|
| ru | 分享内容URL | GET方式，必选，需要urlencode |
| rt | 分享内容标题 | GET方式，必选，中文使用UTF-8编码，需要urlencode |
| appkey | 开放平台KEY | GET方式，可选。
|
| tp | 分享图片地址 | GET方式，可选。
|
| backurl | 回跳地址 | GET方式，可选。
|
| st | 时间戳 | GET方式，必选。
|
| ntitle | 引导语 | GET方式，可选，将作为可编辑的内容放入分享框中 |
| relateUid | 关联用户的UID，分享微博会@该用户 | GET方式，可选。 |
| skipshow | 是否显示分享输入框页面 | GET方式，可选。
|
调用示例：
<a href="http://weibo.cn/ext/share?ru=http%3A%2F%2F16kxs.com%2Fwap%2FBook%2FShow.aspx%3Fid%3D7983%26lmid%3D0%26uid%3D0%26ups%3D0&rt=%E9%83%BD%E5%B8%82%E7%89%A7%E9%AC%BC%E4%BA%BA&st=1301645308&appkey=3989260088">分享到微博</a>
QQ 空间
QQ 空间分享是最简单的了 ，都不需要申请就能直接用。 官方网站 ，上也提供了集成好的组件，提供各种大小的 logo 等等。 但是也没有提供 https 的链接，而且提供的图标也都是正方形的。略坑，如果不想使用默认的话那就学微博样 ，自己拼接参数。
接入地址 ： http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey 然后参数看看下面官方提供的源码吧。
(function(){
var p = {
url:location.href,
showcount:'0',/*是否显示分享总数,显示：'1'，不显示：'0' */.
desc:'',/*默认分享理由(可选)*/
summary:'',/*分享摘要(可选)*/
title:'',/*分享标题(可选)*/
site:'',/*分享来源 如：腾讯网(可选)*/
pics:'', /*分享图片的路径(可选)*/
style:'203',
width:22,
height:22
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i]||''));
}
document.write(['<a version="1.0" class="qzOpenerDiv" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?',s.join('&'),'" target="_blank">分享</a>'].join(''));
})();
然后调用示例参考微博分享。
总结
其实我们自己用的时候一般就是 a 标签的 href 放拼接好参数的链接，然后里面放个 Logo 就好了。具体怎么展现就看你们自己的业务需求了。 其他的 SNS 分享应该都是类似的，就不再一一列举了。
<a href=""><img></img></a>
There are no comments on this post.