uni-app（小程序）使用微信支付详细流程

uni-app（小程序）使用微信支付详细流程

发现网上教程很多，单只针对小程序的简单清晰的流程却很少，我这里来做一下总结。

一.准备工作

• 在微信公众平台中微信公众平台 (qq.com)-开发管理-开发设置中获取我们所需的 AppID和AppSecret

  二.开发流程

  • 然后通过下面的代码获取到code

    uni.login({provider: 'weixin',success: function(loginRes) {console.log('-------获取code-------')console.log(loginRes.code);                        }                    });

  • 然后将code传递给后端，后端开发人员返回openid

  • 然后将openid和你当前项目的订单号或者金额数传递给后端，后端会返回5个参数

    timeStamp: res.data.Data.Timestamp,nonceStr: res.data.Data.NonceStr,package: res.data.Data.PrepayIdPackage,signType: "RSA",paySign: res.data.Data.paySign,

  • 然后通过微信requestPayment方法发送请求

    wx.requestPayment({timeStamp: res.data.Data.Timestamp,nonceStr: res.data.Data.NonceStr,package: res.data.Data.PrepayIdPackage,signType: "RSA",paySign: res.data.Data.Signature,success: function(res) {// 支付成功处理逻辑},fail: function(res) {// 支付失败处理逻辑}})

  • 这是关于小程序端开发全部所需要做的事情，剩下的交给后端开发人员解决就行了。（虽然我也负责了后端开发

    ）

    三.下面是完整的代码

    uni.login({provider: 'weixin',success: function(loginRes) {console.log('-------获取code-------')console.log(loginRes.code);uni.request(url: 'XXXXXXXXXXXXXXXXXXXXXX?code=' +loginRes.code,data: {},method: 'GET',header: {'Content-type': 'application/x-www-form-urlencoded',},success: (info) => {console.log('----获取sessionKey、openid(unionid)----')console.log(info.data.Data);console.log(that.order.Id)// 携带openid（可能要携带金额，传递给后端）wx.request({url: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',data: {CsOrderId: that.order.Id,OpenId: info.data.Data},method: 'POST',header: {'contentType': 'application/json',},success: (res) => {console.log(res)// 请求成功后，有服务端传过来的5个必要的参数，微信支付API调用，获取支付凭证wx.requestPayment({timeStamp: res.data.Data.Timestamp,nonceStr: res.data.Data.NonceStr,package: res.data.Data.PrepayIdPackage,signType: "RSA",paySign: res.data.Data.Signature,success: function(res) {// 支付成功处理逻辑},fail: function(res) {// 支付失败处理逻辑}})},fail: (res) => {console.log(res)}});},fail: (res) => {console.log(res.data)}});}});},fail: (res) => {console.log(res.data)}});}});