NATIVE支付
一开始按照文档来做NATIVE支付，没有遇到问题。调用统一下单API，很顺利的得到用于支付的url，前端拿到url通过QR转成二维码，用户扫码即可支付。
1、 整个对象
const unifiedOrderBody = {
appid:'公众账号ID',
mch_id: '商户号',
nonce_str: '随机字符串',
sign_type:'签名类型',
body: `商品描述`,
out_trade_no: `商户订单号（长度不能超过32，笔者建议生成的订单号不要超过25，可以在订单号后加_NATIVE\_JSAPI等标识来避免出现重复订单的问题）`,
total_fee: 订单金额（分）,
spbill_create_ip: '终端IP',
notify_url: '通知地址，完成支付后微信将调用这个接口',
trade_type: 'NATIVE',
};
2、按规矩生成签名
const raw = (args) => {
let keys = Object.keys(args);
keys = keys.sort();
const newArgs = {};
keys.forEach(function(key) {
newArgs[key] = args[key];
});
let string = '';
for (const k in newArgs) {
string += '&' + k + '=' + newArgs[k];
}
string = string.substr(1);
return string;
};
let stringA = raw(unifiedOrderBody)
stringA = stringA + '&key=' + '你的密钥'
const sign = crypto.createHash('签名类型').update(combineStr).digest('hex')
3、按规矩将unifiedOrderBody以及刚生成的sign弄成xml的格式，调用微信的统一下单接口。
const obj2xml = (obj) => {
return new Promise(function(resolve, reject) {
const builder = new xml2js.Builder({
cdata: true,
rootName: 'xml',
});
try {
const xmlStr = builder.buildObject(obj);
resolve(xmlStr);
} catch (err) {
reject(err);
}
});
}
// 发请求就不写啦，得到的数据也是xml的，需要转化一下才好用。
const xml2obj = (xmlStr) {
return new Promise(function(resolve, reject) {
const parseString = xml2js.parseString;
parseString(xmlStr, function(err, result) {
if (err) {
reject(err);
} else {
const data = result['xml'];
const newData = {};
Object.keys(data).forEach(function(key, idx) {
if (data[key].length > 0)
newData[key] = data[key][0];
});
resolve(newData);
}
});
});
}
4、最后拿到code_url返回给前端就行了。
JSAPI支付
openid
由于是在微信浏览器内做支付，统一下单接口需要用户的openid，获取openid之前，需要前端访问
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
由于这里只做简单的获取openid所以scopen=snsapi_base。
当成功拿到拿到code后，会自动跳转到redirect_uri，并在连接后拼上code=你的code，之后前端再拿着这个code，访问自家后端获取openid的接口。
后端的做法则是访问微信提供的接口，由于涉及到appsecret，所以这一步放在后端执行：
`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${APPID}&secret=${APP_SECRET}&code=${code}&grant_type=authorization_code`
之后将这个返回给前端，就可以得到openid了。
支付
拿到openid之后就可以开始做微信支付了，带上order和openid调用后端提供的下单接口：
1、和NATIVE支付几乎一摸一样，整个对象
const JSAPIUnifiedOrderBody = {
...unifiedOrderBody,
trade_type: 'JSAPI',
openid: openid,
2、按规矩生成签名 (同NATIVE)
3、按规矩将unifiedOrderBody以及刚生成的sign弄成xml的格式，调用微信的统一下单接口。(同NATIVE)
4、调用微信的统一下单接口之后，根据文档需要重新生成sign。
const wxResponse = await 调用微信统一下单()
const timestamp = parseInt(String(new Date().getTime() / 1000)) + '';
const signBody = {
appId: '你的APPID', // 一定
timeStamp: timestamp, // 要注意
nonceStr: Math.random().toString(36).substr(2, 15), // key的
package: `prepay_id=${wxResponse.prepay_id}`, // 大小写！！！
signType: 'MD5', // 用你自己的定的加密方式
};
let combineStr =raw(signBody);
combineStr = combineStr + '&key=' + '你的key';
const sign = crypto.createHash('md5').update(combineStr).digest('hex');
signBody.sign = sign.toUpperCase();
return {...signBody}
这里最要主的是signBody里每个key的大小写，你可能有用一些别人提供的SDK或者之前自己写的raw函数，这些方法在执行的时候可能执行了key.toLowerCase()将所有的key的大小写给忽略的，但是这个JSAPI的签名是对大小写敏感的，和微信的别的接口有区别。
所以最好是在拼写combineStr的时候将值打印出来，看是不是大小写正确
5、前端拿到signBody里的数据后
window.WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": APPID,
"timeStamp": signBody.timeStamp,
"nonceStr": signBody.nonceStr,
"package": signBody.package,
"signType": signBody.signType,
"paySign": signBody.sign,
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
} else {
}
});
完事。
如有错误，还请指出，欢迎批评。
