微信分享圖示設定，以及wx.config配置
最近公司要求我做一個關於頁面分享微信顯示小圖和描述的功能，由於之前沒有做過，所以說是從零開始，看jssdk說明文件，網上搜索各種資料，甚至連三四年前的內容都搜尋出來了，也試過以前的簡單方法，包括在頁面設定一個隱藏的圖片，寬高都是300畫素，微信就會抓取這張圖片做為分享圖片，但經本人測試無法使用，後來查到了原因，是微信對自定義分享內容作了限制，於是最終還是得回到配置wx.config上來。
| 1234567891011 | wx.config({debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來appId: data.configMap.appId, // 必填，公眾號的唯一標識timestamp: data.configMap.timestamp, // 必填，生成簽名的時間戳nonceStr: data.configMap.nonceStr, // 必填，生成簽名的隨機串signature: data.configMap.signature,// 必填，簽名，見附錄1jsApiList: ["onMenuShareTimeline",//分享朋友圈介面"onMenuShareAppMessage"//分享給朋友介面] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2}); |
測試的時候最好將debug設定為true，這樣可以在手機微信測試頁面的時候檢視到出錯的地方，有四個引數，appId，timestame，nonceStr，signature是由後臺給你提供，具體的後臺怎樣實現這裡不多做解釋，百度搜索和微信官方都有提供，
| 123456789101112131415161718192021222324252627 | 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,// 必填，簽名，見附錄1jsApiList: ["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()方法就可以呼叫了，這時候就是設定一些分享時的圖片，標題，以及描述資訊了，這個都很簡單，根據需要填寫。
| 123456789101112131415161718192021 | 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) {}});}); |
這時候基本上就大功告成了，其實這塊原理不是很複雜，但稍有一個地方出錯就不能成功，所以如果不成功的時候不要心急，耐心尋找哪個地方寫的不對，多上網搜尋總會找到答案的。