首先這一定需要使用微信jssdk，但是在你使用了微信jssdk之后，依舊分享的鏈接不帶圖標和摘要，那就看看我踩的坑吧。

前端代碼

我這里引入了jQuery（不用jQuery的寫法的話可以不引入），然后這里就是必須引入最新的微信jssdk：https://res2.wx.qq.com/open/js/jweixin-1.6.0.js
最新的微信jssdk已經舍棄了之前的分享接口，最新的分享接口是：updateAppMessageShareData 和 updateTimelineShareData
前端代碼如下：

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var url = location.href; $.ajax({type: "get",url: "https://你的網址/wxjssdk.php?url=" + url,dataType: "json",success: function(res) {if (res.code === 200) {wx.config({debug: false,appId: res.data.appId,timestamp: res.data.timestamp,nonceStr: res.data.nonceStr,signature: res.data.signature,jsApiList: ['updateAppMessageShareData','updateTimelineShareData']});wx.ready(function() {wx.updateAppMessageShareData({title: res.data.title,desc: res.data.desc,link: res.data.link,imgUrl: res.data.imgUrl,success: function() {console.log('分享成功');}});wx.updateTimelineShareData({title: res.data.title,link: res.data.link,imgUrl: res.data.imgUrl,success: function() {console.log('分享成功');}})});}} }) </script>

后端代碼

前端需要ajax請求后端進行簽名和獲取token，請求的后端https://你的網址/wxjssdk.php文件代碼如下：

<?php /*** 微信JsSDK* Class JsSDK*/ class JsSDK {private $appId;private $appSecret;private $url;public function __construct($appId, $appSecret, $url) {$this->appId = $appId;$this->appSecret = $appSecret;$this->url = $url;}/*** 簽名* @return array*/public function getSignPackage() {$jsapiTicket = $this->getJsApiTicket();$url = $this->url;$timestamp = time();$nonceStr = $this->createNonceStr();$string = "jsapi_ticket=" . $jsapiTicket . "&noncestr=" . $nonceStr . "&timestamp=" . $timestamp . "&url=" . $url;$signature = sha1($string);return ["appId" => $this->appId,"nonceStr" => $nonceStr,"timestamp" => $timestamp,"url" => $url,"signature" => $signature,"rawString" => $string];}/*** 創建字符串* @param int $length* @return string*/private 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;}/*** 獲取JsApiTicket* @return mixed*/private function getJsApiTicket() {$data = json_decode($this->get_php_file("jsapi_ticket.php"));if ($data->expire_time < time()) {$accessToken = $this->getAccessToken();$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=" . $accessToken;$res = json_decode($this->httpGet($url));$ticket = $res->ticket;if ($ticket) {$data->expire_time = time() + 7000;$data->jsapi_ticket = $ticket;$this->set_php_file("jsapi_ticket.php", json_encode($data));}} else {$ticket = $data->jsapi_ticket;}return $ticket;}/*** 獲取AccessToken* @return mixed*/private function getAccessToken() {$data = json_decode($this->get_php_file("access_token.php"));if ($data->expire_time < time()) {$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" . $this->appId . "&secret=" . $this->appSecret;$res = json_decode($this->httpGet($url));$access_token = $res->access_token;if ($access_token) {$data->expire_time = time() + 7000;$data->access_token = $access_token;$this->set_php_file("access_token.php", json_encode($data));}} else {$access_token = $data->access_token;}return $access_token;}/*** GET CURL請求* @param $url* @return bool|string*/private function httpGet($url) {$curl = curl_init();curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);curl_setopt($curl, CURLOPT_TIMEOUT, 500);curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);curl_setopt($curl, CURLOPT_URL, $url);$res = curl_exec($curl);curl_close($curl);return $res;}/*** 讀取文件* @param $filename* @return string*/private function get_php_file($filename) {return trim(substr(file_get_contents($filename), 15));}/*** 寫入文件* @param $filename* @param $content*/private function set_php_file($filename, $content) {$fp = fopen($filename, "w");fwrite($fp, "<?php exit();?>" . $content);fclose($fp);} }$url = $_GET['url']; $JsSDK = new JSSDK("替換成你的公眾號appId", "替換成你的公眾號appSecret", $url); $signPackage = $JsSDK->GetSignPackage();$result = ['code' => 200,'msg' => 'success','data' => ['appId' => $signPackage["appId"],'timestamp' => $signPackage["timestamp"],'nonceStr' => $signPackage["nonceStr"],'signature' => $signPackage["signature"],'title' => '替換成分享的鏈接標題','desc' => '替換成分享的鏈接描述','link' => $url,'imgUrl' => 'https://你的網址/share.png'] ];header('content-type:application/json'); echo json_encode($result);exit;

因為這里的 access_token 和 jsapi_ticket 都是存儲在文件中，所以這里你需要創建兩個文件，代碼如下：

// access_token.php 文件 <?php exit();?> {"access_token":"","expire_time":0} // jsapi_ticket.php 文件 <?php exit();?> {"jsapi_ticket":"","expire_time":0}

當然你也可以把 access_token 和 jsapi_ticket 存儲在數據庫中。

填坑

如果依然無法實現，那么注意以下幾點：

確保服務器IP增加到了IP白名單中

確保開發者ID（AppID）和開發者密碼（AppSecret）正確，開發者密碼（AppSecret）復制的時候可能會復制失敗，需要手動復制。

確保分享的網頁域名已經增加到JS接口安全域名

由于微信內置瀏覽器有緩存，建議更換手機或刷新微信內瀏覽器緩存后再次查看效果，微信內瀏覽器清理緩存方法如下：
在微信中打開鏈接debugmm.qq.com/?forcex5=true 然后關閉，再打開debugtbs.qq.com 和 debugx5.qq.com 來清理微信瀏覽器緩存。

如果實在不行建議使用 微信開發者工具 下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 在開發者工具中調試，記著一定要開啟jssdk中的debug

總結

以上是生活随笔為你收集整理的最新链接分享给微信好友和微信朋友圈带图标和摘要的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。