微信分享自定義內容實現
阿新 • • 發佈:2019-01-05
做html5的童鞋,微信中的分享,包括分享給qq好友、分享到朋友圈等,如何來自定義其中的內容呢?下面咱們一起聊聊。
微信JS-SDK中的分享有兩種方案。
第1種,可以自定義分享的“title”與“圖片”,即使沒有微信JSSDK的許可權也可以操作。
大致的思路如下
1,修改title。在使用者點選分享按鈕之前,利用js程式碼修改網頁的“title”,程式碼如下:
document.title = ‘修改的新標題’
2,修改圖片。因為微信的預設分享,會抓取網頁內的第一張圖片,作為分享的參考圖片,所以做開發的朋友,可以在頁面自定義第一張圖片,供分享抓取。
第2種,直接使用微信jssdk的介面,官方示例程式碼如下:
/*分享介面 請注意不要有誘導分享等違規行為,對於誘導分享行為將永久回收公眾號介面許可權,詳細規則請檢視:朋友圈管理常見問題 。 獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面 */ wx.onMenuShareTimeline({ title: '', // 分享標題 link: '', // 分享連結 imgUrl: '', // 分享圖示 success: function () { // 使用者確認分享後執行的回撥函式 }, cancel: function () { // 使用者取消分享後執行的回撥函式 } }); //獲取“分享給朋友”按鈕點選狀態及自定義分享內容介面 wx.onMenuShareAppMessage({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享連結 imgUrl: '', // 分享圖示 type: '', // 分享型別,music、video或link,不填預設為link dataUrl: '', // 如果type是music或video,則要提供資料鏈接,預設為空 success: function () { // 使用者確認分享後執行的回撥函式 }, cancel: function () { // 使用者取消分享後執行的回撥函式 } }); //獲取“分享到QQ”按鈕點選狀態及自定義分享內容介面 wx.onMenuShareQQ({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享連結 imgUrl: '', // 分享圖示 success: function () { // 使用者確認分享後執行的回撥函式 }, cancel: function () { // 使用者取消分享後執行的回撥函式 } }); //獲取“分享到騰訊微博”按鈕點選狀態及自定義分享內容介面 wx.onMenuShareWeibo({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享連結 imgUrl: '', // 分享圖示 success: function () { // 使用者確認分享後執行的回撥函式 }, cancel: function () { // 使用者取消分享後執行的回撥函式 } });
由於分享的介面比較簡單,使用過程就不詳細講述了,如果您有任何疑問可以交流。