- 线上抢票
- 身份有证
- 志愿报名
- 青春邮约
- 热门活动
- 校园服务 - 天天护跑
- 我的奖品
- 我的活动
- 我的影票
- 影票申诉
- 账号安全
-
完善文档
-
重构优化
-
抽离应用中的实体，优化类型
-
使用 Suspense、ErrorBoundary 处理请求和异常，统一请求格式（useQuery、useMutation）
-
./
├── README.md
├── babel.config.js
├── config
│ ├── dev.js
│ ├── index.jsx
│ ├── prod.js
│ └── upload.js # 小程序 CI
├── global.d.ts
├── package.json
├── project.config.json
├── src
│ ├── app.config.ts
│ ├── app.scss
│ ├── app.tsx
│ ├── common
│ │ ├── components
│ │ ├── constants
│ │ └── helpers
│ ├── index.html
│ ├── modules
│ │ ├── campus
│ │ │ ├── components
│ │ │ ├── pages
│ │ │ │ ├── index
│ │ │ │ ├── safe-run
│ │ │ │ ├── safe-run-away
│ │ │ │ ├── safe-run-history
│ │ │ │ └── shark-it
│ │ │ └── services
│ │ ├── feedback
│ │ │ └── pages
│ │ │ ├── index
│ │ │ └── result
│ │ ├── id
│ │ │ └── pages
│ │ │ ├── apply
│ │ │ └── index
│ │ ├── index
│ │ │ └── pages
│ │ │ ├── activity-detail
│ │ │ ├── bind
│ │ │ └── home
│ │ ├── my
│ │ │ └── pages
│ │ │ ├── index
│ │ │ ├── my-activity
│ │ │ └── my-reward
│ │ ├── ticket
│ │ │ └── pages
│ │ │ ├── my-ticket
│ │ │ └── rob-ticket
│ │ ├── volunteer
│ │ │ └── pages
│ │ │ ├── bind
│ │ │ ├── detail
│ │ │ └── index
│ │ └── webview
│ ├── static
│ │ ├── images
│ │ └── styles
│ └── stores
│ ├── popup.tsx # 命令式 popup 组件
│ └── user.tsx # 用户信息
├── tsconfig.json
└── yarn.lock本项目其实是多个应用的整合，每个应用有一个或多个页面，所以在 modules 目录下放置应用模块，模块下分为 pages、components 等放置专用于该模块的页面和组件等，在 app.config.ts 中可通过 resolvePage 函数获得页面路径
common 目录放置高可复用代码
common复用、modules业务、static静态资源 目前项目还比较简单，modules 目录下的每个业务模块都只有 pages、components、services，以后复杂了可能有一些只是与业务相关的，其他模块不能复用的 helpers 等，都可以放到 modules 相关模块的目录下 common 目录下的可复用代码因为是所有人都有可能会使用到的，所以要严格使用 TypeScript 编写，并使用 JSDoc 注释写好描述。modules 目录下仅 pages 目录下的代码可以使用 JavaScript 编写，因为 components、services、helpers 仍然是模块下可复用的 不要为了抽象而抽象，抽象并不一定会使得代码可读性更高、更好维护，本项目是需要长期维护的，可读性可维护性是第一考虑！
-
遵循 Angular Commit 规范，为了方便编写遵循规范的 commit message，我们使用 Commitizen 进行 git commit。凡是用到 git commit 命令，一律改为使用 git cz
-
分为 4 种分支进行开发和发布等：
-
master：主分支。对项目进行 tag 或发布版本等操作
-
develop：开发分支。从该分支检出其他临时分支，临时分支开发完成后推送到远端，并发起 PR，团队成员进行 code review 后由 Leader 进行合并，merge 回 develop 分支
-
feat-*：功能分支。用于新功能开发，完成后将其删除，属于临时性分支
-
fix-*：补丁分支。用作 bug 修复，完成后将其删除，属于临时性分支
-
refactor-*：重构分支。完成后将其删除，属于临时性分支
-
chore-*：杂项分支。lint 工具配置，工程化配置，编写 docs 等。完成后将其删除，属于临时性分支
-
-
代码编写要保证在 eslint 通过后再进行 commit
-
大部分页面底色都是
#F6F6F9，所以全局样式page设置了min-height和background-color，有个别页面底色是白色需要自己设置样式 -
由于编写时自定义 navbar 使用的库
taro-navigationbar并没有支持 taro3，所以自己 fork 了一份发布到 npm 上，名为taro3-navigationbar，等之后作者支持了可以更换回去。同时编译警告chunk common [mini-css-extract-plugin] Conflicting order between: ...因为 scss 引入顺序问题冲突，并无大碍，目前 taro 官方 issue 也有提到，之后再完善 -
请求库使用了 react-query，由于 taro 在小程序环境下 webpack providePlugin 跳过 .mjs 文件，导致 react-query 所需要的全局变量的丢失，所以需要
import { useQuery } from "react-query/dist/react-query.production.min";
这样引入，同时在
global.d.ts文件导入原来的类型声明declare module "react-query/dist/react-query.production.min" { export * from "react-query"; }
-
popup 通过 context 进行封装，可以通过命令式调用弹出
const Popup = useContainer(PopupContext); // ... const hide = Popup.show({ title: "登录失败", detail: "已绑定，不能重复绑定", }); setTimeout(() => hide(), 1500);
以此弹出的 Popup 组件的状态都是在
stores/popup.ts中的，是同一个，但组件需要在每个用到的页面声明<Popup.Comp />
这是因为 taro 通过 App 的 props.children 注入页面，类似于伪代码
<App children={<page>{loadPage(globalConfig.pages[0])}</page>} />而 page 之外的会忽略，所以不能只声明一个 Popup 组件，需要在每个页面都声明一遍 -
由于小程序访问元素位置为异步 API，因此小程序中无法使用 react-transition-group，volunteer/picker 的过渡动画手写实现，也可以考虑 react-spring
-
Text 组件的 userSelect 是让文本可复制，小程序在基础库 2.12.1 实现，目前 Taro 还没有跟进，跟 selectable 一起写上，保证兼容
-
首页近期活动通过 webview 接入的线上活动 h5，需要在进入页面后发一个报名的请求，参数带活动名、活动日期、活动组织，详见接口文档。将报名放到 h5 是因为需要 h5 进入活动的也可以报名，不仅是从小程序进入可以报名；带这三个参数而不是带 id 是因为带 id 需要后台发布线上活动后查出来 id 在添加到 h5 页面上，而这三个参数也可以作为唯一标识，同时可以在发布前告诉前端并添加到 h5 页面上，流程更方便合理
-
empty 缺省页（具有有标题 和 无标题 两种状态） 引用：我的奖品 我的活动
-
placeholder 加载/错误 组件 （具有 loading 和 error 两种状态） 引用：每个功能加载时 ，借助 react-query 提供的请求状态 从而显示
-
navback 上文已经提到
-
popup （位于页面居中的提示信息弹窗）
-
bottomPop (从页面底部弹出的需要用户进行下一步操作的信息弹窗) 引用：护跑领包 ; 影票验票