docs: 添加项目文档"静待花开-活动小助手"
添加完整的项目文档,包含项目概述、技术栈、项目结构、核心功能模块、API接口设计、状态管理、UI组件库、开发规范、项目配置、工具函数库、构建部署说明、注意事项和页面实现细节等内容
Showing
1 changed file
with
376 additions
and
0 deletions
项目文档.md
0 → 100644
| 1 | +# 静待花开-活动小助手 项目文档 | ||
| 2 | + | ||
| 3 | +## 项目概述 | ||
| 4 | + | ||
| 5 | +**项目名称**: 静待花开-活动小助手 (swx-weapp) | ||
| 6 | +**项目版本**: 1.0.0 | ||
| 7 | +**项目类型**: 微信小程序 | ||
| 8 | +**开发框架**: Taro 3.4.10 + Vue 3 + Vant Weapp | ||
| 9 | +**Node.js版本**: 16.14.2 | ||
| 10 | + | ||
| 11 | +## 技术栈 | ||
| 12 | + | ||
| 13 | +### 核心框架 | ||
| 14 | +- **Taro**: 3.4.10 (多端统一开发框架) | ||
| 15 | +- **Vue**: 3.2.24 (使用 Composition API) | ||
| 16 | +- **Pinia**: 2.0.6 (状态管理) | ||
| 17 | +- **Vant Weapp**: 1.11.7 (UI组件库) | ||
| 18 | + | ||
| 19 | +### 开发工具 | ||
| 20 | +- **构建工具**: Webpack + Babel | ||
| 21 | +- **样式预处理**: Less | ||
| 22 | +- **代码规范**: ESLint + Stylelint | ||
| 23 | +- **包管理**: npm/pnpm | ||
| 24 | +- **跨平台环境变量**: cross-env | ||
| 25 | + | ||
| 26 | +### 网络请求 | ||
| 27 | +- **HTTP客户端**: axios-miniprogram 2.0.0-rc-2 | ||
| 28 | +- **数据序列化**: qs 6.11.0 | ||
| 29 | +- **时间处理**: dayjs 1.11.5 | ||
| 30 | + | ||
| 31 | +## 项目结构 | ||
| 32 | + | ||
| 33 | +``` | ||
| 34 | +src/ | ||
| 35 | +├── api/ # API接口层 | ||
| 36 | +│ ├── Activity/ # 活动相关接口 | ||
| 37 | +│ ├── Host/ # 主办方接口 | ||
| 38 | +│ ├── Member/ # 成员接口 | ||
| 39 | +│ ├── Partner/ # 合作伙伴接口 | ||
| 40 | +│ ├── Reg/ # 注册接口 | ||
| 41 | +│ ├── User/ # 用户接口 | ||
| 42 | +│ ├── wx/ # 微信相关接口 | ||
| 43 | +│ ├── common.js # 通用接口 | ||
| 44 | +│ └── fn.js # 接口封装函数 | ||
| 45 | +├── assets/ # 静态资源 | ||
| 46 | +│ ├── images/ # 图片资源 | ||
| 47 | +│ └── styles/ # 全局样式 | ||
| 48 | +├── components/ # 公共组件 | ||
| 49 | +│ ├── vant-weapp/ # Vant组件库 | ||
| 50 | +│ ├── activity-bar.vue # 活动栏组件 | ||
| 51 | +│ ├── activity-card.vue # 活动卡片组件 | ||
| 52 | +│ ├── navbar.vue # 底部导航栏 | ||
| 53 | +│ └── ... | ||
| 54 | +├── pages/ # 页面目录 | ||
| 55 | +│ ├── index/ # 首页 | ||
| 56 | +│ ├── createActivity/ # 创建活动 | ||
| 57 | +│ ├── activityDetail/ # 活动详情 | ||
| 58 | +│ ├── joinActivity/ # 参加活动 | ||
| 59 | +│ ├── userInfo/ # 用户信息 | ||
| 60 | +│ ├── auth/ # 授权页面 | ||
| 61 | +│ ├── my/ # 我的页面 | ||
| 62 | +│ └── ... | ||
| 63 | +├── stores/ # 状态管理 | ||
| 64 | +│ ├── counter.js # 计数器状态 | ||
| 65 | +│ ├── host.js # 主办方状态 | ||
| 66 | +│ └── router.js # 路由状态 | ||
| 67 | +├── utils/ # 工具函数 | ||
| 68 | +│ ├── config.js # 配置文件 | ||
| 69 | +│ ├── request.js # 网络请求封装 | ||
| 70 | +│ ├── tools.js # 工具函数 | ||
| 71 | +│ └── ... | ||
| 72 | +├── app.config.js # 应用配置 | ||
| 73 | +├── app.js # 应用入口 | ||
| 74 | +└── app.less # 全局样式 | ||
| 75 | +``` | ||
| 76 | + | ||
| 77 | +## 核心功能模块 | ||
| 78 | + | ||
| 79 | +### 1. 用户认证模块 | ||
| 80 | +- **授权页面**: `/pages/auth/index` | ||
| 81 | +- **功能**: 微信授权登录,获取用户信息 | ||
| 82 | +- **权限控制**: 未授权用户自动跳转到授权页面 | ||
| 83 | + | ||
| 84 | +### 2. 活动管理模块 | ||
| 85 | +- **首页**: 推荐活动展示,轮播图 | ||
| 86 | +- **创建活动**: `/pages/createActivity/index` | ||
| 87 | +- **活动详情**: `/pages/activityDetail/index` | ||
| 88 | +- **参加活动**: `/pages/joinActivity/index` | ||
| 89 | +- **我的活动**: 创建的活动和参加的活动列表 | ||
| 90 | + | ||
| 91 | +### 3. 用户管理模块 | ||
| 92 | +- **用户信息**: `/pages/userInfo/index` | ||
| 93 | +- **用户编辑**: `/pages/editInfo/index` | ||
| 94 | +- **用户搜索**: `/pages/userSearch/index` | ||
| 95 | + | ||
| 96 | +### 4. 项目管理模块 | ||
| 97 | +- **项目管理**: `/pages/projectManage/index` | ||
| 98 | +- **创建项目**: `/pages/createProject/index` | ||
| 99 | +- **编辑项目**: `/pages/editProject/index` | ||
| 100 | + | ||
| 101 | +## API接口设计 | ||
| 102 | + | ||
| 103 | +### 基础配置 | ||
| 104 | +- **服务器地址**: `https://oa.onwall.cn` | ||
| 105 | +- **请求格式**: RESTful API | ||
| 106 | +- **参数标识**: `f=swx` | ||
| 107 | +- **超时时间**: 5000ms | ||
| 108 | + | ||
| 109 | +### 主要接口模块 | ||
| 110 | + | ||
| 111 | +#### 活动接口 (Activity) | ||
| 112 | +- `activity_join_list`: 我加入的活动列表 | ||
| 113 | +- `activity_add_list`: 我创建的活动列表 | ||
| 114 | +- `activity_copy`: 复制活动 | ||
| 115 | +- `activity_end`: 结束活动 | ||
| 116 | +- `activity_del`: 删除活动 | ||
| 117 | +- `activity_info_qrcode`: 生成小程序码 | ||
| 118 | + | ||
| 119 | +#### 用户接口 (User) | ||
| 120 | +- `user_info`: 获取用户信息 | ||
| 121 | +- `user_edit`: 修改用户信息 | ||
| 122 | + | ||
| 123 | +#### 通用接口 (Common) | ||
| 124 | +- `sms`: 发送验证码 | ||
| 125 | +- `upload`: 获取七牛云上传token | ||
| 126 | +- `save_file`: 保存文件 | ||
| 127 | + | ||
| 128 | +## 状态管理 | ||
| 129 | + | ||
| 130 | +### Pinia Store | ||
| 131 | +- **router.js**: 路由状态管理,缓存未授权访问的页面 | ||
| 132 | +- **host.js**: 主办方相关状态 | ||
| 133 | +- **counter.js**: 计数器状态 | ||
| 134 | + | ||
| 135 | +## UI组件库 | ||
| 136 | + | ||
| 137 | +### Vant Weapp 组件 | ||
| 138 | +已配置的组件包括: | ||
| 139 | +- 基础组件: button, icon, loading, info | ||
| 140 | +- 表单组件: field, cell, picker, stepper, uploader, switch, radio, checkbox | ||
| 141 | +- 反馈组件: toast, dialog, action-sheet, share-sheet | ||
| 142 | +- 展示组件: image, tag, skeleton, empty | ||
| 143 | +- 导航组件: tab, tabs, sticky | ||
| 144 | +- 布局组件: col, row, popup, overlay | ||
| 145 | + | ||
| 146 | +### 自定义组件 | ||
| 147 | +- **navbar.vue**: 底部导航栏 (首页/创建/我的) | ||
| 148 | +- **activity-card.vue**: 活动卡片展示 | ||
| 149 | +- **activity-bar.vue**: 活动栏组件 | ||
| 150 | + | ||
| 151 | +## 开发规范 | ||
| 152 | + | ||
| 153 | +### 代码规范 | ||
| 154 | +- 使用 Vue 3 Composition API | ||
| 155 | +- 使用 `<script setup>` 语法糖 | ||
| 156 | +- 样式使用 Less 预处理器 | ||
| 157 | +- 遵循 ESLint 代码规范 | ||
| 158 | + | ||
| 159 | +### 文件命名 | ||
| 160 | +- 页面文件: 小写字母 + 连字符 | ||
| 161 | +- 组件文件: 小写字母 + 连字符 | ||
| 162 | +- 工具文件: 小写字母 + 连字符 | ||
| 163 | + | ||
| 164 | +### 注释规范 | ||
| 165 | +- 文件头部包含作者、日期、描述信息 | ||
| 166 | +- 函数使用 JSDoc 风格注释 | ||
| 167 | +- 重要逻辑添加行内注释 | ||
| 168 | + | ||
| 169 | +## 项目配置详解 | ||
| 170 | + | ||
| 171 | +### Taro 配置 (config/index.js) | ||
| 172 | +- **设计稿宽度**: 750px | ||
| 173 | +- **设备适配比例**: 支持 640/750/828 多种设备 | ||
| 174 | +- **路径别名配置**: | ||
| 175 | + - `@/utils`: 工具函数目录 | ||
| 176 | + - `@/components`: 组件目录 | ||
| 177 | + - `@/images`: 图片资源目录 | ||
| 178 | + - `@/api`: API接口目录 | ||
| 179 | + - `@/stores`: 状态管理目录 | ||
| 180 | + | ||
| 181 | +### 插件配置 | ||
| 182 | +- **taro-plugin-pinia**: Pinia 状态管理支持 | ||
| 183 | +- **@tarojs/plugin-framework-vue3**: Vue3 框架支持 | ||
| 184 | +- **@tarojs/plugin-html**: HTML 标签支持 | ||
| 185 | +- **@tarojs/plugin-inject**: 第三方组件注入 | ||
| 186 | +- **tarojs-plugin-platform-miniprogram**: 自定义 wxml 支持 | ||
| 187 | + | ||
| 188 | +### 样式处理 | ||
| 189 | +- **pxtransform**: px 转 rpx,排除 van- 前缀组件 | ||
| 190 | +- **url处理**: 图片资源转换,限制 1024 字节 | ||
| 191 | +- **CSS Modules**: 默认关闭 | ||
| 192 | + | ||
| 193 | +## 工具函数库 (utils/tools.js) | ||
| 194 | + | ||
| 195 | +### 时间处理 | ||
| 196 | +- `formatDate(date)`: 格式化时间为 YYYY-MM-DD HH:mm | ||
| 197 | +- 使用 moment.js 进行时间处理 | ||
| 198 | + | ||
| 199 | +### 平台检测 | ||
| 200 | +- `wxInfo()`: 检测浏览器平台信息 | ||
| 201 | + - isAndroid: 安卓平台检测 | ||
| 202 | + - isiOS: iOS平台检测 | ||
| 203 | + - isWx: 微信环境检测 | ||
| 204 | + - isWxPc: PC端微信检测 | ||
| 205 | + | ||
| 206 | +### 字符串工具 | ||
| 207 | +- `strExist(array, str)`: 检查字符串是否存在于数组中 | ||
| 208 | +- `parseQueryString(url)`: 解析URL查询参数 | ||
| 209 | +- `randomId(n)`: 生成随机ID | ||
| 210 | + | ||
| 211 | +## 构建和部署 | ||
| 212 | + | ||
| 213 | +### 开发环境 | ||
| 214 | +```bash | ||
| 215 | +# 切换Node.js版本 | ||
| 216 | +nvm use 16.14.2 | ||
| 217 | + | ||
| 218 | +# 安装依赖 | ||
| 219 | +npm install | ||
| 220 | + | ||
| 221 | +# 启动微信小程序开发 | ||
| 222 | +npm run dev:weapp | ||
| 223 | +``` | ||
| 224 | + | ||
| 225 | +### 生产构建 | ||
| 226 | +```bash | ||
| 227 | +# 构建微信小程序 | ||
| 228 | +npm run build:weapp | ||
| 229 | +``` | ||
| 230 | + | ||
| 231 | +### 支持平台 | ||
| 232 | +- 微信小程序 (主要) | ||
| 233 | +- 支付宝小程序 | ||
| 234 | +- 百度小程序 | ||
| 235 | +- 字节跳动小程序 | ||
| 236 | +- QQ小程序 | ||
| 237 | +- H5 | ||
| 238 | +- React Native | ||
| 239 | + | ||
| 240 | +## 注意事项 | ||
| 241 | + | ||
| 242 | +### 开发环境要求 | ||
| 243 | +- Node.js 版本必须使用 16.14.2 | ||
| 244 | +- 建议使用 nvm 管理 Node.js 版本 | ||
| 245 | +- 项目较老,可能存在依赖兼容性问题 | ||
| 246 | + | ||
| 247 | +### 已知问题 | ||
| 248 | +- 需要更新 browserslist 配置 | ||
| 249 | +- 部分依赖版本较老,升级需谨慎 | ||
| 250 | +- OpenSSL 兼容性问题,需使用指定 Node.js 版本 | ||
| 251 | + | ||
| 252 | +### 开发建议 | ||
| 253 | +1. 严格按照现有代码风格开发 | ||
| 254 | +2. 新增 Vant 组件需在 `vantComponentConf.js` 中配置 | ||
| 255 | +3. API 接口统一使用封装的 `fn` 函数处理 | ||
| 256 | +4. 页面路由需在 `app.config.js` 中注册 | ||
| 257 | +5. 状态管理优先使用 Pinia | ||
| 258 | +6. 样式单位使用 rem,适配小程序 | ||
| 259 | +7. 图片上传使用七牛云存储 | ||
| 260 | +8. 富文本编辑使用自定义 `activity-editor` 组件 | ||
| 261 | +9. 表单验证遵循现有的验证规则 | ||
| 262 | +10. 错误处理统一使用 Toast 提示 | ||
| 263 | + | ||
| 264 | +## 页面实现细节 | ||
| 265 | + | ||
| 266 | +### 创建活动页面 (/pages/createActivity/index.vue) | ||
| 267 | +- **功能**: 创建新活动,包含主办方选择、活动信息填写、封面上传等 | ||
| 268 | +- **关键组件**: | ||
| 269 | + - `van-field`: 表单输入组件 | ||
| 270 | + - `van-uploader`: 图片上传组件 | ||
| 271 | + - `activity-editor`: 富文本编辑器 | ||
| 272 | +- **技术特点**: | ||
| 273 | + - 支持图片上传到七牛云 | ||
| 274 | + - 动态表单字段配置 | ||
| 275 | + - 富文本内容编辑 | ||
| 276 | + - 表单验证和提交 | ||
| 277 | + | ||
| 278 | +### 首页 (/pages/index/index.vue) | ||
| 279 | +- **功能**: 展示推荐活动,轮播图展示 | ||
| 280 | +- **关键组件**: | ||
| 281 | + - `swiper`: 轮播图组件 | ||
| 282 | + - `activity-card`: 活动卡片组件 | ||
| 283 | + - `scroll-view`: 滚动加载 | ||
| 284 | +- **技术特点**: | ||
| 285 | + - 无限滚动加载 | ||
| 286 | + - 缺省页面处理 | ||
| 287 | + - 活动卡片点击跳转 | ||
| 288 | + | ||
| 289 | +### 授权页面 (/pages/auth/index.vue) | ||
| 290 | +- **功能**: 微信授权登录 | ||
| 291 | +- **技术实现**: | ||
| 292 | + - 使用 `Taro.login()` 获取授权码 | ||
| 293 | + - 发送到服务器换取 sessionid | ||
| 294 | + - 自动跳转到目标页面 | ||
| 295 | + | ||
| 296 | +## 网络请求封装 | ||
| 297 | + | ||
| 298 | +### 请求拦截器 | ||
| 299 | +```javascript | ||
| 300 | +// 请求拦截器配置 | ||
| 301 | +service.interceptors.request.use( | ||
| 302 | + config => { | ||
| 303 | + // POST 请求数据序列化(排除上传接口) | ||
| 304 | + config.data = config.method === 'post' && | ||
| 305 | + !strExist(['a=upload', 'upload.qiniup.com'], config.url) | ||
| 306 | + ? qs.stringify(config.data) : config.data; | ||
| 307 | + return config | ||
| 308 | + } | ||
| 309 | +) | ||
| 310 | +``` | ||
| 311 | + | ||
| 312 | +### 响应处理 | ||
| 313 | +- 统一错误处理和 Toast 提示 | ||
| 314 | +- 自动处理授权失效跳转 | ||
| 315 | +- 支持七牛云上传响应格式 | ||
| 316 | + | ||
| 317 | +## 业务流程 | ||
| 318 | + | ||
| 319 | +### 用户授权流程 | ||
| 320 | +1. 用户首次进入小程序 | ||
| 321 | +2. 检查是否已授权 (sessionid) | ||
| 322 | +3. 未授权自动跳转授权页面 (`/pages/auth/index`) | ||
| 323 | +4. 调用 `Taro.login()` 获取 code | ||
| 324 | +5. 发送 code 到服务器获取 openid | ||
| 325 | +6. 服务器返回 sessionid,保存到本地存储 | ||
| 326 | +7. 授权成功后跳转到缓存的目标页面 | ||
| 327 | + | ||
| 328 | +### 授权技术实现 | ||
| 329 | +```javascript | ||
| 330 | +// 授权登录核心代码 | ||
| 331 | +Taro.login({ | ||
| 332 | + success: function (res) { | ||
| 333 | + if (res.code) { | ||
| 334 | + request.post('/srv/?a=openid', { | ||
| 335 | + code: res.code | ||
| 336 | + }).then(res => { | ||
| 337 | + if (res.data.code) { | ||
| 338 | + // 保存 sessionid | ||
| 339 | + wx.setStorageSync("sessionid", res.cookies[0]); | ||
| 340 | + // 跳转到目标页面 | ||
| 341 | + } | ||
| 342 | + }) | ||
| 343 | + } | ||
| 344 | + } | ||
| 345 | +}) | ||
| 346 | +``` | ||
| 347 | + | ||
| 348 | +### 活动参与流程 | ||
| 349 | +1. 首页浏览推荐活动 | ||
| 350 | +2. 点击活动卡片查看详情 | ||
| 351 | +3. 填写参与信息 | ||
| 352 | +4. 提交参与申请 | ||
| 353 | +5. 查看参与状态 | ||
| 354 | + | ||
| 355 | +## 维护和扩展 | ||
| 356 | + | ||
| 357 | +### 添加新页面 | ||
| 358 | +1. 在 `src/pages/` 下创建页面目录 | ||
| 359 | +2. 在 `app.config.js` 中注册路由 | ||
| 360 | +3. 如需分包,在 `subpackages` 中配置 | ||
| 361 | + | ||
| 362 | +### 添加新接口 | ||
| 363 | +1. 在对应的 API 模块中定义接口 | ||
| 364 | +2. 使用统一的 `fn` 函数封装 | ||
| 365 | +3. 添加必要的错误处理 | ||
| 366 | + | ||
| 367 | +### 添加新组件 | ||
| 368 | +1. 在 `src/components/` 下创建组件 | ||
| 369 | +2. 如使用新的 Vant 组件,需在配置文件中添加 | ||
| 370 | +3. 遵循现有的组件开发规范 | ||
| 371 | + | ||
| 372 | +--- | ||
| 373 | + | ||
| 374 | +**文档更新日期**: 2024年12月 | ||
| 375 | +**维护人员**: 开发团队 | ||
| 376 | +**联系方式**: hookehuyr@gmail.com | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment