Skip to content

微信小程序

项目结构

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传统登录
微信小程序 codeauth/wx/miniapp/code-loginwx.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 凭据 -> 等待设备上线