node.js开发微信公众支付
坑太多了！！！
坑太多了！！！
坑太多了！！！
首先jssdk有两个地方的签名，一个是初始wx.config，一个是wx.chooseWXPay的签名，所以这里我们的后端需要获取两处签名来传给前端。
1.首先开发支付模块的签名和支付流程，我引入了weixin-pay 模块，直接
npm install weixin-pay
weixin-pay使用的时候是没什么问题的，没有什么坑。后面还会有其他的包，请自行安装。
然后 require文件
let WXPay = require('weixin-pay')
接着设置配置文件
let wxpay = WXPay({
appid: '公众号appip',
mch_id: '123456123',
partner_key: '', //微信商户平台API密钥
pfx: fs.readFileSync('./congfig/apiclient_cert.p12'), //微信商户平台证书
})
这里是签名算法的一些参数
exports.wxpay = (req, res) => {
let openid = req.query.openid
let ip = req.ip.match(/\d+\.\d+\.\d+\.\d+/)[0] //这里用express获取了客户端的ip
wxpay.getBrandWCPayRequestParams({
openid: openid,
body: '支付测试',
detail: '支付测试',
out_trade_no: '20170101'+Math.random().toString().substr(2, 10),
total_fee: 1,
spbill_create_ip: ip,
notify_url: 'http://127.0.0.1/wechat/init'
}, (err, result) => {
res.json({
status: 1,
data: result
})
})
}
这里的openid暂时用了get的方式传过来，这里的openid获取是在用户进行登录授权时获取的，所以为了方便就存在了客户端的localStorage，然后这里使用时在传过来，后期配置需要改成post，并且还需要接受total_fee的值。返回的数据其实这里就是签名算法个传入前端微信支付的一些参数，后面会讲到。
2.获取jssdk默认配置的签名。
首先获取票据，
let request = require('request'),
fs = require('fs')
exports.ticket = (req, res) => {
let access_token = fs.readFileSync('./config/token').toString()
let url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+access_token+'&type=jsapi'
request(url, function(error, response, body) {
if (!error && response.statusCode == 200) {
let ticket = JSON.parse(body).ticket
fs.writeFile('./config/ticket', ticket, (err) => {
res.json({
status: 1,
msg: '获取成功！',
data: JSON.parse(body)
})
})
}
})
}
由于据有次数限制，所以我们可以在获取access_token的时候定时获取票据，利用 node-schedule 模块，代码就不贴出来了。
接着我们来获取jssdk默认配置的签名
exports.signa = (req, res) => {
let jsapi_ticket = fs.readFileSync('./config/ticket').toString()
let noncestr = (parseInt(Math.random() * new Date() - 0)).toString(32),
timestamp = Math.ceil((new Date() - 0)/1000),
url = 'http://frank.d1.natapp.cc/'
let signature = signjsapi(noncestr, jsapi_ticket, timestamp, url)
res.json({
status: 1,
data: {
'appId': 'wx782db8ee3e80c4aa',
'timestamp': timestamp,
'nonceStr': noncestr,
'signature': signature,
'jsapi_ticket': jsapi_ticket
}
})
}
//签名算法 - 验证
function signjsapi(noncestr, jsapi_ticket, timestamp, url) {
let ret = {
noncestr: noncestr,
jsapi_ticket: jsapi_ticket,
timestamp: timestamp,
url: url
}
let string = raw1(ret)
let crypto = require('crypto')
return crypto.createHash('sha1').update(string, 'utf8').digest('hex').toLowerCase()
}
//序列化
function raw1(args) {
let keys = Object.keys(args);
keys = keys.sort()
let newArgs = {}
keys.forEach(function(key) {
newArgs[key] = args[key]
})
let string = ''
for (var k in newArgs) {
string += '&' + k + '=' + newArgs[k];
}
string = string.substr(1)
return string
}
忽略一些我的语法混用 - _ -，注意其中的timestamp和nonceStr中S 大小写问题，这里微信文档很乱，但是weixin-pay已经处理过来，严格按照我的代码来，不会出错。
以上就完成了两处签名的服务端配置
3.以下是前端，前端我采用的是vue，用其他的框架根据代码自行修改，vue中记得要采用babel转换成es2015语法。
配置.babelrc文件
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}
主要是methods方法里面的东西
const wx = require('weixin-js-sdk')
const HOST = 'http://127.0.0.1'
const STATUS = 1
export default {
methods: {
pay: { // 假设这是支付的方法
this._getWxpayData()
},
_getWxpayData() {
this.$http.get(HOST + '/api/wxpay?openid=' + this.openid).then((res) => {
// 这里的openid我存在了localStorage里面，获取授权进入时就进行了一次存入，方便调用。
res = res.body
if (res.status === STATUS) {
this._wxpayConfig()
wx.ready(() => {
this._setWxpayInfo(res.data)
})
}
})
},
_wxpayConfig() {
this.$http.get(HOST + '/api/signa').then((res) => {
console.log(res.body)
let data = res.body.data
if (res.body.status === STATUS) {
wx.config({
// debug: true,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ['chooseWXPay']
})
}
})
},
_setWxpayInfo(data) {
wx.chooseWXPay({
appId: data.appId,
timestamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.paySign,
success(res) {
if (res.errMsg === 'chooseWXPay:ok') {
window.alert('支付成功')
window.location.reload()
} else {
window.alert(' 支付失败')
window.location.reload()
}
},
cancel() {
window.alert('支付取消')
window.location.reload()
},
error(res) {
window.alert('支付失败')
window.location.reload()
}
})
}
}
}
上面wx.chooseWXPay有一处的appId一定要加入，这里官方文档里是没有加的，但是weixin-pay里面返回了此值，所以没什么大问题。还是注意timestamp和nonceStr中的s大小写。
另外网上也有很多文档直接是使用wx.chooseWXPay，这种方式是不行的，必须先使用wx.config进行配置，然后在wx.ready中使用。
4.微信支付目录的配置
比如我这里的url是 http://example.com/#/pay/paydetail，那么微信里面的目录配置为
example.com/#/pay/
如果配置错误，这里会报一个 invalid url domain的错误。显示效果就是支付框闪了一下，然后就消失了，出现这种情况注意支付目录的配置。
5.关于回调的一些坑
这里的后端回调在node里面实现方式不难，没有什么坑，用到了express-xml-bodyparser来处理xml，其他的安装官方文档来就行了。
vue前端的回调有两处坑，
一、就是当我们发起了一次支付，然后取消活着再在vue应用里面发起第二次请求时，前端将会没有响应，我暂时也没有搞清楚如何优雅的解决，似乎问题是出在了url上，开始尝试了随机push进一些后缀，但是问题还是不能解决，最后用了很笨的方式 window.location.reload() 重新加载页面，这种方式暂时解决了不能两次调用支付接口的问题。如果后面你有更好的想法，也可以告诉我哟。
二、vue中，调用支付成功获失败后，this的作用域指向是有问题的，解决方法，我是在里面重新写了一块流程 。
按照此步骤来应该是没什么问题的，如果有什么疑问请联系我
yangjunalns@qq.com
最后说一句，微信的文档真的写的很乱，导致了各种坑。静下心来，一步一步解决，你一定可以的！
