推荐下载
-
2020-05-12 浏览：738
-
2020-05-06 浏览：519
-
2020-05-08 浏览：506
-
2020-04-04 浏览：502
-
2020-05-12 浏览：496
微信小程序支付简单小结与梳理
发布时间:2020-12-17前言
公司最近在做微信小程序，被分配到做支付这一块，现在对这一块做一个简单的总结和梳理。
支付，对于购物来说，可以说是占据了十分重要的一块，毕竟能收到钱才是重点。
当然在开发之前，我们需要有下面这些东西：
appId
密钥(小程序配置界面)
商户号
api密钥(商家后台自己设置)
当然这些是不用我们自己申请的，公司会有人申请好，然后要什么跟这个人说，让他提供就可以了。
首先来看一下官方给出的业务流程时序图
这个图很清晰的表达了在小程序支付中的整个流程，每一步要做些什么。
一个完整的支付，一般情况下都是包含了下面三个主要的点；
支付(正常是支付平台提供的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，此时才算是真正的发起支付。
至此，小程序这边的事已经做完了，接下来就是要去处理接口那边的事了，其实接口要做的就是返回小程序需要的几个参数。但是要拿到这几个参数还是需要做不少事情的。
接口的实现
据悉最新版的Senparc.Weixin.MP已经支付了小程序相关的内容，但是公司用的版本还是比较低
并且近期也没有打算对这个组件进行升级。所以就从白纸一张开始了。
