微信公众号自定义分享

最近在做公众号内嵌的h5活动页，遇到一个分享首页的问题，也就是自定义分享咯，话不多说先贴上微信公众平台的文档微信公众平台文档

文档写的还是比较简单的，而且也很明了，也去看了一下其他大牛们分享的博客，未免感觉有些地方有点不清不楚的！开发中遇到一个很常见的问题，总是提示{"errMsg":"config:invalid signature"}，这句话的意思就是签名无效，签名是我们传给后台的参数，后台小哥哥给我们返回的，我们再把后台返回的数据，相应的注入权限验证配置参数中也就是请看下图：

前期我们要在页面引入一个js文件，这个是微信公众平台为我们提供的，我引入的是:   

,这里我们必填的是appId是我们公众号的id，一般这个值就是注册公众号产生的Id，这个是写死的，生成签名的时间戳，生成签名的随机串，签名这个三个参数是我们请求后台接口，后台给我们返回的，微信公众号自定义分享是不能缺少后台小哥哥支援我们的，因为wx.config里面的时间戳还有签名这两个参数是2小时更换一次的，所以我们是不能写死的，jsApiList这个数组里面所选的就是我们要使用微信公众号分分享方法名，在文档里面都是有明确介绍的，在这里我就把截图公布一下，然后为小伙伴们圈出来：

好啦，废话就不多说了，小伙伴们已经等不及了吧……好的我马上贴上我的代码。我是使用jq开发的移动端h5页面:

//获取微信配置参数
function GetWxConfigParams(BefId){
	var curUrl=location.href.split('#')[0];//获取当前页面链接，文档规定不能包含#hash
	var params={
		id:BefId,//这个参数是项目所需
		url:encodeURIComponent(curUrl)//这是必填的参数，一定是当前的页面链接
	};
	doAjax('get',getWxConfigParams,params,function(data){
		if(data.hasOwnProperty('code')){
			Tool.dialogTips(data.msg);
		}else{
            //下面就是微信公众号分享的配置	
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: 'xxxxxxxxxx', // 必填，公众号的唯一标识
				timestamp: data.timestamp, // 必填，生成签名的时间戳
				nonceStr: data.noncestr, // 必填，生成签名的随机串
				signature: data.sign,// 必填，签名
				jsApiList: ['onMenuShareAppMessage','onMenuShareQQ','onMenuShareTimeline','onMenuShareQZone'] // 必填，需要使用的JS接口列表
			});
			//初始化微信分享
			wxShareInit(BefId);
		};
	});
};

简单说明一下，debug:值为true时，会实时的为我们提供我们的传值情况，以及分享成功和失败的一些提示，测试时最好置为true，很方便调试的噢；appid：这里我就是写死的，暂时就不公布出来了,timestamp，nonceStr，signature；这三个参数是后台返回的，就不多说了，上面已经说明了。jsApiList：这是我们要自定义的分享方法名，把我们要使用的分享方法名全部注入到jsApiList这个数组里面；wxShareInit(BefId);这个方法就是我封装的微信公众号的分享方法，请看下面的代码

//微信分享
function wxShareInit(BefId){
	wx.ready(function () {
		var title='啦啦啦我是分享的标题',
			desc='啦啦啦啦我是分享的描述',
			linkUrl='http://xxx.xxxx.xxx/xxx.html?xx=xx&xx=xxx',//这个是想要分享出去的页面地址
			imgUrl='http://xxx.xxx.xxx/xxx/images/xxx.png';//这个是分享卡片出去的图标
		//分享给微信好友
	    wx.onMenuShareAppMessage({ 
	        title: title, // 分享标题
	        desc: desc, // 分享描述
	        link: linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	        imgUrl:imgUrl, // 分享图标
	        success: function () { 
		        // 用户确认分享后执行的回调函数
				Tool.dialogTips('分享成功');
		    },
		    cancel: function () { 
		        // 用户取消分享后执行的回调函数
		        Tool.dialogTips('分享失败');
		    }
	    });
	    //分享到QQ
	    wx.onMenuShareQQ({ 
	        title: title, // 分享标题
	        desc: desc, // 分享描述
	        link: linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	        imgUrl:imgUrl, // 分享图标
	        success: function () { 
		        // 用户确认分享后执行的回调函数
				Tool.dialogTips('分享成功');
		    },
		    cancel: function () { 
		        // 用户取消分享后执行的回调函数
		        Tool.dialogTips('分享失败');
		    }
	    });
	    //分享到朋友圈
	    wx.onMenuShareTimeline({ 
	        title: title,
	        desc: desc,
	        link: linkUrl,
	        imgUrl:imgUrl,
	        success: function () { 
		        // 用户确认分享后执行的回调函数
				Tool.dialogTips('分享成功');
		    },
		    cancel: function () { 
		        // 用户取消分享后执行的回调函数
		        Tool.dialogTips('分享失败');
		    }
	    });
	    //分享到QQ空间
	    wx.onMenuShareQZone({ 
	        title: title,
	        desc: desc,
	        link: linkUrl,
	        imgUrl:imgUrl,
	        success: function () { 
		        // 用户确认分享后执行的回调函数
				Tool.dialogTips('分享成功');
		    },
		    cancel: function () { 
		        // 用户取消分享后执行的回调函数
		        Tool.dialogTips('分享失败');
		    }
	    })
	});
};

onMenuShareAppMessage ：分享你给微信好友的方法，onMenuShareQQ：分享给QQ好友的方法，onMenuShareTimeline：分享到朋友圈的方法，onMenuShareQZone：分享到QQ空间的方法；这四种方法名我们都要写在上面的jsApiList的数组里面，并用,隔开，有没有感觉有点像angular的依赖注入

补充一下我们一定要把这几种方法放在wx.ready(function () {

分享的方法一定要写在这里面【这是必须的，下面我会说明为什么要写在这里面】

}

写在这里面的原因是，wx.config这个配置方法是异步的，之所以写在wx.ready这个函数里面是因为微信在内部已经封装好了，这个wx.ready函数相当于wx.config的回调函数，所以我们一定要把2我们的分享方法写在这里面，这样才能保证我们点击相应的分享按钮才会触发我们写好的分享方法，基本上就是这样了。

另外有什么不明白的欢迎在下方评论噢，我会在第一时间给予回复的！哈哈哈

打个小广告吧，有需要taobao,tmao购物券的联系我吧