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

问题:

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签名错误。建议按如下顺序检查:

  1. 确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
  2. 确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。
  3. 确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认),包括’http(s)?/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。
  4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
  5. 确保一定缓存access_token和jsapi_ticket。
  6. 确保你获取用来签名的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);
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值