微信小程序詳解如何實(shí)現(xiàn)付款功能
1 支付場景
我們梳理一下支付場景是什么樣子的,首先可以瀏覽商品,然后在商品的詳情頁里進(jìn)行結(jié)算。結(jié)算的主要目的是生成訂單,訂單生成好之后就可以進(jìn)行支付。
支付其實(shí)是先向微信支付提交一個在線訂單,訂單提交成功之后就可以調(diào)用支付接口來拉起支付界面。
拉起支付界面之后我們需要按照提示的金額進(jìn)行付費(fèi),付費(fèi)成功后我們更新一下訂單的狀態(tài),變成已付款。
2 創(chuàng)建數(shù)據(jù)源
按照分析的場景我們需要創(chuàng)建數(shù)據(jù)源,一共是兩個數(shù)據(jù)源,分別是商品數(shù)據(jù)源和訂單數(shù)據(jù)源。
2.1 商品數(shù)據(jù)源
商品的話有商品的名稱、價格、詳情,按照設(shè)計創(chuàng)建商品數(shù)據(jù)源并且建立對應(yīng)的字段
2.2 訂單數(shù)據(jù)源
訂單的話有訂單編號,支付金額,是否支付,openid
3 創(chuàng)建連接器
如果我們希望使用微信支付,需要先創(chuàng)建連接器。在控制臺點(diǎn)擊連接器,點(diǎn)擊新建連接器
選擇微信支付
選擇企業(yè)主體的小程序和商戶號,就完成了連接器的創(chuàng)建
微信支付一共提供了四個方法,分別是統(tǒng)一下單、查詢訂單、關(guān)閉訂單、下載對賬單
4 創(chuàng)建應(yīng)用
點(diǎn)擊控制臺的應(yīng)用菜單,點(diǎn)擊新建應(yīng)用,新建自定義應(yīng)用
輸入應(yīng)用的名稱,選擇小程序
點(diǎn)擊空白頁面,創(chuàng)建首頁
https://pan.baidu.com/s/1nfwR1rIY8oeceXhwS4n1cw 提取碼: 1f9f
在頁面旁邊點(diǎn)擊+
號,先創(chuàng)建一個商品詳情頁面
接著再創(chuàng)建一個訂單頁
5 功能開發(fā)
5.1 首頁
首頁我們放置一個數(shù)據(jù)列表組件用來顯示商品的列表信息
然后給文本組件綁定對應(yīng)的字段
選中for循環(huán)的普通容器,設(shè)置點(diǎn)擊事件,跳轉(zhuǎn)到商品詳情頁。跳轉(zhuǎn)的時候需要先新建一個頁面參數(shù),然后綁定當(dāng)前記錄的數(shù)據(jù)標(biāo)識
5.2 商品詳情頁
商品詳情頁我們使用數(shù)據(jù)詳情組件開發(fā),加入數(shù)據(jù)詳情組件。選擇數(shù)據(jù)源模型,設(shè)置篩選條件,并且綁定好字段
給頁面增加一個按鈕,修改標(biāo)題為結(jié)算
我們點(diǎn)擊結(jié)算按鈕的時候要調(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', // 頁面 Id params: {id: resutl._id}, }); }
這里的openid是獲取的全局變量的值,具體全局變量的設(shè)置,啟動方法獲取用戶的openid咱們在歷史文章里反復(fù)講解過多次了,可以查看過往的教程。
低碼方法定義好之后我們就可以給組件上設(shè)置點(diǎn)擊事件了,參數(shù)傳入我們的金額即可
5.3 訂單頁
訂單頁先用數(shù)據(jù)詳情組件展示訂單的詳情,放置一個支付按鈕來調(diào)用連接器的統(tǒng)一下單方法,調(diào)用成功后再調(diào)用支付接口拉起付款界面
先增加一個參數(shù)變量,接收我們在商品詳情頁傳入的參數(shù)
添加一個數(shù)據(jù)詳情組件,數(shù)據(jù)源選擇訂單,篩選條件設(shè)置數(shù)據(jù)標(biāo)識等于我們的參數(shù)變量
將訂單中的字段依次綁定到文本組件中
增加一個按鈕組件,修改標(biāo)題設(shè)置為支付
因為我們還需要在支付頁面獲取訂單的詳細(xì)信息,所以我們需要創(chuàng)建一個模型變量來根據(jù)參數(shù)變量獲取具體的值
在低碼編輯器里創(chuàng)建一個支付的低碼方法
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 }, // 方法入?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) } } ); }
這里沒有解決的就是支付成功更新訂單狀態(tài)的問題,實(shí)測在支付的回調(diào)函數(shù)里不能直接調(diào)用數(shù)據(jù)模型的方法,如果有測試成功的同學(xué)可以在評論區(qū)留言進(jìn)行討論
總結(jié)
我們本篇利用一定的篇幅講解了一個完整的支付流程,支付還是比較常見的場景,有了支付功能交易就可以形成一個閉環(huán),還不會的同學(xué)照著教程做一下吧。
到此這篇關(guān)于微信小程序詳解如何實(shí)現(xiàn)付款功能的文章就介紹到這了,更多相關(guān)小程序付款功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS辨別訪問瀏覽器判斷是android還是ios系統(tǒng)
掃描二維碼之后自動分辨出是android還是ios系統(tǒng),因此就要用JS辨別訪問瀏覽器針對于不同的系統(tǒng)進(jìn)行不同的下載,需要的朋友可以參考下2014-08-08微信小程序的宿主環(huán)境實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序的宿主環(huán)境,包括scroll-view 組件的基本使用,text 組件的基本使用及rich-text 組件的基本使用,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10Javascript生成全局唯一標(biāo)識符(GUID,UUID)的方法
本文給大家匯總介紹了5種使用javascript實(shí)現(xiàn)全局唯一標(biāo)識符(GUID,UUID)的方法,非常的全面,有需要的小伙伴可以來參考下2016-02-02Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播詳解
這篇文章主要為大家介紹了Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-11-11JavaScript 動態(tài)三角函數(shù)實(shí)例詳解
本文通過實(shí)例代碼給大家實(shí)例講解了javascript動態(tài)三角函數(shù)知識,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-01-01