微信小程式詳解如何實現付款功能

2022-08-02 18:05:09

1 支付場景

我們梳理一下支付場景是什麼樣子的，首先可以瀏覽商品，然後在商品的詳情頁裡進行結算。結算的主要目的是生成訂單，訂單生成好之後就可以進行支付。

支付其實是先向微信支付提交一個線上訂單，訂單提交成功之後就可以呼叫支付介面來拉起支付介面。

拉起支付介面之後我們需要按照提示的金額進行付費，付費成功後我們更新一下訂單的狀態，變成已付款。

2 建立資料來源

按照分析的場景我們需要建立資料來源，一共是兩個資料來源，分別是商品資料來源和訂單資料來源。

2.1 商品資料來源

商品的話有商品的名稱、價格、詳情，按照設計建立商品資料來源並且建立對應的欄位

2.2 訂單資料來源

訂單的話有訂單編號，支付金額，是否支付，openid

3 建立聯結器

如果我們希望使用微信支付，需要先建立聯結器。在控制檯點選聯結器，點選新建聯結器

選擇微信支付

選擇企業主體的小程式和商戶號，就完成了聯結器的建立

微信支付一共提供了四個方法，分別是統一下單、查詢訂單、關閉訂單、下載對賬單

4 建立應用

點選控制檯的應用選單，點選新建應用，新建自定義應用

輸入應用的名稱，選擇小程式

點選空白頁面，建立首頁

https://pan.baidu.com/s/1nfwR1rIY8oeceXhwS4n1cw 提取碼: 1f9f

在頁面旁邊點選+號，先建立一個商品詳情頁面

接著再建立一個訂單頁

5 功能開發

5.1 首頁

首頁我們放置一個資料列表元件用來顯示商品的列表資訊

然後給文字元件繫結對應的欄位

選中for迴圈的普通容器，設定點選事件，跳轉到商品詳情頁。跳轉的時候需要先新建一個頁面引數，然後繫結當前記錄的資料標識

5.2 商品詳情頁

商品詳情頁我們使用資料詳情元件開發，加入資料詳情元件。選擇資料來源模型，設定篩選條件，並且繫結好欄位

給頁面增加一個按鈕，修改標題為結算

我們點選結算按鈕的時候要呼叫低碼方法，完成訂單的建立。這裡的需要傳入訂單的金額，低碼方法呼叫新增即可

export default async function({event, data}) {
  const resutl = await app.cloud.callModel({
    name:'dd_98jydrk',
    methodName:'wedaCreate',
    params:{
      ddje:data.target,
      openid:app.dataset.state.openid,
      sfzf:false
    }
  })
  app.navigateTo({
    pageId: 'u_ding_dan_ye',    // 頁面 Id 
    params: {id: resutl._id},
});
}

這裡的openid是獲取的全域性變數的值，具體全域性變數的設定，啟動方法獲取使用者的openid咱們在歷史文章裡反覆講解過多次了，可以檢視過往的教學。

低碼方法定義好之後我們就可以給元件上設定點選事件了，引數傳入我們的金額即可

5.3 訂單頁

訂單頁先用資料詳情元件展示訂單的詳情，放置一個支付按鈕來呼叫聯結器的統一下單方法，呼叫成功後再呼叫支付介面拉起付款介面

先增加一個引數變數，接收我們在商品詳情頁傳入的引數

新增一個資料詳情元件，資料來源選擇訂單，篩選條件設定資料標識等於我們的引數變數

將訂單中的欄位依次繫結到文字元件中

增加一個按鈕元件，修改標題設定為支付

因為我們還需要在支付頁面獲取訂單的詳細資訊，所以我們需要建立一個模型變數來根據引數變數獲取具體的值

在低碼編輯器裡建立一個支付的低碼方法

export default async function ({ event, data }) {
  const result = await app.cloud.callConnector({
    name: 'wxzf_82kvbum',
    methodName: 'unifiedOrder',
    params: {
      body: "訂單範例-支付訂單",
      outTradeNo: $page.dataset.state.order.ddbh,//傳入訂單編號
      totalFee: $page.dataset.state.order.ddje,//傳入支付金額
      openid: $page.dataset.state.order.openid//傳入使用者的openid
    }, // 方法入參
  })
  let pay = result.payment;//獲取統一下單後的返回結果
  $app.requestPayment(//呼叫支付介面完成支付
    {
      timeStamp: pay.timeStamp,
      nonceStr: pay.nonceStr,
      package: pay.package,
      signType: pay.signType,
      paySign: pay.paySign,
      success(res) {
        console.log(res)
      },
      fail(res) {
        console.log(res)
      }
    }
  );
}

這裡沒有解決的就是支付成功更新訂單狀態的問題，實測在支付的回撥函數裡不能直接呼叫資料模型的方法，如果有測試成功的同學可以在評論區留言進行討論