1. 微信JSSDK使用步驟簡介
我們既然是在做基於微信的開發，當然就離不開微信的開發文檔了。開始之前希望大家能先去看下《微信JS-SDK說明文檔》。那麽我們怎麽樣才能用上微信的JSSDK呢？以下基本步驟就是基於該文檔的。
需要註意的是，如果本人下面的描述妳看的有點雲裏霧裏的話，我建議妳：
回頭看下本系列《小白學react》的歷史基礎文章，特別是《小白學react之altjs的Action和Store》以及《小白學react之打通React Component任督二脈》，或/和：
直接跳過我的描述，在文章後面下載最新的源碼，先閱讀源碼，碰到問題再反過來看文章的描述。
步驟壹：綁定域名
先登錄微信公眾平臺進入“公眾號設置”的“功能設置”裏填寫“JS接口安全域名”。
備註：登錄後可在“開發者中心”查看對應的接口權限。
這裏綁定的時候需要註意不要帶前面的W', accessTokenUrlin.qq.com/cgi-bin/token', ticketUrl:'com/cgi-bin/ticket/getticket',
}
exports.sign = function (url,callback) { ?var noncestr = config.noncestr,
timestamp = Math.floor(Date.now()/1000), //精確到秒
...
request(config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret ,function(error, response, body){ if (!error && response.statusCode == 200) { var tokenMap = JSON.parse(body);
request(config.ticketUrl + '?access_token=' + tokenMap.access_token + '&type=jsapi', function(error, resp, json){ if (!error && response.statusCode == 200) { var ticketMap = JSON.parse(json);
cache.put('ticket',ticketMap.ticket,config.cache_duration); ?//加入緩存
callback({ noncestr:noncestr, timestamp:timestamp, url:url, jsapi_ticket:ticketMap.ticket, signature:sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url)
});
}
})
}
})
}
}
這裏的流程和我們剛才描述的並無二致。首先是通過appId和secret獲得調用獲取jsapi_ticket的access_token，然後通過該access_token獲得我們簽名需要用到的jsapi_ticket。noncestr我們是提前隨便填寫好的。timestamp的算法也比較簡單。
最後就是通過sha1這個庫提供的方法，將jsapi_ticket，noncestr，timestamp和頁面url進行sha1簽名，然後將以上這些信息通過callback返回給上層調用函數。
那麽我們往下看下我們的上層調用函數。其實就是我們的express路由:
app.get("/api/signature", function(req,res) { const url = req.query.url.split('#')[0];signature.sign(url,function(signatureMap){
signatureMap.appId = wechat_cfg.appid;
res.send(signatureMap);
});
})
根據微信開發文檔需求，我們首先需要將傳進來的url的錨點後面的數據給去掉，保留前面的有效部分。
然後就是調用上面的sign方法來生成簽名。上面的簽名方法最後傳進來的json數據就是這裏的signatureMap。我們最終會將這些數據發送回react客戶端。
同時，通過上面的wx.config的示例，我們知道還需要用到微信公眾號的appId。所以這裏壹並將其放到signatureMap中進行返回。
那麽到此為止，react客戶端調用服務端的"/api/signature"返回的數據示例如下:
{ noncestr: 'Wm3WZYTPz0wzccnW', timestamp: 1476873698, url: 'com/?code=001kGsd30xcm7F1PAFf305Uud30kGsdr&state=', jsapi_ticket: 'sM4AOVdWfPE4DxkXGEs8VBqyVbs-TKGYp4d_ZSQa0Q5WvvMUPNQ6XGpyEcgKOD_xID_GrMCaalSmIF9JbrGaOg', signature: '9268ffaf4b9eb0d296fcfefe3d2724118aa05e3c'}
3. ?客戶端獲取簽名信息
3.1 獲取簽名信息並註入jssdk
和之前的獲取微信用戶信息壹樣，我們這裏會建立壹個新的Source文件WechatSdkSource.js來調用遠程服務器的"/api/signature"接口:
var WechatSdkSource = { fetchSignatureMap() { return {?remote(state,url) { return co(function *() { ?let signatureMap = null; ?const getSignatureMapUrl = `/api/signature`; ?try { let result = yield request.get(getSignatureMapUrl).query({url:url});
signatureMap = result.body;
?} catch (e) {
signatureMap = null;
?} ?//console.log("userInfo:", userInfo);
?return signatureMap;
});
?},
?local() { // Never check locally, always fetch remotely.
return null;
?}, ?success: WechatSdkActions.updateSignatureMap, ?error: WechatSdkActions.getSignatureMapFailed, ?loading: WechatSdkActions.getSignatureMap,
}
}};
這裏傳進來的url由下面將要談及的上層函數所生成。整個流程就沒有什麽好說的了，說白了就是通過相應的庫發送壹個帶有url的query參數的請求到服務器端來請求簽名信息，相信有跟著這個系列文章的朋友都是很清楚的了。
最終請求成功返回的時候就會調用WechatSdkActions的updateSignatureMap這個Action。
var alt = require('../alt');module.exports ?= alt.generateActions( 'updateSignatureMap', 'getSignatureMap', 'getSignatureMapFailed',);
而這個action就會觸發所監聽的WechatSdkStore的onUpdateSignatureMap這個回調。
class WechatSdkStore { ?constructor() { this.signatureMap = []; this.errorMessage = null; this.ready = false; this.bindActions(WechatSdkActions); this.exportAsync(WechatSdkSource);