前段時間做這個功能的時候遇到這個問題，之前的話是微信自動抓取界面第一張圖，現在微信更新api，必須自行配置，接入jssdk，才能實現該功能。

詳細可以查看微信的jssdk文檔 微信官方開發者文檔 地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1、首先需要微信的服務號

2、一個ICP備案的域名

這個域名需要設置為微信公眾號後臺的JS接口安全域名，否則微信仍然不允許調用它的接口。

3、在微信開發者中心配置域名

根據提示來操作，註意下面的操作提示

4、引入js文件

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>

5、通過config接口註入權限驗證配置(這裏需要後臺配合操作)

wx.config({

    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。

    appId: ‘‘, // 必填，公眾號的唯一標識

    timestamp: , // 必填，生成簽名的時間戳

    nonceStr: ‘‘, // 必填，生成簽名的隨機串

    signature: ‘‘,// 必填，簽名，見附錄1

    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2

});

6、通過ready接口處理成功驗證

wx.ready(function(){

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

});

通過error接口處理失敗驗證

wx.error(function(res){

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

});

7、配置分享

$(function() {
    //微信分享
    $.ajax({
        "url":"https://***.***.com/getJsAPITicket",  //接口地址
        "type":"Get",
        "dataType":"json",
        "data":{"url": window.location.href},
        "success":function(data){
            wxstart(data, "");
        }
    });
});

function wxstart(data, url){
	var url = ‘‘;  //分享的文章地址
    var appId = data.appId;
    var timestamp = data.timestamp;
    var nonceStr = data.nonceStr;
    var signature = data.signature;
    wx.config({
        debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
        appId: appId, // 必填，公眾號的唯一標識
        timestamp: timestamp, // 必填，生成簽名的時間戳
        nonceStr: nonceStr, // 必填，生成簽名的隨機串
        signature: signature,// 必填，簽名，見附錄1
        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ"] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
    });
    
    wx.ready(function(){
        var imgurl = ‘https://‘ + window.location.hostname + ‘/static/customerHtml/img/weixinshare.jpg‘;
        var title = ‘‘;
        var desc = ‘‘;
        wx.onMenuShareTimeline({
            title: title, // 分享標題
            desc: desc, // 分享描述
            link: url, // 分享鏈接
            imgUrl: imgurl, // 分享圖標
            success: function () { 
                // 用戶確認分享後執行的回調函數
            },
            cancel: function () { 
                // 用戶取消分享後執行的回調函數
            }
        });
        
        wx.onMenuShareAppMessage({
            title: title, // 分享標題
            desc: desc, // 分享描述
            link: url, // 分享鏈接
            imgUrl: imgurl, // 分享圖標
            type: ‘‘, // 分享類型,music、video或link，不填默認為link
            dataUrl: ‘‘, // 如果type是music或video，則要提供數據鏈接，默認為空
            success: function () { 
                // 用戶確認分享後執行的回調函數
            },
            cancel: function () { 
                // 用戶取消分享後執行的回調函數
            }
        });
        
        wx.onMenuShareQQ({
        	title: title, // 分享標題
            desc: desc, // 分享描述
            link: url, // 分享鏈接
            imgUrl: imgurl, // 分享圖標
            success: function () { 
               // 用戶確認分享後執行的回調函數
            },
            cancel: function () { 
               // 用戶取消分享後執行的回調函數
            }
        });
    });
}

8、正常操作是沒有問題的，下面說一說遇到的坑：

首先是配置域名了，但是會報invalid url domain，檢查之後發現配置域名不用帶協議，二級域名

另外一個坑是，打開調試方法，分享測試仍然沒有效果，需要部署到服務器上，不能再本地測試，這裏我用的是修改一個demo文件，部署到測試服務器上進行測試，有的說可以用

花生殼的內網穿透服務（收費，20元以內）

花生殼官網：http://hsk.oray.com/price/#personal

選擇個人免費版就可以了，雖然說是免費版，但是其實註冊過程中還是要收幾塊錢的，不建議大家購買流量，送的流量可以用很久了。

最後一個問題是，我在測試的時候，發現怎麽調都沒有觸發分享的函數，原因是我分享出去的觸發時間封裝了一個函數，在wx.ready()之後調用的，其實應該在這個方法裏邊，這樣就可以自定義分享了。

配置微信jssdk自定義分享