天天看點

實戰丨如何制作一個完整的外賣小程式(已開源)

一個完整的小程式demo!

最近微信小店開放了,趕着微信全面開放之前,把自己的小程式開源出來給大家使用~

實戰丨如何制作一個完整的外賣小程式(已開源)
實戰丨如何制作一個完整的外賣小程式(已開源)
實戰丨如何制作一個完整的外賣小程式(已開源)

一開始項目并非基于雲開發而開發的,目前考慮用雲開發,是以,需要在項目中開啟雲開發的相關選項。

首先,在小程式檔案夾中建立 <code>cloud</code> 檔案夾,并在package檔案中配置,建立使用者登入的雲函數并上傳到微信小程式雲中。相關的操作可以參考官方文檔。

我在項目目錄中添加了 <code>cloud</code> 和 <code>miniprogram</code> 兩個目錄,并在 <code>project.config.json</code> 檔案夾進行配置

配置完成後,可以點選控制台中的「雲開發」來開通雲開發。

實戰丨如何制作一個完整的外賣小程式(已開源)

在雲開發的界面中配置,并開通雲開發。

實戰丨如何制作一個完整的外賣小程式(已開源)

雲開發不會自動建立資料庫集合,是以,你需要手動建立集合。分别建立 店鋪表Seller、分類表Category、商品表Food、訂單表Order、位址表Address、使用者表_User。

實戰丨如何制作一個完整的外賣小程式(已開源)

有了資料庫的表後,就可以在代碼中對資料進行操作了。

下方是我進行目錄操作的代碼。

在使用資料庫時,難免要進行聯表查詢,雲開發支援在雲函數側進行聯表查詢,你可以參考我的代碼,來實作聯表查詢的功能。

在小程式的操作中,難免會遇到需要進行圖檔上傳的場景。在進行圖檔上傳時,雲開發提供了友善的雲存儲供我們查詢資料。

在擷取到檔案的本地路徑後,調用 <code>wx.cloud.uploadFile</code> 即可上傳檔案。

作為一個商城,難免會有微信支付相關邏輯的實作。在這種情況下,可以借助雲開發提供的微信支付雲調用功能實作快速的 API 調用和接口的實作。

在使用雲開發提供的微信支付時,需要先執行微信支付的綁定,在雲開發控制台添加相應的商戶号

實戰丨如何制作一個完整的外賣小程式(已開源)

添加後微信會發來通知

實戰丨如何制作一個完整的外賣小程式(已開源)

根據提示,開通賬号即可。

實戰丨如何制作一個完整的外賣小程式(已開源)
如果不綁定,将報“受理關系不存在”的錯誤
實戰丨如何制作一個完整的外賣小程式(已開源)

配置完成後,隻需要在雲函數中調用微信支付的接口,就可以實作相關調用的能力

這裡 <code>functionName: 'pay_cb'</code>指的就是支付成功後,微信支付那側給我的回調資訊,後面我們就用它來更新我們的訂單狀态

調用雲函數後,會獲得微信支付所需要的各種參數,

實戰丨如何制作一個完整的外賣小程式(已開源)

這個時候,就可以在小程式端調用微信支付接口,進行支付,相關代碼可以參考

微信統一下單裡一個pay_cb回調函數,它是一個雲函數,後續微信支付的支付資訊将會發送在這個函數中,相應的,我們需要編寫處理的方法

雲開發體驗下來,優點自不必多說,微信登入與支付原生支援,調用與調試都很友善,特别是不用啟本地服務開發,真的好用;

這個小程式的源碼我已經開源了,你可以通路 Gitee 擷取源碼,自行使用~