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

最近公司要求我作一個關於頁面分享微信顯示小圖和描述的功能，因爲以前沒有作過，因此說是從零開始，看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) {}
		});
	});

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