做微信H5的朋友都知道，在過去要設置"分享到朋友圈"的縮略圖，是非常簡單的一件事情，只需要製作一張300*300的縮略圖片（如命名爲300.jpg），然後在頁面head部分的開頭引入微信朋友圈縮略圖代碼即可。
<!doctype html> <html> <head> <div id='wx_pic' style='margin:0 auto;display:none;'> <img src='i/300.jpg'> </div> //其餘代碼...
這一招本來是屢試不爽的。本人也已經有挺長時間沒有做微信中的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文件。
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
然後，取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."×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，即可設置好分享縮略圖。
<script type="text/javascript">
wx.onMenuShareTimeline({
imgUrl: '需要的縮略圖地址'
});
wx.config({
debug: false,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
'onMenuShareTimeline'
]
});
</script>在上面的代碼中，我只設置了imgUrl這一個參數，實際上，還能夠在這裏設置標題等其他的參數。
wx.onMenuShareTimeline({
title: '', // 分享標題
link: '', // 分享鏈接，該鏈接域名必須與當前企業的可信域名一致
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});現在，刷新一下，再次選擇“分享到朋友圈”，就可以看到你設置的縮略圖啦。