本文主要內(nèi)容分三部分，第一部分是需求分析，第二部分是實(shí)現(xiàn)步驟，第三部分是問題詳解。

如果您只需要解決問題，請(qǐng)閱讀第一、二部分即可。

如果您有更多時(shí)間，進(jìn)一步學(xué)習(xí)問題相關(guān)知識(shí)點(diǎn)，請(qǐng)閱讀至第三部分。

1、需求分析

點(diǎn)擊微信掃碼支付按鈕，會(huì)彈出掃碼支付彈框，在彈框中部顯示一個(gè)微信支付的二維碼。

用戶打開微信掃碼并支付成功后，就會(huì)關(guān)閉彈框，彈出成功消息提示，并刷新表格數(shù)據(jù)，更新對(duì)應(yīng)訂單的支付狀態(tài)，置灰微信掃碼支付按鈕。

用戶點(diǎn)擊彈框內(nèi)的取消按鈕，就會(huì)隱藏彈框。

2、實(shí)現(xiàn)步驟

（1）準(zhǔn)備工作（了解即可）

登錄微信公眾平臺(tái)，獲取微信公眾號(hào)開發(fā)者ID（AppID）。

登錄微信支付商戶平臺(tái)，申請(qǐng)Api證書、設(shè)置APIv3秘鑰。當(dāng)然，這里有一個(gè)前提，必須要有商家的營(yíng)業(yè)證書，否則無(wú)法認(rèn)證和申請(qǐng)。

獲取微信支付商戶號(hào)、獲取商戶證書序列號(hào)。

（2）編寫后端接口（了解即可）

在pom.xml文件中，引入微信支付相關(guān)依賴。

在application.xml文件中，配置上面在準(zhǔn)備工作中獲取的微信支付相關(guān)配置信息。

新建一個(gè)微信支付配置類WechatConfig，映射配置文件中配置的參數(shù)。

編寫一個(gè)微信支付下單請(qǐng)求參數(shù)WxOrderDTO類。具體參數(shù)詳情見官方文檔：https://pay.weixin.qq.com/docs/merchant/apis/native-payment/direct-jsons/native-prepay.html.

編寫一個(gè)微信返回通知結(jié)果集WxResultDTO類。具體參數(shù)詳情見官方文檔：https://pay.weixin.qq.com/docs/merchant/apis/native-payment/payment-notice.html。

編寫一個(gè)微信支付工具類WxPayUtils，在其中定義一個(gè)獲取HttpClient實(shí)例的公共方法getClient，通過商戶號(hào)和序列號(hào)，以及加載秘鑰文件和證書文件，生成對(duì)應(yīng)的HttpClient實(shí)例。

編寫調(diào)用微信支付接口的WxPayService業(yè)務(wù)類，在其中編寫一個(gè)Native支付的統(tǒng)一下單方法CreateNativeOrder。

編寫一個(gè)微信支付的WxPayController類，在其中編寫一個(gè)微信支付下單的方法nativeWxPay。值得注意的是，請(qǐng)求參數(shù)WxOrderDTO中的notify_url參數(shù)對(duì)應(yīng)的地址，就是微信支付返回通知的回調(diào)地址。

編寫一個(gè)帶條件分頁(yè)查詢訂單列表的接口，用來(lái)查詢對(duì)應(yīng)訂單的支付狀態(tài)。

這個(gè)比較簡(jiǎn)單，按個(gè)人業(yè)務(wù)需求編寫，此處不再贅述。

編寫一個(gè)微信支付返回通知回調(diào)方法wxCallBack，在這里對(duì)微信返回的通知信息進(jìn)行了簽名驗(yàn)證、參數(shù)解密，判斷通知數(shù)據(jù)中交易狀態(tài)為成功后，修改訂單狀態(tài)。

擴(kuò)展：申請(qǐng)微信退款功能實(shí)現(xiàn)詳細(xì)，基本類同微信支付下單流程，此處不再贅述。退款參數(shù)詳情見官方文檔：https://pay.weixin.qq.com/docs/merchant/apis/native-payment/create.html。

（3）編寫前端

在真實(shí)項(xiàng)目中，前端對(duì)于微信掃碼支付所做的操作并不多。

無(wú)非就是調(diào)用后端微信掃碼支付下單的接口，請(qǐng)求成功后在頁(yè)面渲染微信支付二維碼。

當(dāng)用戶完成支付操作后，利用定時(shí)器輪循查詢訂單支付狀態(tài)，從而判斷當(dāng)用戶支付成功時(shí)，刷新數(shù)據(jù)并重新渲染頁(yè)面。

詳細(xì)實(shí)現(xiàn)步驟如下：

編寫掃碼支付二維碼彈框。

<template>
<!-- 掃碼支付二維碼彈框 -->
<div>
<div style="text-align: center;">
<!-- 使用了Qrcode庫(kù)來(lái)生成二維碼，此處不再贅述 -->
<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個(gè)接口。

// 查詢訂單支付狀態(tài)
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' })
}
編寫微信掃碼支付方法，在點(diǎn)擊微信掃碼支付按鈕時(shí)調(diào)用。
// 微信掃碼支付
async function getNativeWxPayOrder() {
if (props.info) {
// 當(dāng)前訂單的id
const id = (props.info as any).id

try {
// 調(diào)用微信掃碼支付下單接口
const res = await nativeWxPayApi({
params: {
id: id
}
})

if (res) {
// 渲染后端返回的微信支付二維碼
form['urlCode'] = res.result.code_url
// 刷新訂單狀態(tài)
await getOrderStatus()
}
} catch (e) {
console.log(e)
}
}

編寫查詢訂單支付狀態(tài)方法，在調(diào)用微信掃碼支付接口完成后調(diào)用。

// 獲取訂單支付狀態(tài)
const getOrderStatus = async() => {
const id = (props.info as any).id
const params = {
params: {
id: id
}
}

// 使用定時(shí)器循環(huán)請(qǐng)求查詢訂單支付狀態(tài)接口，直到返回支付成功為止
const myStateInterval = setInterval(async () => {
// 調(diào)用查詢訂單支付狀態(tài)接口
const res = await getDetApi(params)

if (res.status === 200) {
// 如果訂單支付狀態(tài)顯示為已支付
if (res.result['status'] === 1) {
// 清除定時(shí)器
clearInterval(myStateInterval)
// 消息通知
emit('success', '成功')
// 關(guān)閉彈框，刷新數(shù)據(jù)
close()
}
}
}, 3000)
}

3、問題詳解

（1）后端接口代碼編寫細(xì)節(jié)

后端微信支付下單和申請(qǐng)退款接口詳細(xì)，請(qǐng)參考視頻教程：https://www.bilibili.com/video/BV1eb4y187Qy?p=18&spm_id_from=pageDriver&vd_source=2571ea6a1d02797fe7590325786e2e84。

一切版權(quán)歸原作者所有，如有侵權(quán)請(qǐng)聯(lián)系刪除。

（2）用到文檔地址整理

• 微信支付API文檔：https://pay.weixin.qq.com/docs/merchant/apis/native-payment/direct-jsons/native-prepay.html。
• 微信商戶平臺(tái)：https://pay.weixin.qq.com/。
• 微信公眾平臺(tái)：https://mp.weixin.qq.com。