導(dǎo)語

微信打賞支付和紅包提現(xiàn)，是日常高頻功能，那么基于小程序云開發(fā)，如何實(shí)現(xiàn)小程序的打賞支付和紅包提現(xiàn)呢？騰訊工程師給你支招。

如何實(shí)現(xiàn)小程序打賞支付

1.1 小程序打賞支付功能介紹

這次的打賞功能，主要用于活躍年會晚會，功能集成在年會小程序上。互動(dòng)流程如下：晚會節(jié)目開始表演時(shí)，現(xiàn)場觀眾打開小程序，會自動(dòng)定位到當(dāng)前節(jié)目名稱，點(diǎn)擊節(jié)目名稱即可進(jìn)入節(jié)目打賞界面。我們提供了免費(fèi)打賞(送愛心)和付費(fèi)打賞。(備注：打賞并未涉及向個(gè)體的虛擬物品打賞，而是用戶向商戶的付費(fèi)購買。)

圖1.?晚會節(jié)目打賞功能流程圖

這個(gè)年會小程序的付費(fèi)打賞主要是利用小程序的微信支付能力來實(shí)現(xiàn)的，具體如何操作呢？下面我給大家介紹一下：首先需要有一個(gè)收款類型的商戶號，其次需要為小程序開通微信支付功能，具體請看下面的接入流程。

1.2 小程序打賞支付接入流程

在成功申請商戶號之后，可登錄商戶平臺^[1]，點(diǎn)擊產(chǎn)品中心 -> 我的產(chǎn)品，查看已開通的支付產(chǎn)品，里面必須包含 JSAPI 支付才能進(jìn)行小程序微信支付的開發(fā)。請注意，付款類型的商戶號是沒有 JSAPI 支付的，需要是收款類型的商戶號才有。

圖2. 商戶平臺的產(chǎn)品中心截圖

在商戶平臺 -> API 安全，可設(shè)置 API 密鑰(如原先已生成過密鑰，請找管理員獲取密鑰)，這個(gè)密鑰和商戶號在后續(xù)的微信支付開發(fā)需要用到。

有了商戶號，小程序就可以申請開通微信支付功能了。具體操作是將小程序 AppID 與商戶號進(jìn)行綁定。到小程序的微信公眾平臺，點(diǎn)擊微信支付 -> 商戶號管理，可以查到已綁定的商戶號(一個(gè)小程序可以綁定多個(gè)互不沖突、影響的商戶號)。接著就可以愉快地進(jìn)入小程序微信支付相關(guān)功能的開發(fā)了。

圖3.在小程序微信公眾平臺查看已綁定的商戶號

1.3 通過云開發(fā)實(shí)現(xiàn)小程序打賞支付

本次小程序的微信支付后臺邏輯是借助云開發(fā)來實(shí)現(xiàn)的，其中在接收支付結(jié)果通知回調(diào)中，用到了中轉(zhuǎn)服務(wù)器來做數(shù)據(jù)的中轉(zhuǎn)。當(dāng)然，想百分百通過云開發(fā)來實(shí)現(xiàn)的話，可試試云開發(fā)最近提供的通過 HTTP 訪問云函數(shù)^[2]。

在發(fā)起微信支付之前，需要先去微信支付服務(wù)后臺生成預(yù)支付交易單，獲得預(yù)支付交易會話標(biāo)識 prepay_id 和簽名 paySign 等參數(shù)后，才能調(diào)用小程序前端微信支付接口進(jìn)行支付操作。這里要注意，小程序前端微信支付接口的成功回調(diào)，是需要用戶在支付成功后點(diǎn)擊“完成”按鈕才會執(zhí)行，當(dāng)用戶未點(diǎn)擊“完成”按鈕，則不會執(zhí)行成功回調(diào)。所以，我們要確認(rèn)用戶是否支付成功，需要在生成預(yù)支付交易單時(shí)，傳遞 notify_url 參數(shù)，用來接收支付結(jié)果通知回調(diào)，當(dāng)用戶支付成功時(shí)，微信支付服務(wù)后臺會將成功狀態(tài)通過 notify_url 參數(shù)填寫的地址推送過來，這時(shí)我們就能夠知道用戶已經(jīng)支付成功。

生成預(yù)支付交易單，要確保同一個(gè)商戶號下的商戶訂單號是唯一的，同一筆交易不能多次提交。交易類型寫 JSAPI，接收支付結(jié)果通知的回調(diào)地址不能攜帶參數(shù)，附相關(guān)文檔^[3]。

支付結(jié)果通知回調(diào)，接收微信支付服務(wù)后臺的支付結(jié)果通知時(shí)，一定要做簽名驗(yàn)證，并校驗(yàn)返回的訂單號、訂單金額是否與數(shù)據(jù)庫保存的一致，防止出現(xiàn)“假通知”，造成資金損失，附相關(guān)文檔^[4]。

圖4. 小程序微信支付開發(fā)流程圖

詳細(xì)全面日志記錄，利用云開發(fā)提供的日志服務(wù)，對每個(gè)打賞交易訂單做詳細(xì)的日志記錄，確保用戶的每一筆交易都有跡可尋。

圖5. 詳細(xì)全面的日志記錄

如何實(shí)現(xiàn)小程序紅包提現(xiàn)

2.1 小程序紅包提現(xiàn)功能介紹

晚會進(jìn)入中場環(huán)節(jié)時(shí)，現(xiàn)場用戶可通過小程序進(jìn)入互動(dòng)小游戲，某用戶在玩游戲的過程中，只要首次分?jǐn)?shù)上報(bào)成功，后臺就會自動(dòng)給其分配一個(gè)隨機(jī)金額的紅包，當(dāng)用戶退出互動(dòng)小游戲，返回到小程序時(shí)，前端就會彈出紅包，用戶拆開紅包，金額自動(dòng)提現(xiàn)到賬微信零錢。

圖6.?晚會中場互動(dòng)小游戲紅包發(fā)放功能流程圖

紅包發(fā)放主要是利用微信支付的企業(yè)付款到零錢接口來實(shí)現(xiàn)的，首先需要有一個(gè)付款類型的商戶號，其次需要為小程序開通微信支付功能，將小程序 AppID 與付款商戶號進(jìn)行綁定。

在小程序中給用戶發(fā)紅包，一開始我們有想過利用小程序紅包^[5]來實(shí)現(xiàn)這個(gè)功能，這樣讓用戶有微信原生發(fā)放和領(lǐng)取紅包的體驗(yàn)，但目前僅支持用戶微信掃碼打開小程序時(shí)進(jìn)行紅包領(lǐng)取，其他場景暫不支持，所以沒有采用這種方法。

2.2 小程序紅包提現(xiàn)接入流程 在成功申請商戶號之后，可登錄商戶平臺^[6]，點(diǎn)擊產(chǎn)品中心 -> 我的產(chǎn)品，查看已開通的運(yùn)營工具，里面必須包含企業(yè)付款到零錢才能進(jìn)行紅包提現(xiàn)的開發(fā)。請注意，收款類型的商戶號是沒有企業(yè)付款到零錢的，需要是付款類型的商戶號才有。

圖7.商戶平臺的產(chǎn)品中心截圖

在商戶平臺 -> API 安全，可設(shè)置 API 密鑰(如原先已生成過密鑰，請找管理員獲取密鑰)，這個(gè)密鑰和商戶號在后續(xù)的紅包提現(xiàn)開發(fā)需要用到。

有了商戶號，小程序就可以申請開通微信支付功能了。小程序的微信支付功能開通后，我們到小程序的微信公眾平臺，點(diǎn)擊微信支付 -> 商戶號管理，可以查到已綁定的商戶號(一個(gè)小程序可以綁定多個(gè)互不沖突、影響的商戶號)。接著就可以愉快地進(jìn)入紅包提現(xiàn)相關(guān)功能的開發(fā)了。

圖8. 在小程序微信公眾平臺查看已綁定的商戶號

2.3 通過云開發(fā)實(shí)現(xiàn)小程序紅包提現(xiàn)

本次小程序的紅包分配和提現(xiàn)的后臺邏輯都是借助云開發(fā)來實(shí)現(xiàn)的。

紅包金額生成，在小程序上線前，后臺就根據(jù)付款商戶號總金額和預(yù)計(jì)線下總參與人數(shù)，預(yù)先生成一批隨機(jī)的紅包金額，隨機(jī)打亂順序后入庫 allRedPacketAmounts。

//隨機(jī)的紅包金額入庫格式如下{ "_id": "xxxxxx", //記錄id "red_packets": [8.88,18.88,66.66,88.88], //隨機(jī)的紅包金額數(shù)組 "user_openids": [] //已分配紅包的用戶openid數(shù)組}

紅包金額分配，每個(gè)用戶只能分配一個(gè)紅包，為了避免由于并發(fā)導(dǎo)致多個(gè)用戶同時(shí)分配到同一金額的紅包，我們做了紅包分配的串行處理，每個(gè)用戶排隊(duì)分配紅包。在給用戶分配紅包之前，先使用原子操作 db.command.addToSet()將其 openid 加入到 user_openids 數(shù)組中，并獲得其 openid 在 user_openids 中的索引，在 red_packets 中獲取相同索引的紅包金額作為此用戶分配到的紅包金額。當(dāng) red_packets 數(shù)組的紅包金額分配完以后，用戶分配到的紅包金額將為 0，用戶拆開紅包時(shí)，前端會展示“手慢了，紅包派完了”。

//給用戶分配紅包金額const _ = db.command//原子操作將openid加入到user_openids數(shù)組中l(wèi)et updated = await db.collection('allRedPacketAmounts').doc('xxxxxx').update({ data: { user_openids: _.addToSet(openid) }})//獲取最新的紅包金額分配情況let record = (await db.collection('allRedPacketAmounts').doc('xxxxxx').get()).data//獲取此用戶openid在user_openids數(shù)組中的索引let index = record.user_openids.indexOf(openid)//獲取此用戶分配到的紅包金額let amount = record.red_packets[index] || 0

紅包金額提現(xiàn)，小程序前端獲取當(dāng)前用戶分配到的紅包 id，并傳給紅包提現(xiàn)的云函數(shù)，進(jìn)行紅包金額的提現(xiàn)，直接到賬用戶的微信零錢。紅包提現(xiàn)的云函數(shù)，使用到的核心接口是微信支付的企業(yè)付款到零錢接口，附[相關(guān)文檔](https://pay.weixin.qq.com/wiki/doc/api/tools/mch_pay.php?chapter=14_2)

圖9. 小程序紅包分配與提現(xiàn)開發(fā)流程圖

調(diào)用企業(yè)付款到零錢接口，需要先到微信商戶平臺的產(chǎn)品中心 -> 企業(yè)付款到零錢 -> 產(chǎn)品設(shè)置 -> 發(fā)起方式 -> API 接口發(fā)起中配置接口調(diào)用 IP 白名單。這里需要填一個(gè)固定的 IP 地址，而我們使用的是云函數(shù)來請求企業(yè)付款到零錢接口，而云函數(shù)默認(rèn)是動(dòng)態(tài)(非固定)IP 的。

下面說明如何給云函數(shù)配置固定 IP，首先進(jìn)入騰訊云^[7]，使用此小程序的管理員微信進(jìn)行掃碼，然后選擇此小程序進(jìn)行登錄。接著進(jìn)入騰訊云云開發(fā)云函數(shù)控制臺^[8]，點(diǎn)擊要配置為固定 IP 的云函數(shù)名稱，編輯網(wǎng)絡(luò)配置，給其選擇一個(gè)私有網(wǎng)絡(luò)^[9]和子網(wǎng)^[10]就可以有個(gè)固定 IP，如果沒有私有網(wǎng)絡(luò)/子網(wǎng)，則需新建。

圖10. 編輯云函數(shù)的網(wǎng)絡(luò)配置//通過以下方法獲取云函數(shù)IP，校驗(yàn)云函數(shù)IP是否是固定的const cp = require('child_process')const util = require('util')exports.main = async(event, context) => { return await util.promisify(cp.exec)('curl -k https://ip.cn')}

請求企業(yè)付款到零錢接口，需要帶上商戶 API 證書，可到微信商戶平臺 -> 賬戶中心 -> 賬戶設(shè)置 -> API 安全中下載 API 證書。只需要使用到 API 證書壓縮包里面的 apiclient_cert.p12 文件。證書文件名應(yīng)改為復(fù)雜且不易猜測的文件名，存放于安全目錄中，防止泄露。我們將 API 證書文件存放在紅包提現(xiàn)的云函數(shù)目錄下，安全且便于引用。

//請求企業(yè)付款到零錢接口時(shí)帶上API證書示例const mchid = 'xxxxxx'const fs = require('fs')const rp = require('request-promise')let xml = (await rp({ url: 'https://api.mch.weixin.qq.com/mmpaymkttransfers/promotion/transfers', method: 'POST', agentOptions: { pfx: fs.readFileSync(__dirname + '/yXZ2tfp0R9FWi3bVorza7T1nGcJKBQg8.p12'), passphrase: mchid }, body: 'some xml data'})).toString('utf-8')

請求企業(yè)付款到零錢接口，所傳的商戶訂單號(partner_trade_no)要確保其歷史全局唯一性。如果商戶向同一用戶付款，傳遞了兩個(gè)不同的商戶訂單號，則會給用戶付兩次款。為了避免給用戶重復(fù)支付資金，造成損失，我們限定“1 用戶 1 紅包 1 商戶訂單號”，無論接口返回什么錯(cuò)誤碼(err_code)，都會使用原商戶訂單號重試付款，這樣就不會出現(xiàn)重復(fù)支付等資金風(fēng)險(xiǎn)。這里要特別注意一下，企業(yè)付款到零錢接口默認(rèn)的調(diào)用頻率為 30/s，如果接口返回錯(cuò)誤碼 FREQ_LIMIT，最好前端提示：“提現(xiàn)人數(shù)過多，請稍后再試”。

圖11. 商戶平臺資金流水截圖?

我們利用云開發(fā)提供的日志服務(wù)，對每個(gè)用戶的紅包金額分配和提現(xiàn)狀態(tài)做詳細(xì)的日志記錄，確保每一筆資金都有跡可尋。此外，也可登錄商戶平臺，查詢資金流水。

作者介紹

蘇秋宏，騰訊高級前端工程師，就職于騰訊游戲 TGideas 團(tuán)隊(duì)。

關(guān)注 TGideas

參考資料

[1]

商戶平臺: https://pay.weixin.qq.com/

[2]

通過 HTTP 訪問云函數(shù): https://tencentcloudbase.github.io/2019-09-03-access-function-by-http/#%E9%80%9A%E8%BF%87-http-%E8%AE%BF%E9%97%AE%E4%BA%91%E5%87%BD%E6%95%B0

[3]

相關(guān)文檔: https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1

[4]

相關(guān)文檔: https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7&index=8

[5]

小程序紅包: https://pay.weixin.qq.com/wiki/doc/api/tools/miniprogram_hb.php?chapter=18_4&index=1

[6]

商戶平臺: https://pay.weixin.qq.com/

[7]

騰訊云: https://cloud.tencent.com/login/mp

[8]

騰訊云云開發(fā)云函數(shù)控制臺: https://console.cloud.tencent.com/tcb/scf

[9]

私有網(wǎng)絡(luò): https://console.cloud.tencent.com/vpc/vpc?rid=4

[10]

子網(wǎng): https://console.cloud.tencent.com/vpc/subnet?rid=4

?

?更多精彩

點(diǎn)擊圖片

---

? ? ? 點(diǎn)擊在看讓更多人發(fā)現(xiàn)精彩

總結(jié)

以上是生活随笔為你收集整理的前端的date类型后台接收_腾讯高级前端工程师支招，云开发实现小程序打赏和提现云开发实践...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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