小程序支付流程图说明（UNIAPP+第三方SDK：binarywang）

说明：小程序为UNI-APP开发，使用的第三方微信支付SDK为binarywang提供的，此SDK对微信公众号、小程序、微信各种类型的支付、企业微信的相关对接接口都有很好的全面集成，是应用得比较多的一款优秀的SDK。

如图为各个服务相互调用的过程，后续有步骤说明
【图1：小程序支付流程图】

流程图步骤说明

1、用户在小程序中触发了支付申请（如：点击了付款按钮，唤起微信支付页面，非扫码支付）

2、UNIAPP发起支付申请

用户在小程序(UNIAPP开发)上主动发起了一个向商家支付的申请后，调用UNIAPP的uni.log(obj)方法（无论是否是点击后调用还是点击前调用，均可以根据实际情况来决定，此处只是为了方便流程的讲解），其中参数类型与返回值说明如下图：
参考：https://uniapp.dcloud.io/api/plugins/login
【图2：UNIAPP的uni.log(obj)方法】

在返回值中，我们得到了临时登录凭证code（只能使用一次），我们便可以根据code来获取用户的openId，由此我们可以获取得到了用户的小程序的openId。
参考：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html

3、调用自己的服务创建预支付单

如流程图中的步骤三创建预支付单的接口：gql.createWxPayOrdercode(code, orderId: 1000, trandeType: "JSAPI")，其中code为获取用户小程序的openId的临时凭证，即上一步所获得的code，orderId为自己业务的参数，trandeType为固定值JSAPI（JSAPI支付或小程序支付）。当然此值也可以在后台固定，此处只是为了提示此支付类型。
【图3：微信支付交易类型】

参考：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_2

4、调用自己的服务创建预支付单

在我们自己定义的接口的做相应的业务校验处理，准备好参数后，调用SDK中创建预支付单的接口wxPayService.createOrder

5、SDK调用微信小程序生单接口

在SDK中会调用微信小程序的生意接口，也就是原生的微信支付接口，在生单接口中有一个参数notify_url，此参数是微信服务器将用户的支付结果回传给我们时调用的url，即此url是我们自己服务对外暴露的url。
参考：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1

6、微信小程序将返回创建支付单的结果返回给SDK

【图4：返回创建支付单的部分结果】

7、SDK将微信小程序返回的结果进行封装加密成唤起微信支付页面所需要的参数

在原生的微信小程序生单接口中，返回参数需要再次的根据相应的规则进行加密后，才能调用API唤起微信支付页面
【图5：唤起微信支付需要的参数】

但是在SDK中，SDK将此加密转换的过程已经帮我们做了，它返回的是已经处理好了的参数，所以我们在前面直接使用这些返回的结果就OK了。
参考：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5

8、9、创建预支付单的接口返回给小程序，唤起微信支付

在我们的小程序中接收到创建预支付单的接口返回值后，便可调用UNIAPP中的uni.requestPayment(OBJECT)方法来响起微信支付，我这边是这样调用的：result为后台返回的结果
【图6：小程序调用微信支付页面】

参考：https://uniapp.dcloud.io/api/plugins/payment

10、用户支付完成，调用自己服务接口

用户支付完成后，可以根据实际情况更新自己的业务信息

11、用户支付完成，微信服务器的结果回传

当用户支付完成后，微信服务器会调用生单接口中参数notify_url的值进行结果的回传。此notify_url为我们系统对外暴露的url。我们在此url对应的接口中做相对应的支付结果业务处理。
参考：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7&index=8

为了更好的理解，SDK提供了一个微信支付的DEMO，大家可去clone下来更方便的理解。