微信小程序登录–支付流程
步骤总览
一、前端发起wx…getUserIdfo()请求获取用户信息,并通过api wx.login()获取用户用户登录凭证code
-
通过调用api ==wx…getUserIdfo()==或者 uni.getUserIdfo()可以调用获取到用户的一些信息,后端所需要的参数通常为以下5个,这五个参数都是需要前端调用微信的接口获取
//1.调用uni.getUserInfo()获取用户信息 const [error1, res] = await uni.getUserInfo() //接口结果中所需要的参数 const [encryptedData, rawData, iv, signature] = res console.log('error1', error1, res);
参数名 | 必选 | 类型 | 参数说明 |
---|---|---|---|
encryptedData | 是 | string | 执行小程序 获取用户信息后 得到 |
rawData | 是 | string | 执行小程序 获取用户信息后 得到 |
iv | 是 | string | 执行小程序 获取用户信息后 得到 |
signature | 是 | string | 执行小程序 获取用户信息后 得到 |
code | 是 | string | 执行小程序登录后获取 |
-
通过api wx.login()获取用户登录凭证code
//1.1.调用uni.login()获取用户登录凭证,以上两部就可以获取到后端需要的请求获取code的信息 const [error2, res2] = await uni.login() //接口结果中所需要的参数 const [code] = res2 console.log('error1', error2, res2);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUMMgi6d-1658755532609)(D:\desktop\马\微信小程序\image\登录\image-20220725195451572.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XGB16yPx-1658755532609)(D:\desktop\马\微信小程序\image\登录\登录2)]
二、获取到用户信息后,调用wx.login(),把用户信息发给后台进行登录并获取token,并把token保存起来
//2.根据前两步获取到的信息向后端发起请求
const userInfoData = {
encryptedData: userInfo.encryptedData,
rawData: userInfo.rawData,
iv: userInfo.iv,
signature: userInfo.signature,
code: this.code
};
//发起请求后端获取token
const [error3, res3] = uni.request({
method: 'post',
url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
data: userInfoData
})
//解构token
const [token] = res3
三、把订单信息发给后端,让后端发起预支付并生成订单号返回给前端,前端根据订单编号生成支付信息
// 3. 获取自己后台返回的支付相关参数 - 🚨流程较多,按后端接口要求来操作
// 3.1 创建订单,获取订单编号
const ordersCreateRes = await ordersCreate({
order_price: this.selectCartListPrice,
consignee_addr: this.addressDetail,
goods: this.selectCartList.map(item => {
return {
goods_id: item.goods_id,
goods_price: item.goods_price,
goods_number: item.goods_count,
}
}),
})
// console.log('ordersCreateRes', ordersCreateRes)
//获取到订单号
const { order_number } = ordersCreateRes.data.message
// 3.2 根据订单编号生成支付信息
const payInfoRes = await ordersPayInfo(order_number)
// console.log('payInfoRes', payInfoRes)
const { pay } = payInfoRes.data.message
console.log('pay', pay)
四、根据生成的订单信息,前端发起微信支付
// 4. 调用微信接口实现 支付
const { errMsg } = await wx.requestPayment(pay)
console.log('errMsg', errMsg)
五、剩下的就是向后端发起询问,订单是否完成支付,如果完成就更新订单状态,提醒用户,后续可以跳转到订单页面等
async handlerPay() {
// 0. 用户收货地址
if (!this.address.userName) {
uni.showToast({ title: '请选择收货地址~', icon: 'none' })
return
}
// 把登录流程封装成 action,再通过 dispatch 调用即可
await this.$store.dispatch('userWxLogin')
// 🚨🚨支付流程的步骤较多,工作的时候按流程图和后端接口逐个调用即可。
// 🚨🚨流程较多的情况,求稳放到第一位,调一个接口就要打印检查,因为后面流程依赖前面流程的参数
try {
// 2. 获取自己后台返回的支付相关参数 - 🚨流程较多,按后端接口要求来操作
// 2.1 创建订单,获取订单编号
const ordersCreateRes = await ordersCreate({
order_price: this.selectCartListPrice,
consignee_addr: this.addressDetail,
goods: this.selectCartList.map(item => {
return {
goods_id: item.goods_id,
goods_price: item.goods_price,
goods_number: item.goods_count,
}
}),
})
// console.log('ordersCreateRes', ordersCreateRes)
const { order_number } = ordersCreateRes.data.message
console.log('order_number', order_number)
// 2.2 根据订单编号生成支付信息
const payInfoRes = await ordersPayInfo(order_number)
// console.log('payInfoRes', payInfoRes)
const { pay } = payInfoRes.data.message
console.log('pay', pay)
// 3. 调用微信接口实现 支付
const { errMsg } = await wx.requestPayment(pay)
console.log('errMsg', errMsg)
// 4. 更新订单支付状态
const ordersCheckRes = await ordersCheck(order_number)
console.log('ordersCheckRes', ordersCheckRes)
// 5. 跳转到订单页面
uni.showToast({ title: '支付成功', icon: 'success' })
} catch (error) {
console.log('发送给后端错误', error)
uni.showToast({ title: '支付失败', icon: 'error' })
}
},
}
howToast({ title: ‘支付成功’, icon: ‘success’ })
} catch (error) {
console.log(‘发送给后端错误’, error)
uni.showToast({ title: ‘支付失败’, icon: ‘error’ })
}
},
}