容量越大越不壞？24萬塊硬盤故障率報告公布 這些產品零故障
8月5日消息，云存儲服務商Backblaze發布了最新的硬盤故障率報告，年故障率有所上升。Backblaze發布的硬盤季度統計數據，其中包括故障率等重要方面。這些結
本文主要內容分三部分，第一部分是需求分析，第二部分是實現步驟，第三部分是問題詳解。
如果您只需要解決問題，請閱讀第一、二部分即可。
如果您有更多時間，進一步學習問題相關知識點，請閱讀至第三部分。
點擊微信掃碼支付按鈕，會彈出掃碼支付彈框，在彈框中部顯示一個微信支付的二維碼。
用戶打開微信掃碼并支付成功后，就會關閉彈框，彈出成功消息提示，并刷新表格數據，更新對應訂單的支付狀態，置灰微信掃碼支付按鈕。
用戶點擊彈框內的取消按鈕，就會隱藏彈框。
登錄微信公眾平臺，獲取微信公眾號開發者ID（AppID）。
登錄微信支付商戶平臺，申請Api證書、設置APIv3秘鑰。當然，這里有一個前提，必須要有商家的營業證書，否則無法認證和申請。
獲取微信支付商戶號、獲取商戶證書序列號。
在pom.xml文件中，引入微信支付相關依賴。
在application.xml文件中，配置上面在準備工作中獲取的微信支付相關配置信息。
新建一個微信支付配置類WechatConfig，映射配置文件中配置的參數。
編寫一個微信支付下單請求參數WxOrderDTO類。具體參數詳情見官方文檔：https://pay.weixin.qq.com/docs/merchant/apis/native-payment/direct-jsons/native-prepay.html.
編寫一個微信返回通知結果集WxResultDTO類。具體參數詳情見官方文檔：https://pay.weixin.qq.com/docs/merchant/apis/native-payment/payment-notice.html。
編寫一個微信支付工具類WxPayUtils，在其中定義一個獲取HttpClient實例的公共方法getClient，通過商戶號和序列號，以及加載秘鑰文件和證書文件，生成對應的HttpClient實例。
編寫調用微信支付接口的WxPayService業務類，在其中編寫一個Native支付的統一下單方法CreateNativeOrder。
編寫一個微信支付的WxPayController類，在其中編寫一個微信支付下單的方法nativeWxPay。值得注意的是，請求參數WxOrderDTO中的notify_url參數對應的地址，就是微信支付返回通知的回調地址。
編寫一個帶條件分頁查詢訂單列表的接口，用來查詢對應訂單的支付狀態。
這個比較簡單，按個人業務需求編寫，此處不再贅述。
編寫一個微信支付返回通知回調方法wxCallBack，在這里對微信返回的通知信息進行了簽名驗證、參數解密，判斷通知數據中交易狀態為成功后，修改訂單狀態。
擴展：申請微信退款功能實現詳細，基本類同微信支付下單流程，此處不再贅述。退款參數詳情見官方文檔：https://pay.weixin.qq.com/docs/merchant/apis/native-payment/create.html。
在真實項目中，前端對于微信掃碼支付所做的操作并不多。
無非就是調用后端微信掃碼支付下單的接口，請求成功后在頁面渲染微信支付二維碼。
當用戶完成支付操作后，利用定時器輪循查詢訂單支付狀態，從而判斷當用戶支付成功時，刷新數據并重新渲染頁面。
詳細實現步驟如下：
編寫掃碼支付二維碼彈框。
<template><!-- 掃碼支付二維碼彈框 --><div><div style="text-align: center;"><!-- 使用了Qrcode庫來生成二維碼，此處不再贅述 --><qrcode:text="form.urlCode":width="300":logo="require('@/assets/img/logo.png')"/></div><div><el-button @click="close">取消</el-button></div></div></template>在API文件中定義2個接口。
// 查詢訂單支付狀態export const getDetApi = ({ params }: PropsData): any => {return fetch({ url: `/pay/${params.id}`, method: 'get', params })}// 微信掃碼支付下單接口export const nativeWxPayApi = ({ params }: PropsData): any => {return fetch({ url: `/pay/nativeWxPay/${params.id}`, method: 'get' })}編寫微信掃碼支付方法，在點擊微信掃碼支付按鈕時調用。// 微信掃碼支付async function getNativeWxPayOrder() {if (props.info) {// 當前訂單的idconst id = (props.info as any).idtry {// 調用微信掃碼支付下單接口const res = await nativeWxPayApi({params: {id: id}})if (res) {// 渲染后端返回的微信支付二維碼form['urlCode'] = res.result.code_url// 刷新訂單狀態await getOrderStatus()}} catch (e) {console.log(e)}}編寫查詢訂單支付狀態方法，在調用微信掃碼支付接口完成后調用。
// 獲取訂單支付狀態const getOrderStatus = async() => {const id = (props.info as any).idconst params = {params: {id: id}}// 使用定時器循環請求查詢訂單支付狀態接口，直到返回支付成功為止const myStateInterval = setInterval(async () => {// 調用查詢訂單支付狀態接口const res = await getDetApi(params)if (res.status === 200) {// 如果訂單支付狀態顯示為已支付if (res.result['status'] === 1) {// 清除定時器clearInterval(myStateInterval)// 消息通知emit('success', '成功')// 關閉彈框，刷新數據close()}}}, 3000)}后端微信支付下單和申請退款接口詳細，請參考視頻教程：https://www.bilibili.com/video/BV1eb4y187Qy?p=18&spm_id_from=pageDriver&vd_source=2571ea6a1d02797fe7590325786e2e84。
一切版權歸原作者所有，如有侵權請聯系刪除。
本文鏈接：http://www.www897cc.com/showinfo-26-48757-0.htmlVue3問題：如何實現微信掃碼支付？全面！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Golang清晰代碼指南
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號