前端自定義微信分享連接

前端自定義微信分享連接

內嵌在微信中的網頁，右上角都會有一個默認的分享功能。以下圖所示，第一個爲默認的效果，第二個爲自定義的效果。

微信JS-SDK說明文檔

1、引用微信jssdk文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>

2、配置

分享接口

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '@Model.appId', // 必填，公衆號的惟一標識
    timestamp: '@Model.timestamp', // 必填，生成簽名的時間戳
    nonceStr: '@Model.nonceStr', // 必填，生成簽名的隨機串
    signature: '@Model.signature',// 必填，簽名，見附錄1
    jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'showMenuItems'
    ] // 必填，須要使用的JS接口列表。
});

wx.ready(function() {
    //獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容接口（即將廢棄）
    wx.onMenuShareTimeline({
        title: '', // 分享標題
        link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
        imgUrl: '', // 分享圖標
        success: function () {
            // 用戶點擊了分享後執行的回調函數
        }
    });
    
    //獲取「分享給朋友」按鈕點擊狀態及自定義分享內容接口（即將廢棄）
    wx.onMenuShareAppMessage({
        title: '', // 分享標題
        desc: '', // 分享描述
        link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
        imgUrl: '', // 分享圖標
        type: '', // 分享類型,music、video或link，不填默認爲link
        dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
        success: function () {
            // 用戶點擊了分享後執行的回調函數
        }
    });
        
});

這裏在開發過程當中appId、timestamp、nonceStr、signature直接用ajax從後臺獲取。

---

1.4.0版本以後使用以下分享代碼：

//自定義「分享給朋友」及「分享到QQ」按鈕的分享內容（1.4.0）
wx.updateAppMessageShareData({ 
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
    imgUrl: '', // 分享圖標
}, function(res) { 
    //這裏是回調函數 
}); 

//自定義「分享到朋友圈」及「分享到QQ空間」按鈕的分享內容（1.4.0）
 wx.updateTimelineShareData({ 
     title: '', // 分享標題
     link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
     imgUrl: '', // 分享圖標
}, function(res) { 
    //這裏是回調函數 
});