微信小程序
项目结构
yunstack-uniapp/src/
├── api/ # API 模块 (3个: auth/file/user)
├── components/ # 通用组件
├── composables/ # 组合式函数
├── pages/ # 页面 (14个)
│ ├── index/ # 首页 (TabBar)
│ ├── login/ # 登录
│ └── mine/ # 我的 (TabBar) + 子页面
├── store/ # Pinia 状态管理
├── static/ # 静态资源
└── utils/ # 工具函数页面清单
| 路径 | 说明 |
|---|---|
/pages/index/index | 首页 (TabBar) |
/pages/login/index | 登录 |
/pages/mine/index | 我的 (TabBar) |
/pages/mine/profile/index | 个人资料 |
/pages/mine/settings/index | 设置 |
/pages/mine/about/index | 关于 |
/pages/mine/faq/index | 常见问题 |
/pages/mine/feedback/index | 意见反馈 |
/pages/mine/settings/theme/index | 主题设置 |
/pages/mine/settings/account/index | 账号设置 |
登录方式
小程序支持多种登录方式:
| 方式 | API | 说明 |
|---|---|---|
| 账号密码 | auth/login | 传统登录 |
| 微信小程序 code | auth/wx/miniapp/code-login | wx.login() 获取 code |
| 微信手机号 | auth/wx/miniapp/phone-login | 手机号授权 |
Store 模块
| Store | 职责 |
|---|---|
user | 多种登录方式、用户信息、登出 |
theme | 主题切换、颜色管理 |
device | 设备列表、设备状态(影子)、在线状态 |
provision | 配网步骤、BLE 设备扫描、WiFi 配置 |
开发命令
bash
cd yunstack-uniapp
pnpm dev:mp-weixin # 微信小程序开发
pnpm build:mp-weixin # 微信小程序构建IoT 业务页面规划 (v0.2)
| 路径 | 页面 | 说明 |
|---|---|---|
/pages/devices/index | 设备列表 | TabBar 中间 Tab |
/pages/devices/detail | 设备控制 | 实时状态 + 控制按钮 |
/pages/devices/telemetry | 数据历史 | 简化版时序图 |
/pages/devices/config | 配网 | BLE/WiFi 配网流程 |
页面详细布局和交互流程见 02.界面与交互设计,技术实现方案见 03.技术实现。
页面交互要点:
- 设备控制: 大按钮 + 实时状态反馈,操作后显示 loading 直到收到 set_reply
- 配网: 扫码 -> BLE 连接 -> 发送 WiFi 凭据 -> 等待设备上线
