新版微信分享--圖片和描述

微信6.5.6更新后，微信H5頁面分享出去沒有圖片。之前微信會默忍抓取頁面第一張大於等於300*300的圖片，更新微信版本后，分享出去圖片沒有抓取到。這是微信為了規范自定義分享鏈接功能在網頁上的使用，修改了分享規則，6.5.6版本之后，分享功能必須引入微信SDK。對於未接入微信JSSDK或已接入但JSSDK調用失敗的網頁，被用戶分享時，分享卡片將統一使用默認縮略圖和標題簡介，不允許自定義。

分享一下接入流程：

步驟一：綁定域名

先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

備注：登錄后可在“開發者中心”查看對應的接口權限。

步驟二：引入JS文件

在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

備注：支持使用 AMD/CMD 標准模塊加載方法加載

步驟三：通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});　　

 上面代碼的timestamp、nonceStr、signature等參數的獲取在后面給出

步驟四：通過ready接口處理成功驗證

 

wx.ready(function(){
    // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});

步驟五：通過error接口處理失敗驗證

wx.error(function(res){
    // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
});

步驟六：分享接口

1、獲取“分享到朋友圈”按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareTimeline({

    title: '', // 分享標題

    link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致

    imgUrl: '', // 分享圖標【一定要帶http的完整路徑】

    success: function () { 

        // 用戶確認分享后執行的回調函數

    },

    cancel: function () { 

        // 用戶取消分享后執行的回調函數

    }

});

　2、獲取“分享給朋友”按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareAppMessage({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
    imgUrl: '', // 分享圖標
    type: '', // 分享類型,music、video或link，不填默認為link
    dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
    success: function () { 
        // 用戶確認分享后執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享后執行的回調函數
    }
});

　　3、獲取“分享到QQ”按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareQQ({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接
    imgUrl: '', // 分享圖標
    success: function () { 
       // 用戶確認分享后執行的回調函數
    },
    cancel: function () { 
       // 用戶取消分享后執行的回調函數
    }
});

　　還有分享到騰訊微博什么的就不一一列舉了

步驟七：獲取相關參數【PHP】

首先，去這里把jssdk.php放在項目里

然后通過下面方法獲取相關參數

$appid = "appid";
$secret = "secret";
$jssdk = new JSSDK($appid,$secret);
$signPackage = $jssdk->GetSignPackage();

$signPackage變量里面就包括了上面需要的幾個關鍵參數，直接用就可以了。