如何全棧開發一款團購小程序應用

筆者關注雲開發已經好久了，最近動手將以前作的一款團購小程序重構並遷移到了雲開發上，同時將源碼開源，歡迎感興趣的朋友一塊兒交流。

技術選型

小程序

• 底層框架: Taro 3.0 (React)

• 界面：Vant

• 狀態機：SWR

管理後臺界面

• 底層框架：React
• 界面：eui
• 狀態機：SWR

服務端

• CloudBase 雲開發

目前Taro已經進入了3.x時代，可讓開發者使用完整的React、Vue等框架進行開發。筆者做爲一個重度React使用者天然會在衆多框架中選用Taro(以後會嘗試Kbone)。

由於此次要開發的購物類小程序故而會選用有贊開源的Vant控件庫。

狀態機(State Machines)方面，選擇了更加輕量的Hook方案。在Hook方案中調研了兩個庫 react-query與swr，總體來講swr更加的輕量便捷。

管理端控件庫方面，目前國內React體系下絕大多數都會選用Antd控件庫，說實話筆者是一個愛嚐鮮的人，在上一個開源項目( lucky_bilibili_web)中嘗試了微軟開源的FabricUI 庫。這次又盯上了elastic開源的EUI，用完後感受很是的經驗！用這套控件庫開發一些純工具類的應用實在是太便捷了。

本文末尾會放出一張用工這個控件庫作工具類應用的圖^[1]，徹底是用EUI控件組合出來的，你們能夠感覺一下。

服務端方面，筆者關注serverless好久，早前都是國外的資源不少，另外也很眼饞Google的Firebase。筆者以前開發小程序都是自購服務器，自建服務端，還須要平常對服務器運維，費心費力。 如今很是感謝騰訊雲加入到了serverless生態的建設中，使得國內的開發者也能無障礙的使用serverless服務。CloudBase雲開發團隊更是對serverless進行了再包裝，下降了serverless學習的複雜性，作到了開箱即用，一鍵部署。

數據庫設計

商品、界面展現相關表

用戶、訂單、支付相關表

管理員相關表

關鍵技術點

筆者在開發這塊小程序時也遇到了各類各樣的問題與困難，在社區中查閱了大量資料作了各類測試也都找到了答案，很想一次性的總結都放到這裏，本篇因爲篇幅有限，也不想把社區中別人發的東西再重複的發一邊，這裏先已源碼標註的形式作總結 Talk is cheap,Show me the code。 以後會有一些筆者本身總結的技術實現方案帶上私貨單獨發文。

https://github.com/nasawz/niceup

小程序相關：

在Taro中使用有贊Vant控件庫

參見源碼：

/mini/src/app.config.ts
/mini/config/index.js   //line 51
/mini/config/index.js   //line 16

markdown在小程序中渲染

參見源碼

/mini/src/components/wemark
/mini/config/index.js   //line 74
/mini/src/hooks/useProducts.ts   //line 40
/mini/src/lib/b64.ts
/mini/src/pages/detail/detail.config.ts
/mini/src/pages/detail/detail.tsx   //line 165
/mini/global.d.ts

支付

參見源碼

/mini/src/pages/order/detail/detail.tsx     //line 71

/cloud/functions/pay
/cloud/functions/pay_cb

Taro中使用css in js

參見源碼

/mini/config/index.js   //line 39
/mini/src/conponents/product-list/index.tsx   //line 10
/mini/linaria.config.js
/mini/babel.config.js

自定義Nav與Tabber

參見源碼

/mini/src/app.config.ts    //line 41
/mini/src/app.config.ts    //line 95
/mini/src/components/nav
/mini/src/components/tabbar

CI CD持續集成

參見源碼

/mini/wx_ci.js

管理後臺相關

主題切換

參見源碼

/manage/src/theme/niceup
/manage/src/lib/theme.ts

集成CloudBase

參見源碼

/manage/src/lib/tcb.ts

管理端實現退款

注：小程序雲開發的退款只支持中手機端發起請求，我這裏作了變通，經過HTTP API的形式實現了退款

參見源碼

/manage/src/lib/tcb.ts   //line 18
/manage/src/hook/useOrderMuation.ts   //line 81

/cloud/functions/mini-proxy
/cloud/functions/refund

數據統計分析

參見源碼

/manage/src/routes/index.tsx

/cloud/functions/aggregate-psn
/cloud/functions/aggregate-sales

EUI實現相似antd form的便捷操做

注：這裏是個人私貨啦 在源碼中我專門留下了一個ext的文件夾，並對EUI的表單控件進行了二次封裝。用到的核心庫是rc-field-form，感謝原做者

參見源碼

/manage/src/routes/ext
/manage/src/components/formList
/manage/src/components/formRow
/manage/src/components/formControls

訂閱消息

參見源碼

/cloud/functions/subscribe-message
/manage/src/hook/useMessageMuation.ts

雲開發自定義登陸、自定義權限、初始化數據

參見源碼

/cloudbaserc.json //line 8
/cloudbaserc.json //line 18
/cloudbaserc.json //line 192

/cloud/functions/db-init
/cloud/functions/auth

/manage/src/hook/useUser.ts   //line 33

以上即是關鍵的一些技術點在源碼裏的標註了。

一鍵部署

最後歡迎你們嘗試一鍵部署本項目到雲開發上。

部署時會用到很多的環境變量，關於環境變量的獲取請參考這篇文章。

若是想小程序可用，雲開發的環境必須是有小程序開通的雲開發環境。

若是部署失敗的話還請檢查開通按量付費模式是否已經開通。

當準備好各個變量參數後點擊下邊的按鈕一鍵部署吧～

管理端：

小程序：

附錄

• 用戶手冊
• 界面截圖
• 案例展現
• 代碼倉庫

---

1. 用EUI開發的工具類應用如圖 ↩︎