/9/3/23:23
文章目录
一、微信支付流程分析1.创建订单接口1.1、创建订单业务逻辑分析1.2、创建订单业务逻辑核心代码2.待支付页面数据回显接口2.1、待支付页面数据逻辑分析2.2、回显数据代码实现3、生成微信支付二维码接口3.1、微信支付二维码逻辑分析3.2、微信支付二维码核心逻辑代码实现4.定时查询支付状态4.1、后端逻辑分析4.2、核心逻辑代码4.3、前端逻辑分析4.4、前端js核心代码实现一、微信支付流程分析
下图来源于微信支付官方文档
根据官方的这张时序图可以分析出微信支付流程
1.创建订单接口
这个具体怎么做呢？以下图天猫手机为例
当用户点击立即购买时会进入一个待支付页面，这个点击立即购买就会调用创建订单这个接口；所以数据库中必须要有一张订单表，该表中包含了一些用户信息和商品信息，当然最核心的是要包含订单号(order_no）字段和是否支付(is_pay）字段
1.1、创建订单业务逻辑分析
首先订单表(order_no)最少的情况也要包含一些用户信息字段和商品信息字段，所以这就涉及另外两张表用户表(t_user)和商品(t_goods)表；(我以微服务为例进行阐述)，远程调用商品模块和用户模块，将需要的字段封装到订单实体类中，进而保存数据库即可；其中有个需要注意的点，那就是订单号怎么生成呢？其实我们可以利用日期来编写一个工具类生成即可，这样也就不会造成重复的情况(时间一直向前嘛)。
1.2、创建订单业务逻辑核心代码
代码中的工具类和商品模块已经用户模块的代码等等已经省略，因为比如JwtUtils工具类以及OpenFeign远程调用、还有商品和用户的CRUD应该是很简单的，最重要的是思路。
@Overridepublic String createOrder(String goodsId, HttpServletRequest request) {//1.远程调用用户服务，获取用户信息String userId = JwtUtils.getUserIdByToken(request);UserInfoVO userInfo = userClient.getUserInfo(userId);//2.根据courseId查询出课程相关信息GoodsInfo goodsInfo = goodsClient.getGoodsInfo(goodsId);//3.创建订单Order order = new Order();order.setOrderNo(OrderNoUtil.getOrderNo()).setGoodsId(goodsId).setGoodsName(goodsInfo.getName()).setGoodsCover(goodsInfo.getCover()).setUserId(userId).setNickname(userInfo.getNickname()).setMobile(userInfo.getMobile()).setTotalFee(courseInfo.getPrice()).setPayType(1).setStatus(0);baseMapper.insert(order);return order.getOrderNo();
2.待支付页面数据回显接口
2.1、待支付页面数据逻辑分析
以上方天猫商品为例，这个待支付页面包含了用户信息和商品信息，所以如果要做到这样的待支付页面，就需要根据订单号去数据库查询相关的订单信息，订单号？看下方示例代码
<section class="vn-qwe" v-else><a href="javascript:void(0)" title="立即购买" @click="createOrder()" class="attr-btn c-btn-3">立即购买</a></section>
createOrder() {if (cookie.get('user_token') == null) {window.location.href = 'http://localhost:8555/login'}order.createOrder(this.usereId).then(response => {if (response.data.success) {console.log("===============" + response.data.data.orderNo)this.$router.push({path: '/order/' + response.data.data.orderNo})}})},
如上图中的前端代码为例，当点击立即购买时，就会跳转到待支付页面；从跳转的路径来看，路径中包含订单号，这个订单号就是调用创建订单接口后端返回的
所以这个待支付页面就可以通过订单号将相关的信息查询出来
2.2、回显数据代码实现
@ApiOperation("根据订单号查询订单")@GetMapping("/getOrder/{orderNo}")public ResponseEntity getOrder(@PathVariable String orderNo) {Order order = orderService.getOne(new QueryWrapper<Order>().eq("order_no", orderNo));return ResponseEntity.ok().data("order", order);}
3、生成微信支付二维码接口
想来也都明白，肯定是扫码支付
3.1、微信支付二维码逻辑分析
假设当前只能使用微信支付，当点击提交订单时，就会出现一个支付二维码；所以这个点击提交按钮就会调用后端生成二维码接口
官方文档地址：https://pay./wiki/doc/apiv3/open/pay/chapter2_1.shtml
其中需要一些核心的参数，当然你得认证通过之后（这些参数的意思不再过多阐述，官网可以了解)
1.appid 唯一标识
2.mch_id 商户号
3.notify_url 回调地址
4.partnerkey 商户密钥
接口思路是什么？
封装这些参数到map集合中，然后远程调用微信接口即可；微信响应回来的包含result_code，code_url等等，这个url就是支付二维码地址
3.2、微信支付二维码核心逻辑代码实现
需要微信的依赖包wxpay-sdk
@Overridepublic Map createNative(String orderNo) {try {Order order = orderService.getOne(new QueryWrapper<Order>().eq("order_no", orderNo));//设置发送参数(例如appid等等都是必须的)Map map = new HashMap<>();map.put("appid", WxConstantProperties.APP_ID);map.put("mch_id", WxConstantProperties.MCH_ID);map.put("nonce_str", WXPayUtil.generateNonceStr());map.put("body", order.getGoodsName());map.put("out_trade_no", orderNo);map.put("total_fee", order.getTotalFee());map.put("spbill_create_ip", "127.0.0.1");map.put("notify_url", WxConstantProperties.NOTIFY_URL);map.put("trade_type", "NATIVE");System.out.println("map------------>"+map);//2.发送HttpClient client = new HttpClient("https://api.mch./pay/unifiedorder");//密钥加密，将map类型转换成xml格式，这是微信规定的client.setXmlParam(WXPayUtil.generateSignedXml(map, WxConstantProperties.PARTNER_KEY));//支持https请求，上面的链接就是httpsclient.setHttps(true);//发送post请求client.post();//3.得到相应响应参数String xmlResponse = client.getContent();Map<String, String> response = WXPayUtil.xmlToMap(xmlResponse);//4.封装响应结果Map responseMap = new HashMap();responseMap.put("out_trade_no", orderNo);responseMap.put("goods_id", order.getGoodsId());responseMap.put("total_fee", order.getTotalFee());responseMap.put("result_code", response.get("result_code"));responseMap.put("code_url", response.get("code_url"));return responseMap;} catch (Exception e) {throw new CommonException(40026, "二维码调用失败!");}}
前端代码不再展示，这是点击购买之后跳转的路径，
到这里会有一个问题，当我们扫码之后，系统怎么知道我们已经付过款了呢？由此请接着往下看
4.定时查询支付状态
4.1、后端逻辑分析
这里后端实现比较简单，封装appid等参数到map集合，向微信的支付接口查询即可；需要注意的是这里的参数要包括订单号，也就是第三步我们远程调用二维码接口时传给微信的订单号(key：out_trade_no # value：orderNo），否者微信支付服务器怎么识别查询哪个订单的状态
4.2、核心逻辑代码
@Overridepublic Map<String, String> queryPayStatus(String orderNo) {try {Map m = new HashMap();m.put("appid", WxConstantProperties.APP_ID);m.put("mch_id", WxConstantProperties.MCH_ID);m.put("out_trade_no", orderNo);m.put("nonce_str", WXPayUtil.generateNonceStr()); //随机字符串->生成签名用到//这里发送的地址是微信提供的，是固定不变的HttpClient client = new HttpClient("https://api.mch./pay/orderquery");//加密，并将其转换为xml格式，官方规定的client.setXmlParam(WXPayUtil.generateSignedXml(m, WxConstantProperties.PARTNER_KEY));client.setHttps(true);client.post();String xmlResponse = client.getContent();//转换为map集合，以便get到其中的值return WXPayUtil.xmlToMap(xmlResponse);} catch (Exception e) {e.printStackTrace();}return null;}
在返回响应的结果中，可以通过trade_state获取到其中的value，判断是否是SUCCESS，如果是代表该订单已经支付
if (map.get("trade_state").equals("SUCCESS")){...}
另外如果是SUCCESS代表以及支付，那么就要将订单表中的is_pay修改为true(代表已经支付），另外还可以创建一个支付日志表，用来存储已经支付的订单信息
4.3、前端逻辑分析
怎么做到用户扫码付款之后，就显示支付成功呢？可以通过计时器来实现
setInterval(test,3000)这个代表每隔3s调用一次test方法。所以我们可以在mounted中编写这个计时函数（mounted是VUE生命周期中的重要组成部分，它代表当页面渲染之后调用该mounted中的函数)
4.4、前端js核心代码实现
mounted() {this.timer = setInterval(()=>{this.queryStatus()}, 3000)},methods: {queryStatus() {order.queryPayStatus(this.orderId).then(response => {if (response.data.success) {clearInterval(this.timer)this.$message({type: 'success',message: '支付成功!'})this.$router.push({path: '/goods/' + this.payQc.goods_id})}})}}
这里也需要注意一个点，就是这个计时器在支付之后要清空，否者它会一直执行下去!
结束！
/9/4/15:37
