> 筆者關注雲開發已經很久了，最近動手將之前做的一款團購小程式重構並遷移到了雲開發上，同時將原始碼開源，歡迎感興趣的朋友一起交流。 ## 技術選型 **小程式** - 底層框架: [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學習的複雜性，做到了開箱即用，一鍵部署。 ## 資料庫設計 **商品、介面展示相關表**  **使用者、訂單、支付相關表**  **管理員相關表**  ## 關鍵技術點 筆者在開發這塊小程式時也遇到了各種各樣的問題與困難，在社群中查閱了大量資料做了各種測試也都找到了答案，很想一次性的總結都放到這裡，本篇由於篇幅有限，也不想把社群中別人發的東西再重複的發一邊，這裡先已原始碼標註的形式做總結 **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://console.cloud.tencent.com/tcb/env/index?action=CreateAndDeployCloudBaseProject&appUrl=https%3A%2F%2Fgithub.com%2Fnasawz%2Fniceup&branch=master) **小程式：**[](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