分享网页到微信朋友圈,怎样才能带缩略图?
做微信H5的朋友都知道,在过去要设置"分享到朋友圈"的缩略图,是非常简单的一件事情,只需要制作一张300*300的缩略图片(如命名为300.jpg),然后在页面head部分的开头引入微信朋友圈缩略图代码即可。
成都创新互联服务项目包括渭滨网站建设、渭滨网站制作、渭滨网页制作以及渭滨网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,渭滨网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到渭滨省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
//其余代码...
这一招本来是屡试不爽的。本人也已经有挺长时间没有做微信中的H5了,直到这两天,因为手头要做一个简单的微信H5,所以拾掇拾掇又用了这招。没想到,这次居然失效了。不管怎么试,分享朋友圈的时候,缩略图都出不来。一直是这么个默认的图标:
然后再去网上看了下,这才发现微信团队在今年3月29号就发了一篇文章《JSSDK自定义分享接口的策略调整》,里面明确说明了:
为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“发送给朋友”接口,自定义的分享链接,其域名或路径必须与当前页面对应的公众号JS安全域名一致,否则将调用失败。
例如,当前页面是 http://www.abc.com/123,其公众号对应的JS安全域名为 http://www.abc.com 以及 http://www.xyz.com,则分享自定义链接 http://www.abc.com/456 可以成功,分享 http://www.xyz.com/123 或 http://www.def.com/123 均将失败。
对于未接入微信JSSDK或已接入但JSSDK调用失败的网页,被用户分享时,分享卡片将统一使用默认缩略图和标题简介,不允许自定义。
接口完整用法请参考《微信JSSDK说明文档》,请开发者及时完成调整。
好吧。还好我手头服务号和企业号(还没有升级到企业微信)的认证账号都有。我看了下,两者的文档分别在以下地址的“分享接口”部分(其实没啥大区别):
服务号:https://mp.weixin.qq.com/wiki?
企业号:微信JS-SDK接口 - 企业号开发者接口文档
因为手头要推的东西是放在企业号里的,于是以企业号为例,简要说明一下开发过程。
首先,在页面中引入微信的JS-SDK的JS文件。
然后,取accesstoken,以PHP和微信企业号为例(最好存在服务器上,没过期前从缓存文件里取,以避免频繁调用)。如果使用微信服务号的话,API地址和企业号有所不同。
$output = http_post_data("https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=******&corpsecret=*****""); $res = json_decode($output, true); $accessToken = $res["access_token"];
接下来,获取jsapi_ticket,同理,最好缓存在服务器上而非每次调用。
$output = http_post_data("https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=".$accessToken,""); $getTicket = json_decode($output, true); $ticket = $getTicket['ticket'];
然后,获取nonceStr,这个微信已经给出了算法,照着用就行。
function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } $nonceStr = createNonceStr();
然后,取timestamp,即当前时间。
然后,取timestamp,即当前时间。
接下来取url值,这个必须是安全域名中设置的域。
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
东西都准备好了,拼到一起后sha编码,然后打成一个包。
$string = "jsapi_ticket=".$ticket."&noncestr=".$nonceStr."×tamp=".$timestamp."&url=".$url; $signature = sha1($string); $signPackage = array( "appId" => "******", "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string );
PHP的部分完成了,最后就是在Body前用JS注册“分享到朋友圈”这一个API,API的名称为onMenuShareTimeline,在其中注册imgUrl,即可设置好分享缩略图。
在上面的代码中,我只设置了imgUrl这一个参数,实际上,还能够在这里设置标题等其他的参数。
wx.onMenuShareTimeline({ title: '', // 分享标题 link: '', // 分享链接,该链接域名必须与当前企业的可信域名一致 imgUrl: '', // 分享图标 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } });
现在,刷新一下,再次选择“分享到朋友圈”,就可以看到你设置的缩略图啦。
GetwxLink
标题名称:分享网页到微信朋友圈,怎样才能带缩略图?
URL分享:http://pwwzsj.com/article/gcgsdi.html