问题：
H5经常会做一些从APP或其他地方分享出来的页面，在微信及QQ中会进行二次分享，需要自己定义分享的名字和图片；
微信的分享再分享在微信公众号文档中有相关说明：微信JS-SDK说明文档
一、微信分享
基本条件
步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。
步骤二：引入JS文
<!--微信接口-分享--><script src="https://res./open/js/jweixin-1.0.0.js" type="text/javascript"></script>
将生成一个wx对象，所有接口通过wx对象(也可使用jWeixin对象)来调用
步骤三：通过config接口注入权限验证配置(后台来完成)
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [] // 必填，需要使用的JS接口列表});
步骤四：通过ready接口处理成功验证
wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。});
步骤五：通过error接口处理失败验证
wx.error(function(res){// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});
具体步骤
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, //是否iPadwebApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （-01-22新增）qq: u.match(/\sQQ/i) == "qq", //是否QQweibo: 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;var timestamp = data.timestamp;var nonceStr = data.nonceStr;var signature = data.signature;var obj = {debug: false, // 开启调试模式appId: appId, // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名，见附录1jsApiList: ['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() {}})
3.微信分享出现的常见bug
分享失败的时候，首先开启debug模式
常见的错误是invalid signatrue
//在文档中的 附录5-常见错误及解决方法里的第二项
确认签名算法正确，可用http://mp./debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认)，包括’http(s)?/‘部分，以及’？‘后面的GET参数部分,但不包括’#'hash后面的部分。确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。确保一定缓存access_token和jsapi_ticket。确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。2.invalid signature签名错误。建议按如下顺序检查：
1.传给后台的url问题：var url = encodeURIComponent(location.href.split(’#’)[0]);2.config中nonceStr字段的写法3.appid的错误，必须跟你的js授权地址对应的公众号appid通俗讲 ，一般有以下三种
二、QQ分享
QQ是通过head里面的标签来识别分享的图标可标题的
涉及到H5微数据的一个属性itemprop，有兴趣可以查一查
下面是例子：
<meta itemprop="name" content="@猴子派来的逗比发了一个两三分钟短视频，看了会上瘾，怕是有毒吧！"/><meta itemprop="description" name="description" content="两三分钟 "/><meta itemprop="image" content="/fzlist/0325/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);
