2021/9/3/23:23

文章目錄

• 一、微信支付流程分析
• • 1.創(chuàng)建訂單接口
  • • 1.1、創(chuàng)建訂單業(yè)務(wù)邏輯分析
    • 1.2、創(chuàng)建訂單業(yè)務(wù)邏輯核心代碼
  • 2.待支付頁面數(shù)據(jù)回顯接口
  • • 2.1、待支付頁面數(shù)據(jù)邏輯分析
    • 2.2、回顯數(shù)據(jù)代碼實現(xiàn)
  • 3、生成微信支付二維碼接口
  • • 3.1、微信支付二維碼邏輯分析
    • 3.2、微信支付二維碼核心邏輯代碼實現(xiàn)
  • 4.定時查詢支付狀態(tài)
  • • 4.1、后端邏輯分析
    • 4.2、核心邏輯代碼
    • 4.3、前端邏輯分析
    • 4.4、前端js核心代碼實現(xiàn)

一、微信支付流程分析

下圖來源于微信支付官方文檔

根據(jù)官方的這張時序圖可以分析出微信支付流程

1.創(chuàng)建訂單接口

這個具體怎么做呢？以下圖天貓手機為例

當(dāng)用戶點擊立即購買時會進入一個待支付頁面，這個點擊立即購買就會調(diào)用創(chuàng)建訂單這個接口；所以數(shù)據(jù)庫中必須要有一張訂單表，該表中包含了一些用戶信息和商品信息，當(dāng)然最核心的是要包含訂單號(order_no）字段和是否支付(is_pay）字段

1.1、創(chuàng)建訂單業(yè)務(wù)邏輯分析

首先訂單表(order_no)最少的情況也要包含一些用戶信息字段和商品信息字段，所以這就涉及另外兩張表用戶表(t_user)和商品(t_goods)表；(我以微服務(wù)為例進行闡述)，遠程調(diào)用商品模塊和用戶模塊，將需要的字段封裝到訂單實體類中，進而保存數(shù)據(jù)庫即可；其中有個需要注意的點，那就是訂單號怎么生成呢？其實我們可以利用日期來編寫一個工具類生成即可，這樣也就不會造成重復(fù)的情況(時間一直向前嘛)。

1.2、創(chuàng)建訂單業(yè)務(wù)邏輯核心代碼

代碼中的工具類和商品模塊已經(jīng)用戶模塊的代碼等等已經(jīng)省略，因為比如JwtUtils工具類以及OpenFeign遠程調(diào)用、還有商品和用戶的CRUD應(yīng)該是很簡單的，最重要的是思路。

@Overridepublic String createOrder(String goodsId, HttpServletRequest request) {//1.遠程調(diào)用用戶服務(wù)，獲取用戶信息String userId = JwtUtils.getUserIdByToken(request);UserInfoVO userInfo = userClient.getUserInfo(userId);//2.根據(jù)courseId查詢出課程相關(guān)信息GoodsInfo goodsInfo = goodsClient.getGoodsInfo(goodsId);//3.創(chuàng)建訂單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.待支付頁面數(shù)據(jù)回顯接口

2.1、待支付頁面數(shù)據(jù)邏輯分析

以上方天貓商品為例，這個待支付頁面包含了用戶信息和商品信息，所以如果要做到這樣的待支付頁面，就需要根據(jù)訂單號去數(shù)據(jù)庫查詢相關(guān)的訂單信息，訂單號？看下方示例代碼

<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})}})},

如上圖中的前端代碼為例，當(dāng)點擊立即購買時，就會跳轉(zhuǎn)到待支付頁面；從跳轉(zhuǎn)的路徑來看，路徑中包含訂單號，這個訂單號就是調(diào)用創(chuàng)建訂單接口后端返回的

所以這個待支付頁面就可以通過訂單號將相關(guān)的信息查詢出來

2.2、回顯數(shù)據(jù)代碼實現(xiàn)

@ApiOperation("根據(jù)訂單號查詢訂單")@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、微信支付二維碼邏輯分析

假設(shè)當(dāng)前只能使用微信支付，當(dāng)點擊提交訂單時，就會出現(xiàn)一個支付二維碼；所以這個點擊提交按鈕就會調(diào)用后端生成二維碼接口

官方文檔地址：https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_1.shtml

其中需要一些核心的參數(shù)，當(dāng)然你得認證通過之后（這些參數(shù)的意思不再過多闡述，官網(wǎng)可以了解)

1.appid 唯一標(biāo)識
2.mch_id 商戶號
3.notify_url 回調(diào)地址
4.partnerkey 商戶密鑰

接口思路是什么？
封裝這些參數(shù)到map集合中，然后遠程調(diào)用微信接口即可；微信響應(yīng)回來的包含result_code，code_url等等，這個url就是支付二維碼地址

3.2、微信支付二維碼核心邏輯代碼實現(xiàn)

需要微信的依賴包wxpay-sdk

@Overridepublic Map createNative(String orderNo) {try {Order order = orderService.getOne(new QueryWrapper<Order>().eq("order_no", orderNo));//設(shè)置發(fā)送參數(shù)(例如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.發(fā)送HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");//密鑰加密，將map類型轉(zhuǎn)換成xml格式，這是微信規(guī)定的client.setXmlParam(WXPayUtil.generateSignedXml(map, WxConstantProperties.PARTNER_KEY));//支持https請求，上面的鏈接就是httpsclient.setHttps(true);//發(fā)送post請求client.post();//3.得到相應(yīng)響應(yīng)參數(shù)String xmlResponse = client.getContent();Map<String, String> response = WXPayUtil.xmlToMap(xmlResponse);//4.封裝響應(yīng)結(jié)果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, "二維碼調(diào)用失敗!");}}

前端代碼不再展示，這是點擊購買之后跳轉(zhuǎn)的路徑，
到這里會有一個問題，當(dāng)我們掃碼之后，系統(tǒng)怎么知道我們已經(jīng)付過款了呢？由此請接著往下看

---

4.定時查詢支付狀態(tài)

4.1、后端邏輯分析

這里后端實現(xiàn)比較簡單，封裝appid等參數(shù)到map集合，向微信的支付接口查詢即可；需要注意的是這里的參數(shù)要包括訂單號，也就是第三步我們遠程調(diào)用二維碼接口時傳給微信的訂單號(key：out_trade_no # value：orderNo），否者微信支付服務(wù)器怎么識別查詢哪個訂單的狀態(tài)

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()); //隨機字符串->生成簽名用到//這里發(fā)送的地址是微信提供的，是固定不變的HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/orderquery");//加密，并將其轉(zhuǎn)換為xml格式，官方規(guī)定的client.setXmlParam(WXPayUtil.generateSignedXml(m, WxConstantProperties.PARTNER_KEY));client.setHttps(true);client.post();String xmlResponse = client.getContent();//轉(zhuǎn)換為map集合，以便get到其中的值return WXPayUtil.xmlToMap(xmlResponse);} catch (Exception e) {e.printStackTrace();}return null;}

在返回響應(yīng)的結(jié)果中，可以通過trade_state獲取到其中的value，判斷是否是SUCCESS，如果是代表該訂單已經(jīng)支付

if (map.get("trade_state").equals("SUCCESS")){...}

另外如果是SUCCESS代表以及支付，那么就要將訂單表中的is_pay修改為true(代表已經(jīng)支付），另外還可以創(chuàng)建一個支付日志表，用來存儲已經(jīng)支付的訂單信息

4.3、前端邏輯分析

怎么做到用戶掃碼付款之后，就顯示支付成功呢？可以通過計時器來實現(xiàn)
setInterval(test,3000)這個代表每隔3s調(diào)用一次test方法。所以我們可以在mounted中編寫這個計時函數(shù)（mounted是VUE生命周期中的重要組成部分，它代表當(dāng)頁面渲染之后調(diào)用該mounted中的函數(shù))

4.4、前端js核心代碼實現(xiàn)

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})}})}}

這里也需要注意一個點，就是這個計時器在支付之后要清空，否者它會一直執(zhí)行下去!

結(jié)束！

2021/9/4/15:37

總結(jié)

以上是生活随笔為你收集整理的网站如何接入微信支付功能？微信支付详细教程它来了（建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。