做微信H5的朋友都知道,在過去要設(shè)置"分享到朋友圈"的縮略圖,是非常簡(jiǎn)單的一件事情,只需要制作一張300*300的縮略圖片(如命名為300.jpg),然后在頁面head部分的開頭引入微信朋友圈縮略圖代碼即可。
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括渭濱網(wǎng)站建設(shè)、渭濱網(wǎng)站制作、渭濱網(wǎng)頁制作以及渭濱網(wǎng)絡(luò)營(yíng)銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,渭濱網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到渭濱省份的部分城市,未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
??//其余代碼...
這一招本來是屢試不爽的。本人也已經(jīng)有挺長(zhǎng)時(shí)間沒有做微信中的H5了,直到這兩天,因?yàn)槭诸^要做一個(gè)簡(jiǎn)單的微信H5,所以拾掇拾掇又用了這招。沒想到,這次居然失效了。不管怎么試,分享朋友圈的時(shí)候,縮略圖都出不來。一直是這么個(gè)默認(rèn)的圖標(biāo):
然后再去網(wǎng)上看了下,這才發(fā)現(xiàn)微信團(tuán)隊(duì)在今年3月29號(hào)就發(fā)了一篇文章《JSSDK自定義分享接口的策略調(diào)整》,里面明確說明了:
為規(guī)范自定義分享鏈接功能在網(wǎng)頁上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“發(fā)送給朋友”接口,自定義的分享鏈接,其域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致,否則將調(diào)用失敗。
例如,當(dāng)前頁面是 http://www.abc.com/123,其公眾號(hào)對(duì)應(yīng)的JS安全域名為 http://www.abc.com 以及 http://www.xyz.com,則分享自定義鏈接 http://www.abc.com/456 可以成功,分享 http://www.xyz.com/123 或 http://www.def.com/123 均將失敗。
對(duì)于未接入微信JSSDK或已接入但JSSDK調(diào)用失敗的網(wǎng)頁,被用戶分享時(shí),分享卡片將統(tǒng)一使用默認(rèn)縮略圖和標(biāo)題簡(jiǎn)介,不允許自定義。
接口完整用法請(qǐng)參考《微信JSSDK說明文檔》,請(qǐng)開發(fā)者及時(shí)完成調(diào)整。
好吧。還好我手頭服務(wù)號(hào)和企業(yè)號(hào)(還沒有升級(jí)到企業(yè)微信)的認(rèn)證賬號(hào)都有。我看了下,兩者的文檔分別在以下地址的“分享接口”部分(其實(shí)沒啥大區(qū)別):
服務(wù)號(hào):https://mp.weixin.qq.com/wiki?
企業(yè)號(hào):微信JS-SDK接口 - 企業(yè)號(hào)開發(fā)者接口文檔
因?yàn)槭诸^要推的東西是放在企業(yè)號(hào)里的,于是以企業(yè)號(hào)為例,簡(jiǎn)要說明一下開發(fā)過程。
首先,在頁面中引入微信的JS-SDK的JS文件。
然后,取accesstoken,以PHP和微信企業(yè)號(hào)為例(最好存在 接下來,獲取jsapi_ticket,同理,最好緩存在服務(wù)器上而非每次調(diào)用。 然后,獲取nonceStr,這個(gè)微信已經(jīng)給出了算法,照著用就行。 然后,取timestamp,即當(dāng)前時(shí)間。 接下來取url值,這個(gè)必須是安全域名中設(shè)置的域。 東西都準(zhǔn)備好了,拼到一起后sha編碼,然后打成一個(gè)包。 PHP的部分完成了,最后就是在Body前用JS注冊(cè)“分享到朋友圈”這一個(gè)API,API的名稱為onMenuShareTimeline,在其中注冊(cè)imgUrl,即可設(shè)置好分享縮略圖。 在上面的代碼中,我只設(shè)置了imgUrl這一個(gè)參數(shù),實(shí)際上,還能夠在這里設(shè)置標(biāo)題等其他的參數(shù)。 現(xiàn)在,刷新一下,再次選擇“分享到朋友圈”,就可以看到你設(shè)置的縮略圖啦。 GetwxLink$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'];
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,即當(dāng)前時(shí)間。
$protocol?=?(!empty($_SERVER['HTTPS'])?&&?$_SERVER['HTTPS']?!==?'off'?||?$_SERVER['SERVER_PORT']?==?443)???"https://"?:?"http://";
$url?=?"$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$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
);
wx.onMenuShareTimeline({
????title:?'',?//?分享標(biāo)題
????link:?'',?//?分享鏈接,該鏈接域名必須與當(dāng)前企業(yè)的可信域名一致
????imgUrl:?'',?//?分享圖標(biāo)
????success:?function?()?{
????????//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
????},
????cancel:?function?()?{
????????//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
????}
});
文章標(biāo)題:分享網(wǎng)頁到微信朋友圈,怎樣才能帶縮略圖?
URL網(wǎng)址:http://weahome.cn/article/gcgsdi.html