網頁端微信掃碼支付流程
1. 用戶在網頁上選擇“微信支付”
2. 用戶輸入充值金額，點擊“確定”操作
3. 網頁根據微信通道回傳的支付鏈接生成微信支付碼
4. 用戶通過手機掃碼支付
5. 網頁根據用戶付款結果，進行跳轉或提示，
如下是一個產品互動原型，便于直觀理解，
再介紹一下網頁端微信掃碼支付的時序，我方先呼叫三方介面拿到qrcode展示到前端頁面上， 然后等待用戶使用手機微信掃碼支付，微信收到支付請求并處理完畢會主動通知我方系統，我方系統會修改支付單狀態，這個程序通常會在極短時間內完成（一般不超過5s），三方也提供支付結果查詢介面，供我方主動發起查詢，
而用戶界面上這個人機互動的難點，就在于頁面展示付款碼之后，怎么知道用戶是否掃碼支付完成了呢？因為頁面展示了付款碼之后，會存在兩種情況，一種情況是用戶用手機掃碼支付了，一種情況是用戶并沒有掃碼，或者是掃碼了也沒有支付，
最簡單也是最常用的方式是：服務端提供一個查詢支付結果的介面，頁面在展示了支付碼以后，設定interval，比如每間隔2秒鐘，就調一下服務端的介面，看看是否支付完成，
接下來，我們來看看 服務端介面 和 頁面互動 的詳細設計，
? 服務端介面：查詢支付狀態
方案一：先查本地庫，判斷是否已經支付，如果已經支付，則直接回傳，如果未支付，則同步呼叫三方介面請求支付結果，然后如果是終態，則改支付單記錄，再回傳，
這個方案的缺點很明顯：① 連接db做查詢或修改操作；② 呼叫外部介面，這兩點會導致回應慢，尤其是②，會增加因網路導致的不可控的因素，
優化方案：改為查redis，就是說，當三方回呼我方支付結果時，我們將支付狀態保存在redis里，直接查redis，5s內即使無終態，也不主動呼叫三方介面；5s后，則可以考慮異步觸發呼叫三方介面，
這樣會極大提高介面回應速度，
? 頁面端互動
頁面設定interval，每隔2秒查支付結果，拿到結果后，跳轉頁面，給出對應提示，
特殊情況下，頁面不能一直傻傻地輪詢查，可以再設定一個閾值，比如如果超過30秒還沒有拿到支付結果，則跳轉頁面，給出支付超時的提示，并引導用戶重新發起支付，
當看到一些不好的代碼時，會發現我還算優秀；當看到優秀的代碼時，也才意識到持續學習的重要！--buguge
本文來自博客園，轉載請注明原文鏈接：https://www.cnblogs.com/buguge/p/16177590.html
<style>hr.signhr{width:80%;margin:0 auto;border: 0;height: 4px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0))}</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/461891.html
標籤：架構設計
上一篇：當我想向影像組件添加自定義樣式時，為什么會出現此ts錯誤？
下一篇：設計模式篇(6) 裝飾器