hookehuyr

docs: 添加项目文档"静待花开-活动小助手"

添加完整的项目文档,包含项目概述、技术栈、项目结构、核心功能模块、API接口设计、状态管理、UI组件库、开发规范、项目配置、工具函数库、构建部署说明、注意事项和页面实现细节等内容
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