版權聲明:本文爲博主原創文章,未經博主容許不得轉載。javascript
在微信服務器成功返回code_url等信息以後,咱們須要進一步將code_url生成二維碼;固然後在前端用一些第三方的插件也能生成,單是相對來講,不如在後臺生成二維碼更加安全,微信的官方文檔也是推薦在後臺生成。
爲了方便,咱們仍是在wxpayRouter.js中實現該部分代碼前端
/** *須要的依賴請參考[node微信掃碼支付(一)](https://segmentfault.com/a/1190000011540768) **/ wxPayRouter.get("/create_qrcode",function(req, res ,next) { var qrcode_url = req.query.code_url; /** ** 在這裏建議加上用戶的身份信息驗證,而後再返回二維碼,避免多人同時發出請求,形成二維碼錯亂 **/ var qrcode = qr.image(code_url,{size:100}); res.type('png'); qrcode.pipe(res); })
以上是後端生成二維碼,這裏咱們採用qr-image這個包,固然還有其餘的包,可是須要配置phtyon等環境,至關麻煩,在這裏我將獲取code_url和create qrcode作成了兩個路由,固然若是嫌麻煩,能夠作成一個路由。
在前端的話須要在img中調用該接口java
/** ** 前端請求order接口以後得到的code_url以後; **/ <img src="/wxpay/create_qrcode?code_url=(請求order接口以後得到的code_url)">
到此爲止,用戶已經能夠掃碼完成支付,將錢充進商戶的帳戶中了。node
在統一下單中,notify_url 這個字段填寫的地址,就是咱們支付成功後微信回調的地址,小夥伴們注意啦,這裏有一個大坑,在收到支付成功的消息後,若是沒有給微信回覆相應的消息後,微信就會不停的輪詢,回調咱們的接口;咱們仍是在wxpayRouter.js完成這個接口express
wxPayRouter.post('/orderpay', function (req, res, next) { var body = req.body; var payInfo = body.xml; var attach = payInfo.attach; // 這裏是咱們的附加信息, console.log(payInfo); async.auto({ /** **在這裏建議從業務上也處理一下微信的這個輪詢回調;入庫的話,避免數據重複入庫等 ** **/ }, function (err, result) { /** **處理完數據以後,就能夠給微信發送消息了,告訴微信,支付成功的消息已經收到 **/ var resxml = { return_code: 'SUCCESS', return_msg: 'OK' } var body = jsontoxml(resxml); body = '<xml>' + body + '</xml>'; res.end(body); }); });
在這裏還會有一個坑,微信是數據流的形式返回信息,用express接收不到微信返回的消息,因此咱們須要在app.js中配置一下;json
var bodyParser = require("body-parser"); require("body-parser-xml")(bodyParser); app.use(bodyParser.xml({ limit: "2MB", xmlParseOptions: { normalize: true, normalizeTags: true, explicitArray: false }, verify: function(req, res, buf, encoding) { if(buf && buf.length) { req.rawBody = buf.toString(encoding || "utf8"); } } }));
到這裏,微信支付從獲取code_url,到生成二維碼,處理微信的支付成功結果,整個流程都已跑通,微信支付到此告一段落了。segmentfault