問 :
在 微信 里向朋友分享網頁鏈接時，總會看到一個可點擊的包含鏈接相關信息的卡片，上面有鏈接內容的 標題、描述 和 圖片，這三者前端 能否 不借助其他工具自行設置呢？
具體 如何在頁面里寫代碼控制該頁面在微信里被分享時顯示的相關信息呢？
答 :
針對 從微信內部分享出去 的鏈接（具體操作為：瀏覽頁面時，通過右上角 三個點 的菜單按鈕，調出下方菜單，將頁面分享出去）：
- 標題
title能
鏈接信息里，標題會自動獲取該鏈接頁面<head>標簽內的 title 信息：
<title>文章標題/頁面標題</title>
- 圖片
img能
鏈接信息右側有一張縮略圖，微信的機制是獲取頁面中第一張 300x300 以上的 可見圖片：
- 圖片大小在 300px x 300px 以上，為了效果好，最好是正方形；
- 圖片本身要是 可見 的，但是如果不想在頁面中展示這張圖片，可以在圖片外層包一個 div，將其設置為隱藏。
<div style="display:none;">
<img src="share.png">
</div>
- 描述
desc不能
鏈接信息標題下方是網頁描述，這一塊內容在微信里默認顯示為網頁的鏈接地址：
e.g.https://www.google.com/
并且無法通過前端人員自主在頁面中編寫 html，js 等修改，只能借助微信提供的 微信JS-SDK 才能實現對描述內容的自定義。具體 實現方法 請繼續往下閱讀。
PS：如果是在 QQ 里對網頁進行分享的話，對于描述內容可以通過<meta>標簽進行設置：
<meta name="description" content="在 QQ 里分享鏈接，鏈接的描述默認選用這個標簽的 content 內容">
問 :
如何使用微信提供的 JS-SDK 來自定義網頁被分享時顯示的信息（標題、描述 和 圖片）？
答 :
官方說明文檔：微信JS-SDK說明文檔
按照官方的步驟做下來就可以，我整理的需要放在頁面里的代碼如下：
注意事項：
wx.config那里，需要一些敏感信息，由后端人員來計算輸出最好，因此整個項目代碼都是放在后端那里的；- 我將下面的代碼放在
html中，這樣的話后端可以在里面寫代碼，下面的{$variable}都是后端的變量；- 分享圖標或者說分享鏈接要展示的圖片地址，我使用相對地址不行，所以使用了絕對地址；
- 如果
wx.config信息啥的都沒問題，但是瀏覽器 console 里沒有 log 信息，可以嘗試清空瀏覽器緩存。
<!-- index.html -->
<!-- 微信 JS-SDK -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '{$appId}', // 必填，公眾號的唯一標識
timestamp: {$timestamp}, // 必填，生成簽名的時間戳
nonceStr: '{$nonceStr}', // 必填，生成簽名的隨機串
signature: '{$signature}', // 必填，簽名，見附錄1
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
wx.ready(function() {
// config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
console.log('weixin 驗證成功');
// 分享到朋友圈
wx.onMenuShareTimeline({
title: '標題', // 分享標題
link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享圖標
success: function() {
// 用戶確認分享后執行的回調函數
},
cancel: function() {
// 用戶取消分享后執行的回調函數
}
});
// 分享給朋友
wx.onMenuShareAppMessage({
title: '標題', // 分享標題
desc: '描述', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享圖標
type: '', // 分享類型,music、video或link，不填默認為link
dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
success: function() {
// 用戶確認分享后執行的回調函數
},
cancel: function() {
// 用戶取消分享后執行的回調函數
}
});
// 分享到QQ
wx.onMenuShareQQ({
title: '標題', // 分享標題
desc: '描述', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享圖標
success: function() {
// 用戶確認分享后執行的回調函數
},
cancel: function() {
// 用戶取消分享后執行的回調函數
}
});
// 分享到騰訊微博
wx.onMenuShareWeibo({
title: '標題', // 分享標題
desc: '描述', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享圖標
success: function() {
// 用戶確認分享后執行的回調函數
},
cancel: function() {
// 用戶取消分享后執行的回調函數
}
});
// 分享到QQ空間
wx.onMenuShareQZone({
title: '標題', // 分享標題
desc: '描述', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享圖標
success: function() {
// 用戶確認分享后執行的回調函數
},
cancel: function() {
// 用戶取消分享后執行的回調函數
}
});
});
wx.error(function(res) {
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名。
console.log('weixin 驗證失敗');
console.log(res);
});
</script>
問 :
那 qq 里分享網頁呢？標題、描述 和 圖片 怎么設置？
答 :
<meta itemprop="name" content="這是分享的標題"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="這是要分享的內容" />
其他問題
問：直接在卡片上長按進行轉發的話，縮略圖信息會失效？
答：參考 微信分享給朋友的鏈接，再次被好友轉發之后，分享鏈接的圖標不見了，怎么解決？求賜教！
