做微信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>
//其余代碼...
這一招本來是屢試不爽的善炫。本人也已經(jīng)有挺長時間沒有做微信中的H5了，直到這兩天库继，因為手頭要做一個簡單的微信H5箩艺，所以拾掇拾掇又用了這招。沒想到宪萄，這次居然失效了艺谆。不管怎么試，分享朋友圈的時候拜英，縮略圖都出不來静汤。一直是這么個默認的圖標：
然后再去網(wǎng)上看了下，這才發(fā)現(xiàn)微信團隊在今年3月29號就發(fā)了一篇文章《JSSDK自定義分享接口的策略調(diào)整》，里面明確說明了：
為規(guī)范自定義分享鏈接功能在網(wǎng)頁上的使用虫给，自2017年4月25日起藤抡，JSSDK“分享到朋友圈”及“發(fā)送給朋友”接口，自定義的分享鏈接抹估，其域名或路徑必須與當前頁面對應的公眾號JS安全域名一致缠黍，否則將調(diào)用失敗。
例如药蜻，當前頁面是?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調(diào)用失敗的網(wǎng)頁，被用戶分享時踱卵，分享卡片將統(tǒng)一使用默認縮略圖和標題簡介廊驼，不允許自定義。
接口完整用法請參考《微信JSSDK說明文檔》颊埃，請開發(fā)者及時完成調(diào)整蔬充。
好吧。還好我手頭服務號和企業(yè)號（還沒有升級到企業(yè)微信）的認證賬號都有班利。我看了下饥漫，兩者的文檔分別在以下地址的“分享接口”部分（其實沒啥大區(qū)別）：
服務號：https://mp.weixin.qq.com/wiki?
企業(yè)號：微信JS-SDK接口 - 企業(yè)號開發(fā)者接口文檔
因為手頭要推的東西是放在企業(yè)號里的，于是以企業(yè)號為例罗标，簡要說明一下開發(fā)過程庸队。
首先，在頁面中引入微信的JS-SDK的JS文件闯割。
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
然后彻消，取accesstoken，以PHP和微信企業(yè)號為例（最好存在服務器上宙拉，沒過期前從緩存文件里取宾尚，以避免頻繁調(diào)用）。如果使用微信服務號的話谢澈，API地址和企業(yè)號有所不同煌贴。
$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锥忿，同理牛郑，最好緩存在服務器上而非每次調(diào)用。
$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淹朋，這個微信已經(jīng)給出了算法笙各，照著用就行。
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這一個參數(shù)晃洒，實際上慨灭，還能夠在這里設置標題等其他的參數(shù)。
wx.onMenuShareTimeline({
? ? title: '', // 分享標題
? ? link: '', // 分享鏈接球及，該鏈接域名必須與當前企業(yè)的可信域名一致
? ? imgUrl: '', // 分享圖標
? ? success: function () {
? ? ? ? // 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
? ? },
? ? cancel: function () {
? ? ? ? // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
? ? }
});
現(xiàn)在氧骤，刷新一下，再次選擇“分享到朋友圈”吃引，就可以看到你設置的縮略圖啦筹陵。
實現(xiàn)工具：http://www.gettool.cn/GetwxLink/
