微信小程序怎么實現付款功能

本文小編為大家詳細介紹“微信小程序怎么實現付款功能”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序怎么實現付款功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1 支付場景

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

支付其實是先向微信支付提交一個在線訂單，訂單提交成功之后就可以調用支付接口來拉起支付界面。

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

2 創建數據源

按照分析的場景我們需要創建數據源，一共是兩個數據源，分別是商品數據源和訂單數據源。

2.1 商品數據源

商品的話有商品的名稱、價格、詳情，按照設計創建商品數據源并且建立對應的字段

2.2 訂單數據源

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

3 創建連接器

如果我們希望使用微信支付，需要先創建連接器。在控制臺點擊連接器，點擊新建連接器

選擇微信支付

選擇企業主體的小程序和商戶號，就完成了連接器的創建

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

4 創建應用

點擊控制臺的應用菜單，點擊新建應用，新建自定義應用

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

點擊空白頁面，創建首頁

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

接著再創建一個訂單頁

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)
      }
    }
  );
}

讀到這里，這篇“微信小程序怎么實現付款功能”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。