微信小程式雲開發如何實現微信支付，業務邏輯又怎樣才算可靠

小禿僧發表於2022-05-11
微信小程式

今天打了幾把永劫無間後，我們們來聊一聊用雲開發來開發微信小程式時，如何實現微信支付，並且保證業務邏輯可靠。

@

目錄

註冊微信支付商戶號

在這裡插入圖片描述

點選“成為商家”，按照操作提示去申請商戶號即可（需要營業執照，個體戶或公司都行。沒有可以辦一個）

小程式關聯商戶號

在這裡插入圖片描述

註冊完成，登入進去，點選產品中心。再點選AppID賬號管理，關聯微信小程式的AppID，同意即可。

在微信開發者工具繫結商戶號，點選雲開發，進入雲開發控制檯，點選設定，點選其他設定，新增商戶號，如下圖操作即可

在這裡插入圖片描述
前期工作準備結束後，開始進入擼程式碼環節了

業務邏輯

在這裡插入圖片描述
這個是官方文件的一張微信支付的業務邏輯示意圖。我以前看的時候還是挺懵的，不知所云。後來真正實踐過才明白它的意思。

舉個例子可能更好明白，我們在開發跑腿小程式的時候呢，需要釋出跑腿功能，釋出時需要進行微信支付。

先看看我畫的圖,釋出跑腿的一個業務邏輯

在這裡插入圖片描述

程式碼實現

pay雲函式：
主要是用於獲取回包，回包裡面有wx.requestPayment 發起微信支付所需要的引數。

const cloud = require('wx-server-sdk')
cloud.init({
  env: ''  //填入你的雲開發環境ID
})

exports.main = async (event, context) => {

  const res = await cloud.cloudPay.unifiedOrder({
    "body": event.body,
    "outTradeNo" : event.outTradeNo, //不能重複，否則報錯
    "spbillCreateIp" : "127.0.0.1", //就是這個值，不要改
    "subMchId" : "",  //你的商戶號,
    "totalFee" : event.totalFee*100,  //單位為分
    "envId": "",  //填入你的雲開發環境ID
    "functionName": "pay_success",  //支付成功的回撥雲函式
    "nonceStr":event.nonceStr,//隨便弄的32位字串，建議自己生成
    "tradeType":"JSAPI"   //預設是JSAPI
  })
  return res
}

微信小程式前端程式碼呼叫pay雲函式，並呼叫wx.requestPayment發起微信支付

  //使用微信支付
  pay:function(id){
    let that = this;
    wx.showLoading({
      title: '正在支付',
    })
    wx.cloud.callFunction({
      name: 'pay',  //雲函式的名稱
      data:{
          body:'支付跑腿費',
          outTradeNo:id,      //用記錄號來做訂單號，因為記錄號也是唯一的。
          totalFee:that.data.price,
          nonceStr:'5K8264ILTKCH16CQ2502SI8ZNMTM67VS'
      },
      success: res => {
        console.log(res)
        const payment = res.result.payment
        wx.hideLoading();
        wx.requestPayment({
          ...payment, //...這三點是 ES6的展開運算子，用於對變數、陣列、字串、物件等都可以進行解構賦值。
          success (res) {
             //這裡success回撥函式只有使用者點選了“完成”或者返回鍵才會被觸發
             //所以不要在這裡寫改變訂單為已支付的業務邏輯
             //萬一使用者支付完成，但不點選"完成"或者返回鍵，那會造成資料不一致性的問題
             
            console.log('支付成功', res)
            wx.showToast({
              title: '下單成功',
              icon: 'success',
              duration: 2000
            })
          },
          fail (err) {
            console.error('支付失敗', err) //支付失敗之後的處理函式，寫在這後面
            //為了節省資料庫的空間，支付失敗的訂單可以刪除
            db.collection('publish').doc(id).remove()
          },
        })
      },
      fail(ere){
          //為了節省資料庫的空間，支付失敗的訂單可以刪除
          db.collection('publish').doc(id).remove()
      },
    })
  },

這樣就可以實現微信支付啦

在這裡插入圖片描述

特別注意，不要在wx.requestPayment介面的success回撥函式裡面寫支付成功後的業務處理。切記！！！因為這裡success回撥函式只有使用者點選了“完成”或者返回鍵才會被觸發。萬一使用者支付完成，但不點選"完成"或者返回鍵，那會造成支付成功，但沒去處理資料，導致資料不一致性的問題。

應該交給pay_success雲函式來處理支付成功後的業務邏輯。

pay_success雲函式：


const cloud = require('wx-server-sdk')
 
cloud.init({
  env:''   //填入你的雲開發環境ID
})
const db = cloud.database()
// 雲函式入口函式
exports.main = async (event, context) => {
  const orderId = event.outTradeNo
  const returnCode = event.returnCode
  if(returnCode == 'SUCCESS'){
    //更新雲資料庫的訂單狀態，改為已支付的狀態即可
    db.collection('publish').where({
        _id:orderId,
    }).update({
      data:{
        pay_status:true,  //改為已支付狀態
      }
    })
    const res = {errcode:0,errmsg:'支付成功'}//需要返回的欄位，不返回該欄位則一直回撥
    return res
  }
}

改變狀態之後，我們在接單大廳裡去查詢獲取待接單資訊的時候，要去獲取已支付的待接單的訂單，也就是pay_status：true狀態的訂單即可。保證了資料的一致性。

到此結束啦。其實雲開發實現微信支付也沒有那麼難。只不過業務邏輯需要更加嚴謹一點。以前自己太辣雞，寫的業務邏輯漏洞百出，慚愧...

還是得繼續學習才行。

在這裡插入圖片描述

相關文章