微信支付的前后端联调挺多坑的，这里记录一下。
1、后台调用微信接口拿到 access_token
1
2
# 请求方式
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=xxxx&secret=xxxxx
1
2
# 请求结果
{"access_token":"7iBVY8GoBbGpo1wuUNmYIVPFw0ji72KECJouLQvlzlUviJ9q7C4RkLACcoha5PrS47NWi0XC7KLhbwlSXVe1bM8LXkW6bDhKCdnGBiXpmEb8lSh1vWliz1p-5mO17atpHRVdADxxxx","expires_in":7200}
2、使用 access_token 拿到 jsapi_ticket
1
2
# 请求方式
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=sKSaPbAHpU6eYCim3QuebHC8vwGJ3vHT_jplAy_BH9JsG4kcKfCbUhhLYNelaRBxj2it4pv03vR413m-bgF5uWeRomA8zi64oPyPh8Lu8E8amWTzvgILepTp_Rmne4i9NJNhAJxxxx&type=jsapi
1
2
# 请求结果
{"errcode":0,"errmsg":"ok","ticket":"kgt8ON7yVITDhtdwci0qefNCCqnO06iVfOFPQwhrYB-DAxuZneMKeO-VrHu2TkOaXRPVL6y57V7CgBnJp8xxxx","expires_in":7200}
3、使用 SHA-1 签名算法拿到 signature
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 算法规则
let jsapi_ticket =
"kgt8ON7yVITDhtdwci0qefNCCqnO06iVfOFPQwhrYB-DAxuZneMKeO-VrHu2TkOaXRPVL6y57V7CgBnJp8xxxx"; //（第二步获得）
let noncestr = "Wm3WZYTPz0wzxxxx"; // （自己定义）
let timestamp = parseInt(new Date().getTime() / 1000) + "";
let url = window.location.href; // （支付页面的 url）
let signatureRaw =
"jsapi_ticket=" +
jsapi_ticket +
"&noncestr=" +
noncestr +
"×tamp=" +
timestamp +
"&url=" +
url;
sha(signatureRaw);
// 结果：
// 44c31b945cf6867a01f9c7ab53c85ecfa012xxxx
4、后台返回如下资料给前端
1
2
3
4
appID（微信公众号ID）
timestamp（时间戳）
noncestr（自己定义的随机串）
signature(第三步生成的)
5、前端用第四步获得的东西初始化微信提供的 JSSDK，初始化成功后才能调用购买接口
6、调用微信支付接口时候需要向微信提供这些参数
1
2
3
4
5
timestamp:1414723227,
nonceStr:'noncestr',
package:'addition%3Daction_id%3Dgaby123%26limit_pay%3D%26bank_type%3DWX%26body%3Dinnertest%26fee_type%3D1%26input_charset%3DGBK%26notify_url%3Dhttp%3A%2F%2Fxxx.xxx.xxx.xxx%2Fmmsupport-bin%26out_trade_no%3D141472322781837%E2%80%A6bill_create_ip%3D127.0.0.1%26total_fee%3D1%26sign%3D432B647FE95C7BF73BCD177CEECBxxxx',
signType: 'SHA1', // 注意：新版支付接口使用 MD5 加密
paySign: 'bd5b1933cda6e9548862944836a9b52e8c9axxxx'
7、总结
联调中有一篇文章对我帮助很大：