微信JS-SDK实现自定义分享功能，分享给朋友，分享到朋友圈及QQ自定义分享

问题：

H5经常会做一些从APP或其他地方分享出来的页面，在微信及QQ中会进行二次分享，需要自己定义分享的名字和图片；

微信的分享再分享在微信公众号文档中有相关说明：微信JS-SDK说明文档

一、微信分享

1. 在这里，我做了微信分享的公共函数

首先判断是否是移动端：

//判断访问终端
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == "qq", //是否QQ
weibo: u.match(/WeiBo/i) == "weibo", //是否微博
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};

/*=======================================分享Start=======================================*/
//注释：在这里，getNowTime()是时间戳函数，gObj.parameterObj是调取接口的公共参数对象;调取接口如果不需要就不加
function shareWX(shareObj){
/*微信分享*/
var url = encodeURIComponent(location.href.split('#')[0]);
gObj.parameterObj.url = url;
$.ajax({
type: "post",
url: "/app/fenzhongkeji/HttpXmlClient/getWeiXin.json?" + getNowTime(),
data: gObj.parameterObj,
dataType: 'json',
success: function(data) {
data = data.data;
/*微信接口*/
var appId = data.appId;

4000
var timestamp = data.timestamp;
var nonceStr = data.nonceStr;
var signature = data.signature;
var obj = {
debug: false, // 开启调试模式
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名，见附录1
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
}
/*权限验证配置*/
wx.config(obj);
if(browser.versions.mobile) { //判断是否是移动设备打开。browser代码在下面
var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
if(ua.match(/MicroMessenger/i) == "micromessenger") {
wx.ready(function() {
WeixinJSBridge.call('showOptionMenu');
/*加载完数据，能分享的时候隐藏加载层*/
$("#preloader").hide();
/*1-分享给朋友*/
wx.onMenuShareAppMessage(shareObj);
/*2-分享给朋友圈*/
wx.onMenuShareTimeline(shareObj);
/*3-分享到QQ好友*/
wx.onMenuShareQQ(shareObj);
/*4-分享到QQ空间*/
wx.onMenuShareQZone(shareObj);
/*5-分享到腾讯微博*/
wx.onMenuShareWeibo(shareObj);
});
wx.error(function(res) {});
} else {
/*加载完数据，能分享的时候隐藏加载层*/
$("#preloader").hide();
}
} else {
$("#preloader").hide();
}
}
});
}
/*=======================================分享End=======================================*/

2. 调用微信分享的函数

/*微信分享*/
var shareName = '分享标题';
var shareDesc= '分享描述';
var sharePic= '分享图片路径';
shareWX({
title: shareName, // 分享标题
desc: shareDesc, // 分享描述
link: window.location.href, // 分享链接
imgUrl: sharePic, // 分享图标
success: function() {},
cancel: function() {}
})

二、QQ分享

QQ是通过head里面的标签来识别分享的图标可标题的

涉及到H5微数据的一个属性itemprop，有兴趣可以查一查

下面是例子：

<meta itemprop="name" content="@猴子派来的逗比发了一个两三分钟短视频，看了会上瘾，怕是有毒吧！"/>
<meta itemprop="description" name="description" content="两三分钟 "/>
<meta itemprop="image" content="http://ovideo.2or3m.com/fzlist/20170325/fYzCXHnnA5.jpg"/>

在js中的应用：获取完数据后自定义分享

/*QQ分享*/
var shareName = '分享标题';
var shareDesc= '分享描述';
var sharePic= '分享图片路径';
var metaStr = '<meta itemprop="name" content="'+shareName+'"/><meta name="description" itemprop="description" content="'+shareDesc+'"/><meta itemprop="image" content="'+sharePic+'"/>';
$('head').append(metaStr);
$('title').html(shareName);