最近開發微信活動的時候，發現分享到朋友圈和發送給朋友功能不穩定，時而有效時而無效，打開debug模式查看，發現多數報的數簽名錯誤，仔細看了官方文檔，最終問題出在ticket的緩存上。
1、簽名：
url： 需要根據不同的頁面動態獲取，url不能進行encodeURIComponent，否則驗簽會失敗url不能包括微信添加的#后邊的部分，所以應該處理為：window.location.href.split('#')[0]簽名用的url必須是調用JS接口頁面的完整URL。nonceStr、timestamp：應該動態生成，而不能hardcode 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同- 為安全考慮，簽名必須在后台進行，其他調用js在前台進行。
2、ticket和accesstoken：
accesstoken：同調用微信其他接口的accesstoken，必須全局緩存，以免影響其他業務，即是說：微信所有業務應該用同一個accesstoken去調用微信接口，而不能自己刷新accesstoken。ticket：同accesstoken一樣，必須全局緩存，方式很多，可以放到數據庫，或者放到緩存。目前ticket的有效時間為2小時，所以2小時內ticket未過期時，不能重復獲取，否則可能導致ticket獲取次數超過限額，導致sign失敗。
3、注意代碼執行順序
首先應該獲取簽名，簽名獲取后在調用wx.config方法，然后再執行wx.ready、wx.error方法。
4、其他
每個頁面加載完成后都應該重新從后台獲取簽名信息，避免簽名失敗
具體開發步驟詳見官方文檔
5、官方常見問題及處理方法：
調用config 接口的時候傳入參數 debug: true 可以開啟debug模式，頁面會alert出錯誤信息。以下為常見錯誤及解決方法：
1、invalid url domain
當前頁面所在域名與使用的appid沒有綁定，請確認正確填寫綁定的域名，如果使用了端口號，則配置的綁定域名也要加上端口號（一個appid可以綁定三個有效域名，見 目錄1.1.1）。
2、invalid signature簽名錯誤。
建議按如下順序檢查：
-
確認簽名算法正確，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。
-
確認config中nonceStr（js中駝峰標准大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。
-
確認url是頁面完整的url(請在當前頁面alert(location.href.split(‘#’)[0])確認)，包括’http(s)://’部分，以及’？’后面的GET參數部分,但不包括’#’hash后面的部分。
-
確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
-
確保一定緩存access_token和jsapi_ticket。
-
確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。 如果是html的靜態頁面在前端通過ajax將url傳到后台簽名，前端需要用js獲取當前頁面除去’#’hash部分的鏈接（可用location.href.split(‘#’)[0]獲取,而且需要encodeURIComponent），因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數，如果不是動態獲取當前鏈接，將導致分享后的頁面簽名失敗。
3、the permission value is offline verifying
這個錯誤是因為config沒有正確執行，或者是調用的JSAPI沒有傳入config的jsApiList參數中。建議按如下順序檢查：
- 確認config正確通過。
- 如果是在頁面加載好時就調用了JSAPI，則必須寫在wx.ready的回調中。
- 確認config的jsApiList參數包含了這個JSAPI。
4、permission denied
該公眾號沒有權限使用這個JSAPI，或者是調用的JSAPI沒有傳入config的jsApiList參數中（部分接口需要認證之后才能使用）。
5、function not exist
當前客戶端版本不支持該接口，請升級到新版體驗。
6、為什么6.0.1版本config:ok，但是6.0.2版本之后不ok
因為6.0.2版本之前沒有做權限驗證，所以config都是ok，但這並不意味着你config中的簽名是OK的，請在6.0.2檢驗是否生成正確的簽名以保證config在高版本中也ok。
7、在iOS和Android都無法分享
請確認公眾號已經認證，只有認證的公眾號才具有分享相關接口權限，如果確實已經認證，則要檢查監聽接口是否在wx.ready回調函數中觸發
8、服務上線之后無法獲取jsapi_ticket，自己測試時沒問題。
因為access_token和jsapi_ticket必須要在自己的服務器緩存，否則上線后會觸發頻率限制。請確保一定對token和ticket做緩存以減少2次服務器請求，不僅可以避免觸發頻率限制，還加快你們自己的服務速度。目前為了方便測試提供了1w的獲取量，超過閥值后，服務將不再可用，請確保在服務上線前一定全局緩存access_token和jsapi_ticket，兩者有效期均為7200秒，否則一旦上線觸發頻率限制，服務將不再可用。
9、uploadImage怎么傳多圖
目前只支持一次上傳一張，多張圖片需等前一張圖片上傳之后再調用該接口
10、沒法對本地選擇的圖片進行預覽
chooseImage接口本身就支持預覽，不需要額外支持
11、通過a鏈接(例如先通過微信授權登錄)跳轉到b鏈接，invalid signature簽名失敗
后台生成簽名的鏈接為使用jssdk的當前鏈接，也就是跳轉后的b鏈接，請不要用微信登錄的授權鏈接進行簽名計算，后台簽名的url一定是使用jssdk的當前頁面的完整url除去’#’部分
12、出現config:fail錯誤
這是由於傳入的config參數不全導致，請確保傳入正確的appId、timestamp、nonceStr、signature和需要使用的jsApiList
13、如何把jsapi上傳到微信的多媒體資源下載到自己的服務器
請參見文檔中uploadVoice和uploadImage接口的備注說明
14、Android通過jssdk上傳到微信服務器，第三方再從微信下載到自己的服務器，會出現雜音
微信團隊已經修復此問題，目前后台已優化上線
15、綁定父級域名，是否其子域名也是可用的
是的，合法的子域名在綁定父域名之后是完全支持的
16、在iOS微信6.1版本中，分享的圖片外鏈不顯示，只能顯示公眾號頁面內鏈的圖片或者微信服務器的圖片，已在6.2中修復
17、是否需要對低版本自己做兼容
jssdk都是兼容低版本的，不需要第三方自己額外做更多工作，但有的接口是6.0.2新引入的，只有新版才可調用
18、該公眾號支付簽名無效，無法發起該筆交易
請確保你使用的jweixin.js是官方線上版本，不僅可以減少用戶流量，還有可能對某些bug進行修復，拷貝到第三方服務器中使用，官方將不對其出現的任何問題提供保障，具體支付簽名算法可參考 JSSDK微信支付一欄
19、目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題已在Android6.2中修復
20、uploadImage在chooseImage的回調中有時候Android會不執行
Android6.2會解決此問題，若需支持低版本可以把調用uploadImage放在setTimeout中延遲100ms解決
21、require subscribe錯誤說明你沒有訂閱該測試號，該錯誤僅測試號會出現
22、getLocation返回的坐標在openLocation有偏差
因為getLocation返回的是gps坐標，openLocation打開的騰訊地圖為火星坐標，需要第三方自己做轉換，6.2版本開始已經支持直接獲取火星坐標
23、查看公眾號（未添加）: “menuItem:addContact”不顯示
目前僅有從公眾號傳播出去的鏈接才能顯示，來源必須是公眾號
24、ICP備案數據同步有一天延遲，所以請在第二日綁定
6、示例：
1、后台獲取ticket方法：
public String cacheJsSDKTicket(String appid) throws IOException { Assert.hasLength(appid); String cachedTicket = spyMemcachedClient.get(WechatConst.Cache.CACHE_KEY + "TICKET"); if (cachedTicket != null && !"".equals(cachedTicket)) { LOG.info("Ticket exists, return directly ..."); return cachedTicket; } LOG.info("Ticket not exists, get from weixin ..."); String accessToken = weChatApi.getAccessToken(appid); String ticket = weChatApi.getJsApiTicket(accessToken); // 7200秒過期 int timeOut = 7200; spyMemcachedClient.safeSet(WechatConst.Cache.CACHE_KEY + "TICKET", timeOut, ticket); return ticket; } 這里我將ticket全局緩存到memorycache中。
2、后台簽名方法：
@Override public String signJsSDK(String ticket, String url, String timestamp, String nonceStr) throws NoSuchAlgorithmException { Map map = new HashMap(); map.put("noncestr", nonceStr); map.put("jsapi_ticket", ticket); map.put("timestamp", timestamp); map.put("url", url); String[] ss = {"noncestr", "jsapi_ticket", "timestamp", "url"}; Arrays.sort(ss); String signStr = ""; for (String s : ss) { signStr += s + "=" + map.get(s) + "&"; } signStr = signStr.substring(0, signStr.length() - 1); return new SHA1().getDigestOfString(signStr.getBytes()); }
3、獲取簽名方法：
public void getJsSdkInfo(CspServiceContext serviceContext) throws IOException, NoSuchAlgorithmException { MessageObject mo = serviceContext.getRequestData(); String url = (String) mo.getValue("url"); String appid = (String) mo.getValue("appid"); String timestamp = Long.toString(System.currentTimeMillis() / 1000); String nonceStr = UUID.randomUUID().toString(); // 緩存ticket String ticket = memoryCacheManager.cacheJsSDKTicket(appid); // 簽名 String sign = weChatApi.signJsSDK(ticket, url, timestamp, nonceStr); Map resMap = new HashMap(); resMap.put("appid", appid); resMap.put("ticket", ticket); resMap.put("sign", sign); resMap.put("nonceStr", nonceStr); resMap.put("timestamp", timestamp); Response resp = new Response(resMap); serviceContext.setResponseData(resp); serviceContext.setResult(Result.FAULT_RESULT); }
4、前台獲取jssdk：
function _wechatConfig(o) { wx.config({ debug: debug, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 appId: o.appid, // 必填，公眾號的唯一標識 timestamp: o.timestamp, // 必填，生成簽名的時間戳 nonceStr: o.nonceStr, // 必填，生成簽名的隨機串 signature: o.sign,// 必填，簽名，見附錄1 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage' ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2 }); } function _getWechatJsSdkInfo(callback) { var s = W.Storage.get(W.location.href + "_" + area); var appid ='wx7e80e8f93543a5c8'; ajaxJsonCall('/wechat/service/WeChat.getJsSdkInfo.json', { url: W.location.href.split('#')[0], appid: appid }, function (data) { if (data.rtnCode === "000000") { var o = data.responseData; W.Storage.set(W.location.href + "_" + area, o, jsSdkTimeout); callback(o); } else { W.Storage.remove(W.location.href + "_" + area); } }, false); } _getWechatJsSdkInfo(_wechatConfig); wx.checkJsApi({ jsApiList: [ 'getLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage' ], success: function (res) { //alert(JSON.stringify(res)); } }); //var url = "www.zaichengdu.com" + app_path; var url = curDomain; function _shareAppMessage() { // 頁面加載后設置微信分享給朋友的內容 wx.onMenuShareAppMessage({ title: '聖誕老人送禮啦，現金紅包人人領！', // 分享標題 desc: '“聖誕奪包”35000份禮包等你拆！', // 分享描述 link: encodeURI(curDomain + '/christmas/service/ChristmasSockOnline.home.do?area=cd'),//encodeURI(window.location.href.replace('&from=ad', '')), // 分享鏈接 imgUrl: url + '/public/christmas/img/shorejoin.jpg', // 分享圖標 type: '', // 分享類型,music、video或link，不填默認為link dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空 success: function () { // 用戶確認分享后執行的回調函數 //Message.toast.success("分享成功！").appear(); }, cancel: function () { // 用戶取消分享后執行的回調函數 //alert('cancel'); } }); } function _shareTimeline() { // 設置分享到朋友圈的內容 wx.onMenuShareTimeline({ title: '聖誕老人送禮啦，現金紅包人人領！', // 分享標題 link: encodeURI(curDomain + '/christmas/service/ChristmasSockOnline.home.do?area=cd'),//encodeURI(window.location.href.replace('&from=ad', '')), // 分享鏈接 imgUrl: url + '/public/christmas/img/shorejoin.jpg', // 分享圖標 success: function () { // 用戶確認分享后執行的回調函數 Message.toast.success("分享成功！").appear(); }, cancel: function () { // 用戶取消分享后執行的回調函數 //alert('cancel'); } }); } wx.ready(function () { // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。 //alert('success'); _shareAppMessage(); _shareTimeline(); }); wx.error(function (res) { // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。 //alert('error'); });