微信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: '', //商户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试一下。