最近公司要求我做一個關於頁面分享微信顯示小圖和描述的功能，由於之前沒有做過，所以說是從零開始，看jssdk說明文檔，網上搜索各種資料，甚至連三四年前的內容都搜索出來了，也試過以前的簡單方法，包括在頁面設置一個隱藏的圖片，寬高都是300像素，微信就會抓取這張圖片做為分享圖片，但經本人測試無法使用，後來查到了原因，是微信對自定義分享內容作了限制，於是最終還是得回到配置wx.config上來。

wx.config({
			    debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來
			    appId: data.configMap.appId, // 必填，公眾號的唯一標識
			    timestamp: data.configMap.timestamp, // 必填，生成簽名的時間戳
			    nonceStr: data.configMap.nonceStr, // 必填，生成簽名的隨機串
			    signature: data.configMap.signature,// 必填，簽名，見附錄1
			    jsApiList: [
			   		"onMenuShareTimeline",//分享朋友圈接口
			    	"onMenuShareAppMessage"//分享給朋友接口
			    ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
			});

　　測試的時候最好將debug設置為true，這樣可以在手機微信測試頁面的時候查看到出錯的地方，有四個參數，appId，timestame，nonceStr，signature是由後臺給你提供，具體的後臺怎樣實現這裏不多做解釋，百度搜索和微信官方都有提供，

var link = location.href;
$.ajax({
		url:"your_url",//後臺給你提供的接口
		type:"GET",
		data:{"url":link},
		async:true,
		dataType:"json",
		success:function (data){
			wx.config({
			    debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來
			    appId: data.configMap.appId, // 必填，公眾號的唯一標識
			    timestamp: data.configMap.timestamp, // 必填，生成簽名的時間戳
			    nonceStr: data.configMap.nonceStr, // 必填，生成簽名的隨機串
			    signature: data.configMap.signature,// 必填，簽名，見附錄1
			    jsApiList: [
			   		"onMenuShareTimeline",
			    	"onMenuShareAppMessage"
			    ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
			});
			wx.error(function (res) {
                alert(res);
            });
		},
		error:function (error){
			alert(error)
		}
	});

　　註意，在這裏請求四個參數的時候，需要將頁面的url（不包括#以及後面的內容）傳給後臺，這一步比較重要。

在這裏之前犯了個錯誤，async，請求是否異步的時候，我寫的是false，也就是同步，結果導致頁面在ios系統分享不了，有時候能分享但沒有圖片顯示，但是在安卓系統就可以正常顯示和分享，後來改為true之後就ok了。

這是後臺返回的參數，

jsApiList裏面的參數是調用的接口列表數組，分享到朋友圈和分享給朋友時必須寫上以上兩個參數，onMenuShareTimeline 和 onMenuShareAppMessage，

測試的時候如果有哪個參數不正確，就會彈出對應的錯誤信息，之前沒有傳url的時候，報的是signature錯誤，也就是簽名錯誤。

當參數都正確的時候，打開了調試時在微信客戶端打開會彈出：errMsg:config:ok!

當wx.config()成功之後，wx.ready()方法就可以調用了，這時候就是設置一些分享時的圖片，標題，以及描述信息了，這個都很簡單，根據需要填寫。

wx.ready(function(res) {
    	wx.onMenuShareAppMessage({
			title: document.title,
			desc:document.title,
			link: link,
			imgUrl: Imgurl,
			trigger: function(res) {},
			success: function(res) {},
			cancel: function(res) {},
			fail: function(res) {}
		});
		wx.onMenuShareTimeline({
			title: document.title,
			link: link,
			imgUrl: Imgurl,
			trigger: function(res) {},
			success: function(res) {},
			cancel: function(res) {},
			fail: function(res) {}
		});
	});

　　這時候基本上就大功告成了，其實這塊原理不是很復雜，但稍有一個地方出錯就不能成功，所以如果不成功的時候不要心急，耐心尋找哪個地方寫的不對，多上網搜索總會找到答案的。

微信分享圖標設置，以及wx.config配置