微信小程序詳解如何實(shí)現(xiàn)付款功能
1 支付場(chǎng)景
我們梳理一下支付場(chǎng)景是什么樣子的,首先可以瀏覽商品,然后在商品的詳情頁(yè)里進(jìn)行結(jié)算。結(jié)算的主要目的是生成訂單,訂單生成好之后就可以進(jìn)行支付。
支付其實(shí)是先向微信支付提交一個(gè)在線(xiàn)訂單,訂單提交成功之后就可以調(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ù)源
商品的話(huà)有商品的名稱(chēng)、價(jià)格、詳情,按照設(shè)計(jì)創(chuàng)建商品數(shù)據(jù)源并且建立對(duì)應(yīng)的字段
2.2 訂單數(shù)據(jù)源
訂單的話(huà)有訂單編號(hào),支付金額,是否支付,openid
3 創(chuàng)建連接器
如果我們希望使用微信支付,需要先創(chuàng)建連接器。在控制臺(tái)點(diǎn)擊連接器,點(diǎn)擊新建連接器
選擇微信支付
選擇企業(yè)主體的小程序和商戶(hù)號(hào),就完成了連接器的創(chuàng)建
微信支付一共提供了四個(gè)方法,分別是統(tǒng)一下單、查詢(xún)訂單、關(guān)閉訂單、下載對(duì)賬單
4 創(chuàng)建應(yīng)用
點(diǎn)擊控制臺(tái)的應(yīng)用菜單,點(diǎn)擊新建應(yīng)用,新建自定義應(yīng)用
輸入應(yīng)用的名稱(chē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)方法獲取用戶(hù)的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//傳入用戶(hù)的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)行討論
總結(jié)
我們本篇利用一定的篇幅講解了一個(gè)完整的支付流程,支付還是比較常見(jiàn)的場(chǎng)景,有了支付功能交易就可以形成一個(gè)閉環(huán),還不會(huì)的同學(xué)照著教程做一下吧。
到此這篇關(guān)于微信小程序詳解如何實(shí)現(xiàn)付款功能的文章就介紹到這了,更多相關(guān)小程序付款功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 微信小程序?qū)崿F(xiàn)文章關(guān)注功能詳細(xì)流程
- 微信小程序登錄與注冊(cè)功能的實(shí)現(xiàn)詳解
- 微信小程序訪(fǎng)問(wèn)mysql數(shù)據(jù)庫(kù)流程詳解
- 微信小程序多表聯(lián)合查詢(xún)的實(shí)現(xiàn)詳解
- 微信小程序?qū)崿F(xiàn)分頁(yè)查詢(xún)?cè)斀?/a>
- 微信小程序?qū)崿F(xiàn)頁(yè)面導(dǎo)航與傳參功能詳解
- 微信小程序中的生命周期與生命周期函數(shù)淺析介紹
- 微信小程序全局文件的使用詳解
- 微信小程序數(shù)據(jù)請(qǐng)求的方式和注意事項(xiàng)詳解
相關(guān)文章
簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果
這篇文章主要為大家介紹了簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02JS辨別訪(fǎng)問(wèn)瀏覽器判斷是android還是ios系統(tǒng)
掃描二維碼之后自動(dòng)分辨出是android還是ios系統(tǒng),因此就要用JS辨別訪(fǎng)問(wèn)瀏覽器針對(duì)于不同的系統(tǒng)進(jìn)行不同的下載,需要的朋友可以參考下2014-08-08微信小程序的宿主環(huán)境實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序的宿主環(huán)境,包括scroll-view 組件的基本使用,text 組件的基本使用及rich-text 組件的基本使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10Javascript生成全局唯一標(biāo)識(shí)符(GUID,UUID)的方法
本文給大家匯總介紹了5種使用javascript實(shí)現(xiàn)全局唯一標(biāo)識(shí)符(GUID,UUID)的方法,非常的全面,有需要的小伙伴可以來(lái)參考下2016-02-02JavaScript數(shù)組去重問(wèn)題的深入研究
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重問(wèn)題的相關(guān)資料,一般都是在面試的時(shí)候才會(huì)碰到,一般是要求手寫(xiě)數(shù)組去重方法的代碼,需要的朋友可以參考下2021-10-10Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播詳解
這篇文章主要為大家介紹了Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11JavaScript 動(dòng)態(tài)三角函數(shù)實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家實(shí)例講解了javascript動(dòng)態(tài)三角函數(shù)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-01-01JS實(shí)現(xiàn)滑動(dòng)導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01