分享网页到微信朋友圈，怎样才能带缩略图？

╰+哭是因爲堅強的太久メ 2022-01-11 15:05 1978阅读 0赞

做微信H5的朋友都知道，在过去要设置"分享到朋友圈"的缩略图，是非常简单的一件事情，只需要制作一张300\*300的缩略图片（如命名为300.jpg），然后在页面head部分的开头引入微信朋友圈缩略图代码即可。

[![92ruckj3.png][]][92ruckj3.png 1]

<!doctype html>
    <html>
    <head>
    	<div id='wx_pic' style='margin:0 auto;display:none;'>
    	  <img src='i/300.jpg'>
    	</div>
    //其余代码...

这一招本来是屡试不爽的。本人也已经有挺长时间没有做微信中的H5了，直到这两天，因为手头要做一个简单的微信H5，所以拾掇拾掇又用了这招。没想到，这次居然失效了。不管怎么试，分享朋友圈的时候，缩略图都出不来。一直是这么个默认的图标：

![2019042310374868.png][]

然后再去网上看了下，这才发现微信团队在今年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 = time();

接下来取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."&timestamp=".$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][]

转载于:https://blog.51cto.com/14309322/2385989

[92ruckj3.png]: http://dsp.wxjump-api.cn/dsp_img/92ruckj3.png
[92ruckj3.png 1]: http://wt1.wy42.cn/smq910/
[2019042310374868.png]: /images/20220110/97d9b3a298714d44b7022a8e5e4d9fa4.png
[GetwxLink]: http://www.gettool.cn/GetwxLink/