微信JS-SDK，facebook，whatsapp,messnger分享
一： 使用微信的js-sdk可以实现分享功能，按照js-sdk文档写三个函数就行了：
Wx.config({
});
Wx.ready(function(){
});
wx.error(function(){
});
代码如下：
this.$el.html(this.getXTemplate(this.contentTpl, self.pageData));
const tost = document.getElementById('tost');
const center = document.getElementById('center');
//点击分享弹出框
center.onclick = function(){
tost.style = "display:block"
};
//点击tost取消弹出框
tost.onclick = function(){
tost.style = "display:none"
};
//微信分享JS SDK开始
const shareConfig={link:window.location.href};
const shareurl = shareConfig.link;
const sharelink = shareurl.split("?")[0];
//alert(sharelink);
$.ajax({
url:'https://wechat.alisec.org/wechat/getWechatJsapiSign',
data:{url:shareConfig.link},
dataType:'json',
success:function(data){
alert('成功'+data);
wx.config({
debug:true, //true 调试时候弹窗
appId:data.data.appId, //微信appid
timestamp:data.data.timestamp, //时间戳
nonceStr:data.data.nonceStr, //随机字符串
signature:data.data.signature, //签名
jsApiList:[
'onMenuShareTimeline', //分享到朋友圈接口
'onMenuShareAppMessage',//分享到朋友接口
'onMenuShareQQ', //分享到QQ接口
'onMenuShareWeibo', //分享到微博接口
'onMenuShareQZone', //分享到QQ空间
]
});
wx.ready(function(){
//微信分享公共方法
const shareData = {
"imgUrl":'https://img.alicdn.com/tfs/TB1GoYjfnnI8KJjy0FfXXcdoVXa-117-116.jpg', //分享显示的缩略图地址
"link":`${sharelink}`, //分享地址
"desc":'这是一个空间', //分享描述
"title":'hello world', //分享标题
success: function () {
// 用户确认分享后执行的回调函数
alert(111);
},
cancel: function () {
// 用户取消分享后执行的回调函数
alert(222);
}
};
//分享给朋友
// wx.onMenuShareAppMessage({
// title:"hello world",
// desc:"这是一个空间",
// link:'http://qdm.pre.alibaba.com/core/preview/hd/hjptest.html',
// imgUrl:'https://img.alicdn.com/tfs/TB1GoYjfnnI8KJjy0FfXXcdoVXa-117-116.jpg',
// type:"",
// dataUrl:"",
// success: function () {
// // 用户确认分享后执行的回调函数
// // alert(11111);
// },
// cancel: function () {
// // 用户取消分享后执行的回调函数
// // alert(2222);
// }
// })
wx.onMenuShareTimeline (shareData);//分享到朋友圈
wx.onMenuShareAppMessage (shareData);//分享到朋友
wx.onMenuShareQQ (shareData);//分享到qq
wx.onMenuShareWeibo (shareData);//分享到微博
wx.onMenuShareQZone(shareData);//分享到qq空间
});
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，
// 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
//对于SPA可以在这里更新签名。
alert(JSON.stringify(res));
alert("好像出错了！！");
});
},error:function(data){
console.log(data);
alert(JSON.stringify(data));
}
});
//微信分享结束
//摇一摇开始
var currentValue = {
x : 0,
y : 0,
z : 0
};
//获取手机晃动之后加速器的值,创建一个对象获取
var lastValue = {
x : 0,
y : 0,
z : 0
};
//设置晃动的最小的距离，只有达到该距离时，才执行摇一摇事件
var minValue = 20;
//手机摇一摇事件
window.ondevicemotion = function(e){
var event1 = event || e;
//获取加速器对象，为了获取陀螺仪上的坐标信息
var acceleration = event1.accelerationIncludingGravity;
//记录当前加速器的值
currentValue.x = acceleration.x;
currentValue.y = acceleration.y;
currentValue.z = acceleration.z;
//判断微信摇一摇事件（手机是否晃动）
if (Math.abs(currentValue.x - lastValue.x) >= minValue || Math.abs(currentValue.y - lastValue.y) > minValue || Math.abs(currentValue.z - lastValue.z) > minValue) {
alert('摇一摇');
};
//记录最后的值（保存上一次晃动事件中的加速器的值）
lastValue.x = currentValue.x;
lastValue.y = currentValue.y;
lastValue.z = currentValue.z;
}
//摇一摇结束
二：以前做的分享：
传参数再调用android和ios的分享方法，
<#assign client_json = “{shareType:'3',contentType:'${shareContentType_weibo}',title:'${shareTitle}',description:'${shareDesc}',bigLogo:'${shareImgUrl}',URL:'${shareUrl}',scene:'${scene}',extend:''}">
adaptation:function(){
//alert(this.isNewApp()+""+this.ua);
if(this.isNewApp()!=true){
var self=this;
switch (this.system){
case "android":
this.loadScript(pub.oldAnd,function(){});
break;
case "ios":
this.loadScript(pub.oldIOS,function(){});
break;
}
}
},
三：FaceBook的分享：
使用网页分享meta标签写入分享的内容；facebook分享是是抓取页面的代码（注意是服务器返回的html代码，由js操作后的html它们是抓不到的）。分享调试器输入一个链接地址抓取是当前的页面标签不经过js渲染 ，如果想动态改变抓取的内容就需要服务端生成html，
meta标签：
<meta property="og:site_name" content="Facebook for Developers" />
<meta property="og:title" content="how do you do" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://huodong.m.taobao.com/act/jptest2.html" />
<meta property="og:image" content="https://img.alicdn.com/tfs/TB1KBEXih6I8KJjy0FgXXXXzVXa-300-300.jpg">
<meta property="og:image" content="http://apcdn.qd.alibaba.com/head2.png">
<meta property="og:locale" content="en_US" />
<meta property="og:description" content="Download Alibaba Master to boost your phone and win Xiaomi 4A" />
服务端生成html前端配合
<meta property="og:site_name" content="Facebook for Developers" />
<meta property="og:title" content="Hottest Way to Send New Year Wishes in 2018" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_US" />
<meta property="og:description" content="Listen to it now. I just recorded New Year Wishes for you." />
<meta property="og:image" content="${og:image}" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="421" />
Facebook js分享
首先先引入fb的sdk：
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
//下面填入一个你的app id，如果还没，请在fb开发者平台注册一个
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId={your app id}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
触发事件进行分享示例：
var shareToFbBtn = document.getElementById('fb-btn');
shareToFbBtn.onclick = function(){
FB.ui({
method: 'share',
href: "htttp://www.eaxmple.com/share.html" //这里换成你的网址
}, function(response){
//分享回调
})
};
总结
第一种就是微信分享比较特殊调用微信接口；这其实还是没做到分享。
第二种自己写方法调用原生的各个分享方法，
第三种facebook网页分享直接页面抓取很方便，如果想js分享需求appid android和ios客户端分享都需要集成facebook的sdk
参考网址：http://www.jianshu.com/p/961378513e59；
