微信分享到朋友圈接口用法

HTML5 herman 2278浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

在我的QQ3群里(187424846)有网友问到如何调用微信浏览器的分享功能分享内容?下面是根据自己的实际工作经历和经验总结的使用方法,大家共勉。

微信6.0之后,原有的WeixinJSBridge.on('menu:share:timeline', function (argv) {})不再可以使用,但是微信提供的新的方法 js-SDK, 官方接口请参见 微信JSSDK说明文档 ,具体的方法官方文档都说的比较清楚了,本文只是记录下开发过程中遇到的问题以及解决方式。

下面是微信分享的关键代码:

wx.ready(function(){
	wx.onMenuShareTimeline({
		title: '业余草',// 分享标题  
		link: 'https://www.xttblog.com' + '?id=' + res.data.id,// 分享链接  
		imgUrl: 'http://xx.com/test.jpg',// 分享图标
		success: function() {},// 用户确认分享后执行的回调函数  
		cancel: function() {},// 用户取消分享后执行的回调函数  
		fail: function (res) {  
			alert("分享失败,请重新尝试");  
        } 
	});
	wx.onMenuShareAppMessage({
		title: '业余草',// 分享标题  
		desc: 'CODE大全',// 分享描述  
		link: 'https://www.xttblog.com' + '?id=' + res.data.id ,// 分享链接  
		imgUrl: 'http://xx.com/test.jpg',
		type: 'link',
		success: function() {},// 用户确认分享后执行的回调函数 
		cancel: function() {}// 用户取消分享后执行的回调函数  
	});
	$.ajax({
		url: (HOST+'/config'),
		type: 'GET',
		dataType: 'json',
		data: {
			url : location.href
		},
		success: function(res){
			if(res.code === 1){
				res.data.jsApiList = ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'closeWindow'];
				wx.config(res.data);
			}
		}
	});
}
  1. 虽然微信提供了JSSDK,但是这不意味着你可以用自定义的按钮来直接打开微信的分享界面,这套JSSDK只是把微信分享接口的内容定义好了,实际还是需要用户点击右上角的菜单按钮进行主动的分享,用户点开分享界面之后,出现的内容就会是你定义的分享标题、图片和链接。
  2. wx.config()注入配置成功之后,会触发wx.ready()函数(同样失败的时候会触发wx.error()函数),所以之后的有必要的接口调用,比如定义分享到朋友圈、分享给好友的内容,还是放在wx.ready()中进行调用以保证正确性。
  3. wx.checkJsApi无需wx.config即可调用,用来判断当前客户端是否能支持微信JSSDK的接口。
  4. 分享出去的链接,会被微信在链接后面追加参数。这个问题十分重要,本人在开发过程中,第一次分享出去,成功没有任何问题,但是再次打开链接,会提示invalid signature,也就是签名错误,这个问题出现的原因,就是因为原来链接的被追加了参数,传递到自己服务器后台的页面原地址和提交给微信的页面原地址不匹配,解决方法如下:
var pageUrl = window.location.href.split('#')[0];  
pageUrl = pageUrl.replace(/\&/g, '%26');</span>  
initJsApiTicket(pageUrl, function (data) {  
    if (data.errcode == '0') {  
        wx.config({  
            debug: false,  
            appId: data.appId,  
            timestamp: data.timestamp,  
            nonceStr: data.nonceStr,  
            signature: data.signature,  
            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']  
        });  
    }  
});

注意如果你是用这种方式将页面原地址作为参数传递到后台的话,需要将参数中的&全部替换为%26,否则后台接收到的地址会丢失参数,导致最后签名不一致。另外,在你分享出去的URL中,必须将微信附加的参数去掉,否则会导致第二次分享成功,但是第三次、第四次以及后续的分享都失败。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 微信分享到朋友圈接口用法