如何实现微信小程序的支付
大家都知道如今已经是无纸化的生活了，就连现金也是少见的物品，移动支付已经越来越普及，在路边买个水果都是二维码，以此可以看出移动支付的重要性。但是如此便捷的微信支付是怎样实现的呢？今天我就带大家来了解一下。
首先来看一下官方给出的业务流程时序图
这个图很清晰的表达了在小程序支付中的整个流程，每一步要做些什么。
一个完整的支付，一般情况下都是包含了下面三个主要的点；
- 支付(正常是支付平台提供的h5页面让用户操作，主要是输密码)
- 通知(用户完成一笔支付了，支付平台要通知商家支付结果，商家收到结果后进行一些相应的处理)
- 查询(与第二点有点反过来的意思，商家自己主动去支付平台查询支付的结果，然后根据结果做相应的处理)
下面就重点来简单实现一下上面说的第一点，支付，也是可以进行下面两步的在大前提。
小程序的实现
简单起见，在index.wxml中添加一个输入框和一个button，绑定一下相应的事件，输入框主要是用于输入订单号，按钮用于模拟提交一个订单并发起支付。
<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这个包。
根据时序图，下面要调用统一下单这个接口了。
上面的代码，在统一下单这一块，又分为下面几个步骤
- 处理统一下单的参数(签名和组装xml)
- 发起POST请求
- 解析请求得到的结果
这里要注意一点，由于我们的传的trade_type是JSAPI，所以这里必须是要加上openid进行处理的。
然后就是解析统一下单返回的XML了，说是解析，其实也就是要拿到我们需要的数据罢了。这里最后会得到一个小程序支付API需要的参数实体。
还有最后一步就是要返回一个序列化的对象给小程序，以供小程序使用。
到这里，后台接口也已经OK了，现在就用真机扫描二维码，点击立即支付按钮，此时就会弹出要你输入密码的框框，输入你的微信支付密码，然后就会提示支付成功。