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

最新推荐文章于 2024-06-25 03:20:55 发布

baby加油_

最新推荐文章于 2024-06-25 03:20:55 发布

阅读量8.4k

点赞数 4

分类专栏：授权-微信-QQ 文章标签：微信分享 QQ分享自定义分享

本文链接：https://blog.csdn.net/qq_34664239/article/details/79205337

版权

授权-微信-QQ 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

问题：

H5经常会做一些从APP或其他地方分享出来的页面，在微信及QQ中会进行二次分享，需要自己定义分享的名字和图片；
微信的分享再分享在微信公众号文档中有相关说明：微信JS-SDK说明文档

一、微信分享

基本条件

步骤一：绑定域名
- 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
- 备注：登录后可在“开发者中心”查看对应的接口权限。
步骤二：引入JS文

<!--微信接口-分享-->
<script src="https://res.wx.qq.com/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, //是否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;
			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() {}
})

3.微信分享出现的常见bug

分享失败的时候，首先开启debug模式
常见的错误是invalid signatrue

//在文档中的附录5-常见错误及解决方法里的第二项

2.invalid signature签名错误。建议按如下顺序检查：

确认签名算法正确，可用http://mp.weixin.qq.com/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），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

通俗讲，一般有以下三种

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="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);