對於做H5手機端的同學來說，微信是個必不可少的入口，自然而然我們需要呼叫微信提供給H5或者說JS的各種介面，我們也要根據微信的要求去做各種簽名驗證，才能最終到達我們的需求，GITHUB上面也有很多關於這方面的庫可以用，但是他們總是或多或少的不能完全滿足需求，或者說是又要付出很多額外的開發，因此呢，我自己也是開發了一個庫wechat-jssdk去最大化的滿足微信JSSDK有的功能，此庫只關注jssdk所提供的功能，並提供服務端(NodeJS)各種驗籤支援，並且自動化管理各種token，ticket的過期處理，讓開發者能更多的關注業務本身。
好了，說完了WHY, 下面介紹HOW：
先上個demo圖：
主要功能集合
使用方法
npm install wechat-jssdk --save
或
yarn add wechat-jssdk
//require並初始化
const Wechat = require(`wechat-jssdk`);
const wx = new Wechat(wechatConfig);
複製程式碼Wechat Config
wechatConfig 為以下格式:
{
//第一個為設定網頁授權回撥地址
wechatRedirectUrl: "http://yourdomain.com/wechat/oauth-callback",
wechatToken: "xxx", //可選，第一次在微信控制檯儲存開發者配置資訊時使用
appId: "xxx",
appSecret: "xxx",
card: true, //開啟卡券支援，預設關閉
payment: true, //開啟支付支援，預設關閉
merchantId: ``, //商戶ID
paymentSandBox: true, //沙箱模式，驗收用例
paymentKey: ``, //必傳，驗籤金鑰，TIP:獲取沙箱金鑰也需要真實的金鑰，所以即使在沙箱模式下，真實驗籤金鑰也需要傳入。
//pfx 證照
paymentCertificatePfx: fs.readFileSync(path.join(process.cwd(), `cert/apiclient_cert.p12`)),
//預設微信支付通知地址
paymentNotifyUrl: `http://your.domain.com/api/wechat/payment/`,
}
複製程式碼設定微信環境
1.現在一般直接給個MP_verify_xxx.txt檔案放在你網站根目錄，讓微信自動去驗證
2.還需要提供一個API來讓瀏覽器獲取當前地址的簽名
//express風格
router.get(`/get-signature`, function(req, res) {
wx.jssdk.getSignature(req.query.url).then(function(signatureDate) {
res.json(signatureDate);
});
});
複製程式碼3.獲取簽名後，進入下一步瀏覽器端使用方法.
瀏覽器端
在前端中js:
//ES6
import WechatJSSDK from `wechat-jssdk/dist/client`;
//commonjs
const WechatJSSDK = require(`wechat-jssdk/dist/client`);
//others
window.WechatJSSDK
//然後例項化:
const wechatObj = new WechatJSSDK(config);
複製程式碼config應該為:
const config = {
//前4個是微信驗證簽名必須的引數，第2-4個引數為類似上面 `/get-signature` 從node端獲取的結果
`appId`: `xxx`,
`nonceStr`: `xxx`,
`signature`: `xxx`,
`timestamp`: `xxx`,
//下面為可選引數
`success`: function(wechatObj){}, //微信簽名成功回撥函式, 跟 `successCallback` 一樣
`error`: function(err, wechatObj){}, //微信簽名失敗回撥函式, 跟 `errorCallback` 一樣
`debug`: true, //開啟 debug 模式
`jsApiList`: [], //設定所有想要使用的微信jsapi列表, 預設值為 [`onMenuShareTimeline`, `onMenuShareAppMessage`]，分享到朋友圈及聊天記錄
`customUrl`: `` //自定義微信js連結
}
複製程式碼驗證簽名成功後, 就可以自定義你的分享內容了:
//自定義分享到聊天視窗
//內部呼叫 `wechatObj.callWechatApi(`onMenuShareAppMessage`, {...})`， 語法糖而已
wechatObj.shareOnChat({
type: `link`,
title: `title`,
link: location.href,
imgUrl: `/logo.png`,
desc: `description`,
success: function (){},
cancel: function (){}
});
//自定義分享到朋友圈
//語法糖
wechatObj.shareOnMoment({
type: `link`,
title: `title`,
link: location.href,
imgUrl: `/logo.png`
});
複製程式碼要獲取原始的微信物件 wx，可以通過wechatObj.getOriginalWx()來獲取。
如果第一次驗證失敗，可以在error回撥裡更新簽名資訊，並重新發驗證請求：
wechatObj.signSignature(newSignatureConfig);, newSignatureConfig只需包含：
{
`nonceStr`: `xxx`,
`signature`: `xxx`,
`timestamp`: `xxx`,
}
複製程式碼呼叫其他微信介面：
wechatObj.callWechatApi(apiName, apiConfig)
apiName和apiConfig請參考微信官方介面文件
OAuth
預設生成微信授權URL為 wx.oauth.snsUserInfoUrl 和 wx.oauth.snsUserBaseUrl，其中的預設回撥URL為 wechatConfig 中配置的 wechatRedirectUrl.
你也可以通過呼叫 wx.oauth.generateOAuthUrl(customUrl, scope, state)來自定義回撥地址
//callback url handler
//如"wechatRedirectUrl"配置為 "http://127.0.0.1/wechat/oauth-callback", 你的路由需要為：
router.get(`/wechat/oauth-callback`, function (req, res) {
//得到code，獲取使用者資訊
wx.oauth.getUserInfo(req.query.code)
.then(function(userProfile) {
console.log(userProfile)
res.render("demo", {
wechatInfo: userProfile
});
});
});
複製程式碼TIP: 確保上面的重定向地址域名已經在微信裡的授權回撥地址設定裡設定過。
微信卡券
在wechatConfig設定 card: true 來支援卡券功能的服務端支援, 參考demo.
要檢視卡券 APIs, 參考 cards apis
微信支付
在wechatConfig設定 payment: true 來支援微信支付功能的服務端支援, 其他一些支付必須的配置也需要一同設定.
參考 demo.
要檢視支付 APIs, 參考 payment apis
使用Stores
Store用來自定義儲存token持久化(如檔案，資料庫等待)，實現自己的Store, 請檢視API
自帶 Store: FileStore, MongoStore，預設為FileStore, 儲存到wechat-info.json檔案.
APIs
檢視 API wiki
Demo
拉專案: git clone git@github.com:JasonBoy/wechat-jssdk.git
拷貝 demo/wechat-config-sample.js 到 demo/wechat-config.js,
然後在裡面裡面修改 appId, appSecret, 及其他的配置 如支付的其他配置如果需要使用支付功能的話.
然後 npm start 或 npm run dev, 使用微信開發者工具測試。
結論
好了，大致的使用方法如上，基本滿足JSSDK大多數的功能需求，有興趣的可以去Github試一下。