微信自定義分享連結資訊

微信自定義分享連結資訊

問 :

微信 裡向朋友分享網頁連結時,總會看到一個可點選的包含連結相關資訊的卡片,上面有連結內容的 標題描述圖片,這三者前端 能否 不借助其他工具自行設定呢?
具體 如何在頁面裡寫程式碼控制該頁面在微信裡被分享時顯示的相關資訊呢?

答 :

針對 從微信內部分享出去 的連結(具體操作為:瀏覽頁面時,通過右上角 三個點 的選單按鈕,調出下方選單,將頁面分享出去):

  • 標題 title

連結資訊裡,標題會自動獲取該連結頁面 <head> 標籤內的 title 資訊:

<title>文章標題/頁面標題</title>
  • 圖片 img

連結資訊右側有一張縮圖,微信的機制是獲取頁面中第一張 300*300 以上的 可見圖片

  1. 圖片大小在 300px*300px 以上,為了效果好,最好是正方形;
  2. 圖片本身要是 可見 的,但是如果不想在頁面中展示這張圖片,可以在圖片外層包一個 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說明文件
按照官方的步驟做下來就可以,我整理的需要放在頁面裡的程式碼如下:

注意事項:

  1. wx.config 那裡,需要一些敏感資訊,由後端人員來計算輸出最好,因此整個專案程式碼都是放在後端那裡的;
  2. 我將下面的程式碼放在 html 中,這樣的話後端可以在裡面寫程式碼,下面的 {$variable} 都是後端的變數;
  3. 分享圖示或者說分享連結要展示的圖片地址,我使用相對地址不行,所以使用了絕對地址;
  4. 如果 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 裡分享網頁呢?標題描述圖片 怎麼設定?

答 :

參考:手機QQAPI-騰訊移動Web開發平臺

<meta itemprop="name" content="這是分享的標題"/>
<meta itemprop="image" content="https://codertw.com/wp-content/uploads/2018/05/20180527140133-5b0aba3dcec5b.png" />
<meta name="description" itemprop="description" content="這是要分享的內容" />

其他問題

:直接在卡片上長按進行轉發的話,縮圖資訊會失效?
:參考 微信分享給朋友的連結,再次被好友轉發之後,分享連結的圖示不見了,怎麼解決?求賜教!