如何全棧開發一款團購小程式應用
阿新 • • 發佈:2021-01-20
> 筆者關注雲開發已經很久了,最近動手將之前做的一款團購小程式重構並遷移到了雲開發上,同時將原始碼開源,歡迎感興趣的朋友一起交流。
## 技術選型
**小程式**
- 底層框架: [Taro 3.0 (React)](https://taro-docs.jd.com/taro/docs/README/index.html)
- 介面:[Vant](https://vant-contrib.gitee.io/vant-weapp/#/intro)
- 狀態機:[SWR](https://swr.vercel.app/)
**管理後臺介面**
- 底層框架:React
- 介面:[eui](https://elastic.github.io/eui/#/)
- 狀態機:[SWR](https://swr.vercel.app/)
**服務端**
- [CloudBase 雲開發](https://cloudbase.net/)
目前Taro已經進入了3.x時代,可以讓開發者使用完整的React、Vue等框架進行開發。筆者作為一個重度React使用者自然會在眾多框架中選用Taro(之後會嘗試Kbone)。
因為這次要開發的購物類小程式故而會選用有贊開源的[Vant](https://vant-contrib.gitee.io/vant-weapp/#/intro)控制元件庫。
狀態機(State Machines)方面,選擇了更加輕量的Hook方案。在Hook方案中調研了兩個庫 [react-query](https://react-query.tanstack.com/)與[swr](https://swr.vercel.app/),整體來說swr更加的輕量便捷。
管理端控制元件庫方面,目前國內React體系下絕大多數都會選用[Antd](https://ant.design/)控制元件庫,說實話筆者是一個愛嚐鮮的人,在上一個開源專案(**[ lucky_bilibili_web](https://github.com/nasawz/lucky_bilibili_web)**)中嘗試了微軟開源的[FabricUI](https://developer.microsoft.com/en-us/fluentui#/) 庫。此次又盯上了elastic開源的[EUI](https://elastic.github.io/eui/),用完後感覺非常的經驗!用這套控制元件庫開發一些純工具類的應用實在是太便捷了。
本文末尾會放出一張用工這個控制元件庫做工具類應用的圖[^1],完全是用EUI控制元件組合出來的,大家可以感受一下。
服務端方面,筆者關注serverless很久,早前都是國外的資源很多,另外也很眼饞Google的Firebase。筆者之前開發小程式都是自購伺服器,自建服務端,還需要日常對伺服器運維,費心費力。 現在非常感謝騰訊雲加入到了serverless生態的建設中,使得國內的開發者也能無障礙的使用serverless服務。CloudBase雲開發團隊更是對serverless進行了再包裝,降低了serverless學習的複雜性,做到了開箱即用,一鍵部署。
## 資料庫設計
**商品、介面展示相關表**
![image-20210120104943562](https://md-1256312109.cos.ap-beijing.myqcloud.com/uPic/image-20210120104943562.png)
**使用者、訂單、支付相關表**
![image-20210120105020358](https://md-1256312109.cos.ap-beijing.myqcloud.com/uPic/image-20210120105020358.png)
**管理員相關表**
![image-20210120105051081](https://md-1256312109.cos.ap-beijing.myqcloud.com/uPic/image-20210120105051081.png)
## 關鍵技術點
筆者在開發這塊小程式時也遇到了各種各樣的問題與困難,在社群中查閱了大量資料做了各種測試也都找到了答案,很想一次性的總結都放到這裡,本篇由於篇幅有限,也不想把社群中別人發的東西再重複的發一邊,這裡先已原始碼標註的形式做總結 **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
```
以上便是關鍵的一些技術點在原始碼裡的標註了。
## 一鍵部署
最後歡迎大家嘗試一鍵部署本專案到雲開發上。
部署時會用到不少的環境變數,關於環境變數的獲取請參考[這篇文章](https://nice-9goo8zpofac7bee9-1304765945.tcloudbaseapp.com/docs/install/environment_help.html)。
如果想小程式可用,雲開發的環境必須是有小程式開通的雲開發環境。
如果部署失敗的話還請檢查開通按量付費模式是否已經開通。
當準備好各個變數引數後點擊下邊的按鈕一鍵部署吧~
**管理端**:[![](https://md-1256312109.cos.ap-beijing.myqcloud.com/uPic/67f5a389f1ac6f3b4d04c7256438e44f.svg)](https://console.cloud.tencent.com/tcb/env/index?action=CreateAndDeployCloudBaseProject&appUrl=https%3A%2F%2Fgithub.com%2Fnasawz%2Fniceup&branch=master)
**小程式:**[![](https://md-1256312109.cos.ap-beijing.myqcloud.com/uPic/67f5a389f1ac6f3b4d04c7256438e44f.svg)](https://console.cloud.tencent.com/tcb/env/index?action=CreateAndDeployCloudBaseProject&appUrl=https%3A%2F%2Fgithub.com%2Fnasawz%2Fniceup&branch=mini)
## 附錄
- [使用者手冊](https://nice-9goo8zpofac7bee9-1304765945.tcloudbaseapp.com/docs/guide/login.html)
- [介面截圖](https://nice-9goo8zpofac7bee9-1304765945.tcloudbaseapp.com/docs/screenshot/manage.html)
- [案例展示](https://nice-9goo8zpofac7bee9-1304765945.tcloudbaseapp.com/docs/showcase.html)
- [程式碼倉庫](https://github.com/nasawz/niceup)
[^1]: 用EUI開發的工具類應用如圖
![image-20210120120859467](https://md-1256312109.cos.ap-beijing.myqcloud.com/uPic/image-20210120120859