1. 程式人生 > >微信分享自定義內容實現

微信分享自定義內容實現

做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 () { 
        // 使用者取消分享後執行的回撥函式
    }
});

                由於分享的介面比較簡單,使用過程就不詳細講述了,如果您有任何疑問可以交流。