本文主要记录一个闹心的微信页面分享配置过程,以及二次分享失败的踩坑处理。
网站页面开通微信分享的前提
注册公众号+开通开发者AppSecret+绑定安全网址+确认有分享权限。
HTML+AJAX前端代码
注意,我的html网页是gbk编码,要求分享给朋友和分享到朋友圈的部分文字不一致,所以分开写了shareData。另外要注意url和url2的位置,这块真是尝试了一天才弄好。
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> // 去除微信默认参数 var url= location.href.split('#')[0]; var url2=encodeURIComponent(url); $.ajax({ type : "get", url : "https://www.your-domain.com/wxsdk/api.php?url="+url2,//替换网址 dataType : "jsonp", jsonp: "callback", jsonpCallback:"success_jsonpCallback", success : function(data){ wx.config({ appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [ "updateAppMessageShareData", // “分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0) "updateTimelineShareData" //“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0) ] }); }, error:function(data){ alert("微信API访问失败,请反馈给网站管理员,谢谢"); } }); wx.ready(function (){ var shareData = { title: '分享标题', // 分享标题 desc: '分享描述', // 分享描述 link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: 'https://www.your-domain.com/skin/wx.png', // 分享图标 }; var shareData2 = { title: '分享标题', // 分享标题 desc: '分享描述', // 分享描述 link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: 'https://www.your-domain.com/skin/wx.png', // 分享图标 }; wx.updateAppMessageShareData(shareData); wx.updateTimelineShareData(shareData2); }); </script>
PHP后端代码
链接:https://pan.baidu.com/s/1wgTSUYxiWirVJjDDh-B5_A
提取码:vcbh
配置api.php中的id和secret
调试注意
1. 微信JSSDK官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
2. 打开调试开关:
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
3. 打开调试开关后,用手机浏览网站页面,查看alert出来的报错提示。
我踩过的坑
最开始特别顺利,后端对接顺畅,前端代码在网上找了一下也顺利。后来越测试,越闹心。大量测试后发现两个重要问题:
1. 页面如果不加载完成,立刻点右上角分享,那么接口分享是失败的,也就是说图片和文字都不能正常显示。
2. 有一些别人发给我的地址,他就怎么搞都失败。
第一个问题,我采取了忍耐的态度,毕竟这孙子还要读后面的接口。
第二个问题,就闹心了。仔细看以后发现,每次分享以后微信都给加一个from=singlemessage,然后妥妥的,地址变了。然而最开始我的url位置是用后端写死的,永远是your-domain.com/xxx.html,这样在回后端校验的时候,两个地址明显不一致,给我报错,说“invalid signature”。然后我就上百度搜啊,搜到天荒地老。人家说,有一种非常直接的方法,就是遇到网址里有singlemessage的,就跳转。我一想,也行啊,忍了。结果代码抄过来不好使。怎么都不跳!然后另外一种方法,微信官方文档这么说的:“如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#’hash部分的链接(可用location.href.split(‘#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。”
这句话我以为自己看明白了,那肯定是这么写url=encodeURIComponent(location.href.split('#')[0]);
结果,不好使。经过一段时间海枯石烂的尝试,我终于测试成功了现在这段代码。