MyUCSpace - 微信小程序

作者：Sixu Wei reisa@sust.edu.cn

本文档描述了 MyUCSpace 微信小程序的核心架构、功能模块和开发指南。

架构与技术栈

• 框架：微信小程序原生框架
• 样式：WXSS（支持 CSS 变量）
• 组件库：原生组件 + 自定义业务组件
• 工具库：基于 wx.request 封装的 Promise 风格 API 请求器

项目结构

miniapp/
├── assets/           # 静态资源（图标、图片）
├── components/       # 公共自定义组件（如图片上传器、教室选择器）
├── pages/            # 页面视图
│   ├── index/        # 首页（当前借用 / 正在进行的课程）
│   ├── service/      # 服务中心（各业务功能入口）
│   ├── mine/         # 个人中心
│   ├── classroom/    # 教室搜索与详情
│   ├── borrow/       # 教室借用申请与管理
│   ├── repair/       # 报修提交与管理
│   └── login/        # 登录页
├── utils/            # 工具函数（API 封装、校验逻辑）
├── app.js            # 小程序逻辑与全局生命周期
├── app.json          # 全局配置
└── config.js         # 环境与基础 URL 配置

核心功能与机制

1. 静默登录

小程序采用"静默登录"机制以提升用户体验：

• 工作原理：在 app.js 的 onLaunch 生命周期中调用 wx.login 获取 code，将其发送到后端换取 token。
• Promise 协调：globalData.loginPromise 管理异步登录状态。页面在加载数据前通过 await app.globalData.loginPromise 确保身份有效。
• 自动跳转：如果静默登录失败且当前页面不是登录页，系统会自动跳转到登录页。

2. 用户认证

• 微信一键登录：通过微信 OpenID 自动关联后端用户。
• 基于角色的视图：支持多种角色（学生、教师、助教、秘书等），根据用户角色展示不同的功能菜单。

3. 主要业务模块

• 当前任务：首页实时展示当前时间段的教室借用或排课信息。
• 教室搜索：按楼栋和状态筛选可用教室。
• 借用申请：完整的借用流程，包括时间选择（带冲突检测）、用途说明和附件上传。
• 报修系统：支持普通和紧急报修请求，可上传图片。
• 审批流程：秘书和管理员角色可直接在小程序中审批借用请求。

开发与调试

快速开始

1. 在微信开发者工具中打开 miniapp 目录。
2. 将 config.js 中的 baseUrl 更新为你的后端 API 地址。
3. 进入"详情" -> "本地设置" -> 勾选"不校验合法域名"。

配置（config.js）

module.exports = {
  baseUrl: 'http://localhost:8000/api/v1',
  version: '1.0.0'
}

开发规范

• API 调用：始终使用 utils/api.js 中定义的方法，禁止在页面中直接调用 wx.request。
• 页面生命周期：在 onShow 中先 await app.globalData.loginPromise 确保登录状态，再加载业务数据。
• 样式：优先使用 styles/theme.wxss 中定义的颜色变量，保持 UI 一致性。
• 组件化：将可复用的模块（如图片上传器、列表项）抽取到 components 中。