微信小程序支付功能讲解

前言：虽然小程序做过很多，但是一直觉得微信支付功能很是神秘，现在终于有机会接触心里还是有点小激动的，经过一番折腾发现支付也不过如此，在此记录下支付功能的实现过程

小程序的官方文档介绍到发起微信支付即调用API wx.requestPayment(Object object)

wx.requestPayment({

  timeStamp: '',

  nonceStr: '',

  package: '',

  signType: 'MD5',

  paySign: '',

  success(res) { },

  fail(res) { }

})

看到这是不是一脸懵逼，这些参数从何而来？

那么先来看一下官方给出的业务流程时序图，小程序支付交互如下图：

根据实现过程，我将它划分成如下六个模块进行讲解，

1、下单：

这里是用户与页面交互，例如点击付款按钮，触发支付交互

2、向后端发出支付请求

通过接口请求给后端系统提供参数：商品ID，总价totalPrice

3、后端系统与微信服务进行交互,换取参数

后端系统得到微信返回的相关数据后，经过解密处理返回前端需要的相关参数，即wx.requestPayment()需要的相关参数

4、发起微信支付

5、微信服务返回支付的结果

根据微信返回的结果（成功或失败），前端做出对应的提示

6、微信服务把支付结果通知给后端系统

这里就是后端的事情了，和前端不相干

最后附上代码思路如下

　　/**

     *

     * @param {string|number} id 订单ID

     * @param {string|number} totalPrice 订单总价

     */

    pay(id,totalPrice){

        wx.request({

            url: 'https://xxxxxxxxx',

            data: {

              orderId: id,

              orderPrice:totalPrice

            },

            success:res => {

                wx.requestPayment({

                    timeStamp: res.data.timeStamp,

                    nonceStr: res.data.paySign,

                    package: res.data.paySign,

                    signType: 'MD5',

                    paySign: res.data.paySign,

                    success(res) {

                        console.log('支付成功')

                    },

                    fail(res) {

                        console.log('支付失败')

                    }

                })

            },

            fail:err => {

                console.log('接口请求出错')

            }

        })

    }

巴特西

微信小程序支付功能讲解

最新文章

热门文章