微信JSSDK与NodeJS深度整合

对于做H5手机端的同学来说，微信是个必不可少的入口，自然而然我们需要调用微信提供给H5或者说JS的各种接口，我们也要根据微信的要求去做各种签名验证，才能最终到达我们的需求，GITHUB上面也有很多关于这方面的库可以用，但是他们总是或多或少的不能完全满足需求，或者说是又要付出很多额外的开发，因此呢，我自己也是开发了一个库wechat-jssdk去最大化的满足微信JSSDK有的功能，此库只关注jssdk所提供的功能，并提供服务端(NodeJS)各种验签支持，并且自动化管理各种token，ticket的过期处理，让开发者能更多的关注业务本身。好了，说完了WHY, 下面介绍HOW：先上个demo图：

主要功能集合

?服务端
?浏览器端
?OAuth网页授权
?微信卡券
?微信支付
?使用Stores
?完整 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: '', //商户IDpaymentSandBox: 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试一下。