2021/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.weixin.qq.com/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.weixin.qq.com/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.weixin.qq.com/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})}})}}

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

結束！

2021/9/4/15:37

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。