快捷導(dǎo)航

微信小程序詳解如何實(shí)現(xiàn)付款功能

更新時(shí)間：2022年08月02日 16:21:13 作者：低代碼布道師

日常小程序里很多是需要付款的，那如何在小程序里實(shí)現(xiàn)付款呢？本篇就帶著大家體驗(yàn)一下，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值

1 支付場(chǎng)景

我們梳理一下支付場(chǎng)景是什么樣子的，首先可以瀏覽商品，然后在商品的詳情頁(yè)里進(jìn)行結(jié)算。結(jié)算的主要目的是生成訂單，訂單生成好之后就可以進(jìn)行支付。

支付其實(shí)是先向微信支付提交一個(gè)在線訂單，訂單提交成功之后就可以調(diào)用支付接口來(lái)拉起支付界面。

拉起支付界面之后我們需要按照提示的金額進(jìn)行付費(fèi)，付費(fèi)成功后我們更新一下訂單的狀態(tài)，變成已付款。

2 創(chuàng)建數(shù)據(jù)源

按照分析的場(chǎng)景我們需要?jiǎng)?chuàng)建數(shù)據(jù)源，一共是兩個(gè)數(shù)據(jù)源，分別是商品數(shù)據(jù)源和訂單數(shù)據(jù)源。

2.1 商品數(shù)據(jù)源

商品的話有商品的名稱、價(jià)格、詳情，按照設(shè)計(jì)創(chuàng)建商品數(shù)據(jù)源并且建立對(duì)應(yīng)的字段

2.2 訂單數(shù)據(jù)源

訂單的話有訂單編號(hào)，支付金額，是否支付，openid

3 創(chuàng)建連接器

如果我們希望使用微信支付，需要先創(chuàng)建連接器。在控制臺(tái)點(diǎn)擊連接器，點(diǎn)擊新建連接器

選擇微信支付

選擇企業(yè)主體的小程序和商戶號(hào)，就完成了連接器的創(chuàng)建

微信支付一共提供了四個(gè)方法，分別是統(tǒng)一下單、查詢訂單、關(guān)閉訂單、下載對(duì)賬單

4 創(chuàng)建應(yīng)用

點(diǎn)擊控制臺(tái)的應(yīng)用菜單，點(diǎn)擊新建應(yīng)用，新建自定義應(yīng)用

輸入應(yīng)用的名稱，選擇小程序

點(diǎn)擊空白頁(yè)面，創(chuàng)建首頁(yè)

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

在頁(yè)面旁邊點(diǎn)擊+號(hào)，先創(chuàng)建一個(gè)商品詳情頁(yè)面

接著再創(chuàng)建一個(gè)訂單頁(yè)

5 功能開(kāi)發(fā)

5.1 首頁(yè)

首頁(yè)我們放置一個(gè)數(shù)據(jù)列表組件用來(lái)顯示商品的列表信息

然后給文本組件綁定對(duì)應(yīng)的字段

選中for循環(huán)的普通容器，設(shè)置點(diǎn)擊事件，跳轉(zhuǎn)到商品詳情頁(yè)。跳轉(zhuǎn)的時(shí)候需要先新建一個(gè)頁(yè)面參數(shù)，然后綁定當(dāng)前記錄的數(shù)據(jù)標(biāo)識(shí)

5.2 商品詳情頁(yè)

商品詳情頁(yè)我們使用數(shù)據(jù)詳情組件開(kāi)發(fā)，加入數(shù)據(jù)詳情組件。選擇數(shù)據(jù)源模型，設(shè)置篩選條件，并且綁定好字段

給頁(yè)面增加一個(gè)按鈕，修改標(biāo)題為結(jié)算

我們點(diǎn)擊結(jié)算按鈕的時(shí)候要調(diào)用低碼方法，完成訂單的創(chuàng)建。這里的需要傳入訂單的金額，低碼方法調(diào)用新增即可

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',    // 頁(yè)面 Id 
    params: {id: resutl._id},
});
}

這里的openid是獲取的全局變量的值，具體全局變量的設(shè)置，啟動(dòng)方法獲取用戶的openid咱們?cè)跉v史文章里反復(fù)講解過(guò)多次了，可以查看過(guò)往的教程。

低碼方法定義好之后我們就可以給組件上設(shè)置點(diǎn)擊事件了，參數(shù)傳入我們的金額即可

5.3 訂單頁(yè)

訂單頁(yè)先用數(shù)據(jù)詳情組件展示訂單的詳情，放置一個(gè)支付按鈕來(lái)調(diào)用連接器的統(tǒng)一下單方法，調(diào)用成功后再調(diào)用支付接口拉起付款界面

先增加一個(gè)參數(shù)變量，接收我們?cè)谏唐吩斍轫?yè)傳入的參數(shù)

添加一個(gè)數(shù)據(jù)詳情組件，數(shù)據(jù)源選擇訂單，篩選條件設(shè)置數(shù)據(jù)標(biāo)識(shí)等于我們的參數(shù)變量

將訂單中的字段依次綁定到文本組件中

增加一個(gè)按鈕組件，修改標(biāo)題設(shè)置為支付

因?yàn)槲覀冞€需要在支付頁(yè)面獲取訂單的詳細(xì)信息，所以我們需要?jiǎng)?chuàng)建一個(gè)模型變量來(lái)根據(jù)參數(shù)變量獲取具體的值

在低碼編輯器里創(chuàng)建一個(gè)支付的低碼方法

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,//傳入訂單編號(hào)
      totalFee: $page.dataset.state.order.ddje,//傳入支付金額
      openid: $page.dataset.state.order.openid//傳入用戶的openid
    }, // 方法入?yún)?
  })
  let pay = result.payment;//獲取統(tǒng)一下單后的返回結(jié)果
  $app.requestPayment(//調(diào)用支付接口完成支付
    {
      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)
      }
    }
  );
}

這里沒(méi)有解決的就是支付成功更新訂單狀態(tài)的問(wèn)題，實(shí)測(cè)在支付的回調(diào)函數(shù)里不能直接調(diào)用數(shù)據(jù)模型的方法，如果有測(cè)試成功的同學(xué)可以在評(píng)論區(qū)留言進(jìn)行討論