uniapp 微信小程序 微信支付
本章的内容我尽量描述的细致一些，哪里看不懂给我评论就可以，我看到进行回复
微信支付大致分为4步，具体看后端设计
1. 获取code
2. 根据code获取openid
3. 根据openid，以及部分订单相关数据，生成prepayId (预支付交易会话ID)
4. 通过prepayId调用支付api，并让后端在支付api中返回支付相关配置参数，然后前端将支付配置参数设置到微信支付api上，进行支付拉起
（第3步和第4步 后端可以合成1步，生成prepayId的同时，并执行支付然后将支付配置返回给前端）
本章主要核心介绍就是： 通过第1步，第2步的结合取出openid，以及第4步中的使用uni.requestPayment(OBJECT) 方法，拉起微信支付api的使用以及参数配置，其他可具体结合自己的项目。
1. 获取code
首先要清楚，code是啥？怎么取？取到它用来干啥？
说明：调用接口获取临时登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台账号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台账号）及本次登录的会话密钥（session_key）等。
通过这个说明可以知道：code是临时登录凭证（有效期五分钟），我们可以通过这个code在第二步拿到openid，unionid，session_key 这三个参数
怎么取到code：这里需要使用uniapp官方提供的api uni.login(OBJECT)
uni.login({
provider: 'weixin', // 使用微信登录
success: (res) => {
const { code } = res;
console.log('code =>', code)
// code => 0e1MTrFa1eDx9I0bRpJa1Mqfwf4MTrFJ
}
});
2. 根据code获取openid
openid是啥？怎么取？取到它用来干啥？
说明：openid是微信用户在公众帐号（包括小程序）、H5、APP下的唯一标识。每个应用都有一个appid，不同的appid，对应的openid不同。
用来干啥：因为涉及到支付，那么业务中肯定的需要知道是谁支付了，这个谁就通过openid界定
怎么取：调用微信api【GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code】
const toggleExecutePay = (param) => {
return new Promise((resolve) => {
uni.showLoading({
title: '加载中',
mask: true
});
uni.login({
provider: 'weixin', // 使用微信登录
success: (loginRes) => {
// 取得 code
const { code } = loginRes;
// 该api的功能：校验临时登录凭证。通过临时登录凭证完成登录流程，并且返回 openid, unionid, session_key。
// 需要注意：某些场景下 在前端代码里直接调用这个api的话，会报错request:fail url not in domain list （url不在域列表中），
// 在微信公众平台里面也没办法将这个域名配置到合法域名内
// 所以就不能在前端代码里直接调用这个api，让后端新增一个接口，在新增的接口里面调用这个api，然后将openid进行返回
// uni.request({
// // 微信官网api 携带参数(小程序appId、小程序appSecret、通过wx.login获取的code、授权类型：此处只需填写 authorization_code)
// url: `https://api.weixin.qq.com/sns/jscode2session?appid=xxx&secret=xxx&js_code=${code}&grant_type=authorization_code`,
// method: 'GET',
// success: function (jscodeRes) {
// const { openid, unionid, session_key } = jscodeRes.data;
// }
// });
// 调用后端接口 获取openid (只传code就行了，其他三个参数让后端在后台自己写)
getUserOpenId({ code: code }).then(async (res) => {
const { success, data, message } = res;
if (success) {
// 执行第3步 创建订单 获取prepayid(统一下单订单号)
const prepayId = await toggleCreateOrder(data.openid, param).then(
(res) => res
);
// 执行第4步 获取支付配置 并拉起支付
await toggleGetPayConfig(prepayId);
resolve(true);
} else {
// 加载弹窗隐藏
uni.hideLoading();
// 弹起错误信息
uni.showToast({
icon: 'none',
title: `${message}`,
mask: true,
position: 'top'
});
resolve(false);
}
});
}
});
});
};
3. 根据openid，以及部分订单相关数据，生成prepayId (预支付交易会话ID)
这一步对于后端来说，只是单纯的通过openid，以及订单相关参数，像微信要了一个prepayId，然后创建了一个订单，并且给前端返回prepayId
// 创建订单 获取 prepayid(统一下单订单号)
const toggleCreateOrder = (openid, param) => {
return new Promise((resolve) => {
const payParam = {
openId: openid,
amount: param.amount
// ... 如果生成订单后端还需要其他参数(如商品名称，商品id等等)，在这里追加就行
};
createOrder(payParam).then(async (res) => {
const { success, data } = res;
if (success) {
resolve(data.prepayId);
} else {
// 加载弹窗隐藏
uni.hideLoading();
resolve(false);
}
});
});
};4. 通过prepayId 调用支付api，并让后端在支付api中返回支付相关配置参数，然后前端将支付配置参数设置到微信支付api上，进行支付拉起
这一步对于后端来说，通过prepayId将刚刚生成的订单设置成待支付，并且将支付参数返回给前端，前端拉起微信支付，支付成功后，后端应该会监听回调，监听到微信支付成功了，就把订单设置成支付成功
前端调用拉起微信支付api：uni.requestPayment(OBJECT)
// 获取支付配置
const toggleGetPayConfig = (prepayId) => {
return new Promise((resolve) => {
getPayConfig({
prepayId: prepayId
}).then((res) => {
// 这些参数都让后端返回，前端就不维护像appid这些固定值了
const { appid, nonceStr, signature, timestamp, signType, partnerid } =
res;
// 加载弹窗隐藏
uni.hideLoading();
uni.requestPayment({
provider: 'wxpay', // 固定传wxpay
appid: appid, // 微信开放平台 - 应用 - AppId
timeStamp: `${timestamp}`, // 时间戳（单位：秒）
package: 'prepay_id=' + prepayId, // 'prepay_id=' + prepayId
paySign: signature, // 签名
signType: signType, // 签名算法，这里用的 MD5/RSA 签名
nonceStr: nonceStr, // 随机字符串
partnerid: partnerid, // 微信支付商户号
success(res) {
resolve(true);
},
fail(err) {
console.log('支付异常 =>', err);
}
});
});
});
};