溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
做微信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，即當前時間。
接下來取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?()?{
????????//?用戶取消分享后執行的回調函數
????}
});現在，刷新一下，再次選擇“分享到朋友圈”，就可以看到你設置的縮略圖啦。
GetwxLink
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
