微信轉(zhuǎn)發(fā)或分享朋友圈帶縮略圖、標(biāo)題和描述的實(shí)現(xiàn)方法

自己做博客以來(lái)，很早之前分享過(guò)文章至朋友圈，那個(gè)時(shí)候分享過(guò)去的文章自動(dòng)獲取頁(yè)面的比例適合的圖片為所縮略圖：


后期就很少分享至朋友圈， 近來(lái)分享文章給朋友后，發(fā)現(xiàn)不帶縮略圖和簡(jiǎn)介了，覺(jué)得這樣很不好看，百度一下如何解決這個(gè)問(wèn)題，發(fā)現(xiàn)網(wǎng)友貢獻(xiàn)最多的就是在body之后加一個(gè)img標(biāo)簽并且設(shè)置display:none,雖然這種方法感覺(jué)不科學(xué)，但我還是嘗試了一下，發(fā)現(xiàn)已經(jīng)失效了。又百度了一些資料，才知道微信在2017年年初的時(shí)候設(shè)置了分享只能通過(guò)微信的分享接口來(lái)實(shí)現(xiàn)縮略圖和簡(jiǎn)介的調(diào)用，網(wǎng)上的教程要么太深?yuàn)W，要么不實(shí)用。

實(shí)現(xiàn)工具：GetwxLink

余斗研究一番后，精簡(jiǎn)了一些代碼，實(shí)現(xiàn)了在網(wǎng)站上實(shí)現(xiàn)微信分享接口（設(shè)置標(biāo)題、縮略圖、連接、描述），具體的方法如下（文章末尾有demo下載入口）：

一、先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”。（注：認(rèn)證帳號(hào)才有分享權(quán)限）


二、創(chuàng)建一個(gè)demo.php文件和wxshare.js文件：

demo.php

<?php

? ? ? ? // 步驟1.設(shè)置appid和appsecret

? ? ? ? $appid = 'wxff4f410748ba11027'; //此處填寫(xiě)綁定的微信公眾號(hào)的appid

? ? ? ? $appsecret = '246fbf3e581efeff3b11100aa17d4c4'; //此處填寫(xiě)綁定的微信公眾號(hào)的密鑰id

? ? ? ? // 步驟2.生成簽名的隨機(jī)串

? ? ? ? function nonceStr($length){

? ? ? ? ? ? ? ? $str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1NGJBQRSTUVWXYZ';//隨即串，62個(gè)字符

? ? ? ? ? ? ? ? $strlen = 62;

? ? ? ? ? ? ? ? while($length > $strlen){

? ? ? ? ? ? ? ? $str .= $str;

? ? ? ? ? ? ? ? $strlen += 62;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? $str = str_shuffle($str);

? ? ? ? ? ? ? ? return substr($str,0,$length);

? ? ? ? }

? ? ? ? // 步驟3.獲取access_token

? ? ? ? $result = http_get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$appsecret);

? ? ? ? $json = json_decode($result,true);

? ? ? ? $access_token = $json['access_token'];

? ? ? ? function http_get($url){

? ? ? ? ? ? ? ? $oCurl = curl_init();

? ? ? ? ? ? ? ? if(stripos($url,"https://")!==FALSE){

? ? ? ? ? ? ? ? ? ? ? ? curl_setopt($oCurl, CURLOPT_SSL_VERIFYPEER, FALSE);

? ? ? ? ? ? ? ? ? ? ? ? curl_setopt($oCurl, CURLOPT_SSL_VERIFYHOST, FALSE);

? ? ? ? ? ? ? ? ? ? ? ? curl_setopt($oCurl, CURLOPT_SSLVERSION, 1); //CURL_SSLVERSION_TLSv1

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? curl_setopt($oCurl, CURLOPT_URL, $url);

? ? ? ? ? ? ? ? curl_setopt($oCurl, CURLOPT_RETURNTRANSFER, 1 );

? ? ? ? ? ? ? ? $sContent = curl_exec($oCurl);

? ? ? ? ? ? ? ? $aStatus = curl_getinfo($oCurl);

? ? ? ? ? ? ? ? curl_close($oCurl);

? ? ? ? ? ? ? ? if(intval($aStatus["http_code"])==200){

? ? ? ? ? ? ? ? ? ? ? ? return $sContent;

? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 步驟4.獲取ticket

? ? ? ? $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$access_token";

? ? ? ? $res = json_decode ( http_get ( $url ) );

? ? ? ? $ticket = $res->ticket;

? ? ? ? // 步驟5.生成wx.config需要的參數(shù)

? ? ? ? $surl = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

? ? ? ? $ws = getWxConfig( $ticket,$surl,time(),nonceStr(16) );

? ? ? ? function getWxConfig($jsapiTicket,$url,$timestamp,$nonceStr) {

? ? ? ? ? ? ? ? $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

? ? ? ? ? ? ? ? $signature = sha1 ( $string );

? ? ? ? ? ? ? ? $WxConfig["appId"] = $appid;

? ? ? ? ? ? ? ? $WxConfig["nonceStr"] = $nonceStr;

? ? ? ? ? ? ? ? $WxConfig["timestamp"] = $timestamp;

? ? ? ? ? ? ? ? $WxConfig["url"] = $url;

? ? ? ? ? ? ? ? $WxConfig["signature"] = $signature;

? ? ? ? ? ? ? ? $WxConfig["rawString"] = $string;

? ? ? ? ? ? ? ? return $WxConfig;

? ? ? ? }

?>

<!DOCTYPE html>

<html lang="en">

<head>

? ? ? ? <meta charset="gbk">

? ? ? ? <title>微信分享接口示例</title>

? ? <meta name="keywords" content="微信分享接口示例"/>

? ? ? ? <meta name="description" content="這是一個(gè)微信分享接口示例預(yù)覽頁(yè)面，可以發(fā)送到微信端預(yù)覽并轉(zhuǎn)發(fā)給朋友或者分享朋友圈看看效果如何！"/>

</head>

<body>

<p></p>

<h1 style="text-algin:center;">這是一個(gè)微信分享接口示例預(yù)覽頁(yè)面，可以發(fā)送到微信端預(yù)覽并轉(zhuǎn)發(fā)給朋友或者分享朋友圈看看效果如何！</h1>

<!--步驟6.調(diào)用JS接口-->

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>

wx.config({

? ? ? ? ? ? ? ? debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。

? ? ? ? ? ? ? ? appId: 'wxff4f410721541a1967', // 必填，公眾號(hào)的唯一標(biāo)識(shí)

? ? ? ? ? ? ? ? timestamp: "<?php echo $ws["timestamp"]; ?>", // 必填，生成簽名的時(shí)間戳

? ? ? ? ? ? ? ? nonceStr: '<?php echo $ws["nonceStr"]; ?>', // 必填，生成簽名的隨機(jī)串

? ? ? ? ? ? ? ? signature: '<?php echo $ws["signature"]; ?>',// 必填，簽名，見(jiàn)附錄1

? ? ? ? ? ? ? ? jsApiList: [

? ? ? ? ? ? ? ? ? ? ? ? 'checkJsApi',

? ? ? ? ? ? ? ? ? ? ? ? 'onMenuShareTimeline',

? ? ? ? ? ? ? ? ? ? ? ? 'onMenuShareAppMessage',

? ? ? ? ? ? ? ? ? ? ? ? 'onMenuShareQQ',

? ? ? ? ? ? ? ? ? ? ? ? 'onMenuShareWeibo'

? ? ? ? ? ? ? ? ] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2

? ? ? ? });

? ? var wstitle = "微信分享接口示例預(yù)覽"; //此處填寫(xiě)分享標(biāo)題

? ? var wsdesc = "這是一個(gè)微信分享接口示例預(yù)覽頁(yè)面，可以發(fā)送到微信端預(yù)覽并轉(zhuǎn)發(fā)給朋友或者分享朋友圈看看效果如何！"; //此處填寫(xiě)分享簡(jiǎn)介

? ? var wslink = "<?php echo $surl; ?>"; //此處獲取分享鏈接

? ? var wsimg = "https://www.yudouyudou.com/demo/wxshare/wx.jpg"; //此處獲取分享縮略圖

</script>

<script src="https://www.yudouyudou.com/demo/wxshare/wxshare.js"></script>

</body>

</html>

wxshare.js

wx.ready(function () {

? ? ? ? // 分享到朋友圈

? ? ? ? wx.onMenuShareTimeline({

? ? ? ? ? ? ? ? title: wstitle,

? ? ? ? ? ? ? ? link: wslink,

? ? ? ? ? ? ? ? imgUrl: wsimg,

? ? ? ? ? ? ? ? success: function () {

? ? ? ? ? ? ? ? ? ? ? ? alert('分享成功');

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? cancel: function () {

? ? ? ? ? ? ? ? }

? ? ? ? });

? ? ? ? // 分享給朋友

? ? ? ? wx.onMenuShareAppMessage({

? ? ? ? ? ? ? ? title: wstitle,

? ? ? ? ? ? ? ? desc: wsdesc,

? ? ? ? ? ? ? ? link: wslink,

? ? ? ? ? ? ? ? imgUrl: wsimg,

? ? ? ? ? ? ? ? success: function () {

? ? ? ? ? ? ? ? ? ? alert('分享成功');

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? cancel: function () {

? ? ? ? ? ? ? ? }

? ? ? ? });

? ? ? ? // 分享到QQ

? ? ? ? wx.onMenuShareQQ({

? ? ? ? ? ? ? ? title: wstitle,

? ? ? ? ? ? ? ? desc: wsdesc,

? ? ? ? ? ? ? ? link: wslink,

? ? ? ? ? ? ? ? imgUrl: wsimg,

? ? ? ? ? ? ? ? success: function () {

? ? ? ? ? ? ? ? ? ? ? ? alert('分享成功');

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? cancel: function () {

? ? ? ? ? ? ? ? }

? ? ? ? });

? ? ? ? // 微信到騰訊微博

? ? ? ? wx.onMenuShareWeibo({

? ? ? ? ? ? ? ? title: wstitle,

? ? ? ? ? ? ? ? desc: wsdesc,

? ? ? ? ? ? ? ? link: wslink,

? ? ? ? ? ? ? ? imgUrl: wsimg,

? ? ? ? ? ? ? ? success: function () {

? ? ? ? ? ? ? ? ? ? ? ? alert('分享成功');

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? cancel: function () {

? ? ? ? ? ? ? ? }

? ? ? ? });

? ? ? ? // 分享到QQ空間

? ? ? ? wx.onMenuShareQZone({

? ? ? ? ? ? ? ? title: wstitle,

? ? ? ? ? ? ? ? desc: wsdesc,

? ? ? ? ? ? ? ? link: wslink,

? ? ? ? ? ? ? ? imgUrl: wsimg,

? ? ? ? ? ? ? ? success: function () {

? ? ? ? ? ? ? ? ? ? ? ? alert('分享成功');

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? cancel: function () {

? ? ? ? ? ? ? ? }

? ? ? ? });

});

這里要注意的是，引用的縮略圖路徑一定要為絕對(duì)路徑且尺寸最好大于300px。

將做好的文件上傳至網(wǎng)站，可以點(diǎn)擊查看效果：戳此看效果


微信打開(kāi)預(yù)覽反饋

點(diǎn)擊分享后反饋

分享成功后反饋

轉(zhuǎn)發(fā)給朋友的效果

朋友圈的分享效果

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容