关于全栈:全栈开发一款团购小程序应用

笔者关注云开发曾经很久了，最近入手将之前做的一款团购小程序重构并迁徙到了云开发上，同时将源码开源，欢送感兴趣的敌人一起交换。

• 代码仓库
• 界面截图
• 案例展现

技术选型

小程序

• 底层框架: 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，用完后感觉十分的教训！用这套控件库开发一些纯工具类的利用切实是太便捷了。

本文开端会放出一张用工这个控件库做工具类利用的图¹，齐全是用 EUI 控件组合进去的，大家能够感受一下。

服务端方面，笔者关注 serverless 很久，早前都是国外的资源很多，另外也很眼馋 Google 的 Firebase。笔者之前开发小程序都是自购服务器，自建服务端，还须要日常对服务器运维，费神费劲。当初非常感谢腾讯云退出到了 serverless 生态的建设中，使得国内的开发者也能无障碍的应用 serverless 服务。CloudBase 云开发团队更是对 serverless 进行了再包装，升高了 serverless 学习的复杂性，做到了开箱即用，一键部署。

数据库设计

商品、界面展现相干表

用户、订单、领取相干表

管理员相干表

关键技术点

笔者在开发这块小程序时也遇到了各种各样的问题与艰难，在社区中查阅了大量材料做了各种测试也都找到了答案，很想一次性的总结都放到这里，本篇因为篇幅无限，也不想把社区中他人发的货色再反复的发一边，这里先已源码标注的模式做总结 Talk is cheap,Show me the code。之后会有一些笔者本人总结的技术实现计划带上私货独自发文。

小程序相干：

在 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 开发的工具类利用如图 ↩