如何实现微信小程序的支付

大家都知道如今已经是无纸化的生活了，就连现金也是少见的物品，移动支付已经越来越普及，在路边买个水果都是二维码，以此可以看出移动支付的重要性。但是如此便捷的微信支付是怎样实现的呢？今天我就带大家来了解一下。

首先来看一下官方给出的业务流程时序图

 

这个图很清晰的表达了在小程序支付中的整个流程，每一步要做些什么。

一个完整的支付，一般情况下都是包含了下面三个主要的点；

• 支付(正常是支付平台提供的h5页面让用户操作，主要是输密码)
• 通知(用户完成一笔支付了，支付平台要通知商家支付结果，商家收到结果后进行一些相应的处理)
• 查询(与第二点有点反过来的意思，商家自己主动去支付平台查询支付的结果，然后根据结果做相应的处理)

下面就重点来简单实现一下上面说的第一点，支付，也是可以进行下面两步的在大前提。

小程序的实现

简单起见，在index.wxml中添加一个输入框和一个button，绑定一下相应的事件，输入框主要是用于输入订单号，按钮用于模拟提交一个订单并发起支付。

<!--index.wxml--><view class="container">

    <input type="text" bindinput="getOrderCode" style="border:1px solid #ccc;"  />

    <button bindtap="pay">立即支付</button></view>

然后在index.js中写上一小段代码，主要是处理上面按钮的点击事件。

Page({

    data: {

        txtOrderCode: ''

    },

    pay: function () {

        var ordercode = this.data.txtOrderCode;

        wx.login({

          success: function (res) {

            if (res.code) {

              wx.request({

                url: 'https://www.yourdomain.com/pay',

                data: {

                  code: res.code,//要去换取openid的登录凭证

                  ordercode: ordercode

                },

                method: 'GET',

                success: function (res) {

                  console.log(res.data)

                  wx.requestPayment({

                    timeStamp: res.data.timeStamp,

                    nonceStr: res.data.nonceStr,

                    package: res.data.package,

                    signType: 'MD5',

                    paySign: res.data.paySign,

                    success: function (res) {

                      // success

                      console.log(res);

                    },

                    fail: function (res) {

                      // fail

                      console.log(res);

                    },

                    complete: function (res) {

                      // complete

                      console.log(res);

                    }

                  })

                }

              })

            } else {

              console.log('获取用户登录态失败！' + res.errMsg)

            }

          }

        });

    },

    getOrderCode: function (event) {

        this.setData({

          txtOrderCode: event.detail.value

        });

    }

})

可以看到，在这里Catcher先通过wx.login这个API先取到了登录的凭证code，并把这个凭证code做为请求参数用wx.request这个API发起一个网络请求。在这个网络请求处理后会返回小程序支付所需要的相关参数。拿到这些参数后，再调用wx.requestPayment这个支付API，此时才算是真正的发起支付。

至此，小程序这边的事已经做完了，接下来就是要去处理接口那边的事了。

接口的实现

首先是获取到登录凭证后发起的这个网络请求。这个网络请求是决定了这次支付能否成功的第一步！

下面要做的是用登录凭证去换我们要的openid。

要换取openid，就要向微信提供的地址发起一个网络请求，并在URL带上appid,secret和凭证code这三个参数。

然后就可以拿到一个json形式的字符串

拿到之后自然就是要对这个字符串进行json的反序列化，这里用到了json.net这个包。

根据时序图，下面要调用统一下单这个接口了。

上面的代码，在统一下单这一块，又分为下面几个步骤

1. 处理统一下单的参数(签名和组装xml)
2. 发起POST请求
3. 解析请求得到的结果

这里要注意一点，由于我们的传的trade_type是JSAPI，所以这里必须是要加上openid进行处理的。

然后就是解析统一下单返回的XML了，说是解析，其实也就是要拿到我们需要的数据罢了。这里最后会得到一个小程序支付API需要的参数实体。

还有最后一步就是要返回一个序列化的对象给小程序，以供小程序使用。

到这里，后台接口也已经OK了，现在就用真机扫描二维码，点击立即支付按钮，此时就会弹出要你输入密码的框框，输入你的微信支付密码，然后就会提示支付成功。