上一篇文章中总结了支付宝支付前后端实现，本篇将对其竞争对手——支付进行详细讲解。其中涉及代码来源于目前正在开发的项目，这个项目涉及PC端、H5移动端及APP三类用户界面，APP基于Flutter开发，前后端目前都由我一人完成，后续将对这个项目中涉及到的技术进行一步步的总结，感兴趣的小伙伴可以关注一下。
对于线上应用来说，微信支付方式无外乎以下五种：
APP：适用于第三方APP调用微信支付；PC网站：适用于PC网站发起的微信支付，又称Native支付，展示一个二维码页面，供用户通过微信客户端扫描后支付。微信内浏览器：即通过微信浏览器打开的页面，通过JSAPI进行支付，可以直接打开微信支付进行直接。这种方式适应于通过微信公众号打开的页面，或者是通过微信分享的链接点击后直接在微信内浏览器打开的场景。小程序：小程序内的支付。移动端非微信浏览器：通过H5支付方式，可直接跳转微信进行支付。
本文主要讲述PC网站、微信内浏览器及移动端非微信浏览器上的支付实现。
微信体系目前比较混乱，据我目前了解的，除QQ之外，微信自己都有三个不同的管理平台：、微信开放平台和微信支付商户平台， 但这三个平台更多的是业务上的区分。我们需要先登录公众平台，申请微信支付，同时配置业务域名、JS接口安全域名等，如图所示：
公众号设置
然后登录微信支付商户平台，将商户与微信公众号做关联。
如果要使用移动APP进行支付，需要登录微信开放平台创建应用：
在此可以创建APP、网站应用、小程序等，同时可以绑定公众平台中的公众号应用。
开放平台配置
我这个项目当前使用的都是公众平台应用来进行支付的，不需要登录开放平台进行配置；目前正在开发APP，因此也开始在开放平台上申请了一个移动应用，等待腾讯审核。
配置完后就可以通过公众平台获取到应用id及secret，并在商户平台中获取商户号，在后续的开发中会使用到。
一个简单的微信支付流程如下所示（按我的项目来的，实际每个项目的下单流程肯定会不一样，但关于微信支付的部分基本是一致的）：
微信支付流程用户购买商品；后端生成订单号订单信息确认，用户下单后端生成订单，同时调用微信接口生成微信端订单，并返回订单信息给前端前端根据微信订单信息跳转微信支付页面（或者加载二维码）用户支付完成微信端跳转到支付前页面（如未指定重定向页面），同时会推送支付结果给后端应用
商品选择
商品选择生成订单号并确认
订单确认支付界面（PC）
PC扫码支付支付界面（微信内）
微信内支付
考虑代码量太大影响展示，因此下面会将无关代码隐藏，如果有问题可以私信。
注意isWx是全局的判断是否是微信浏览器的方法，实现如下：
用户在确认订单后点击“发起订单并支付”，将调用后台/pay/refill接口生成订单。
开发之前需要先下载微信提供的SDK(然后在MAVEN中进行配置：
然后定义WXPayConfigImpl类如下：
注意需要将APPID及商户号、Key配置成从公众平台、商户平台中获取的值。
完成后就可以继续编码了。
/pay/refill接口实现如下：
wxPayService.getPayUrl即用于调用微信接口生成微信端订单，实现如下：
可以看到上面主要是组装参数然后调用wxPay.unifiedOrder接口生成支付表单；
涉及的参数如下：
body商品简单描述nonce_str随机字符串，长度要求在32位以内out_trade_no商户系统内部订单号，要求32个字符内，且在同一个商户号下唯一 接收支付结果通知时会包括这个参数，因此可以将通知结果与之前的订单关联上； total_fee订单总金额，单位为分spbill_create_ip支持IPV4和IPV6两种格式的IP地址。用户的客户端IPnotify_url异步接收微信支付结果通知的回调地址，通知url必须为外网可访问的url，不能携带参数。 需要在微信公众平台中配置相关域名，否则会报异常trade_type交易类型，JSAPI/NATIVE/APP/MWEB等 JSAPI用于微信内浏览器打开的界面支付 Native用于PC端支付 APP用于单独的APP应用中进行的支付 MWEB用于H5在非微信浏览器中打开的支付openidtrade_type=JSAPI时（即JSAPI支付），此参数必传，此参数为微信用户在商户对应appid下的唯一标识。 注意只有在微信浏览器支付中才传输该值，其它的不要传，否则会报异常 product_idtrade_type=NATIVE时，此参数必传。此参数为二维码中包含的商品ID，商户自行定义。
其它参数请参考：
生成支付表单后，注意如果是JSAPI（也就是微信内浏览器打开的场景）需要进行签名，代码参考上面。
生成的支付表单示例如下(PC)：
在5.1中调用/pay/refill接口并返回后，会带上返回的支付表单信息跳转到新的界面：
跳转后的wx-pay界面实现如下：
对于微信内支付，可以通过其浏览器的WeixinJSBridge对象调起微信支付界面。
非微信浏览器，将表单中codeURL（二维码）加载到页面中即可。 （目前我的项目代码在移动端非微信浏览器中展示的仍旧是二维码，暂未做改造，所以上面非微信浏览器的与PC端处理基本一样，后续会对这部分进行改造）
到此就等用户支付完成即可。
当用户支付完成后，会跳转到支付前的页面，这个时候可以在这个页面中做一些操作，来查询订单状态并展示给用户。
在5.2生成订单的参数中，我们指定了notify_url，那么在支付成功后微信也会同时往这个所配的地址推送支付结果，代码实现如下：
接收到消息后更新订单状态，并进行其它一些如账户余额修改等处理。
