iotsaas/uniapp

IoT智能家居 APP

基于 uni-app + Vue 3 + TypeScript 开发的企业级物联网平台手机客户端。

✨ 核心特性

• 🎨 一次开发，多端发布：H5 / iOS / Android / 微信小程序
• 🌐 多平台设备：涂鸦、Google Home、Amazon Alexa、本地IoT设备统一管理
• ⚡ 智能联动：可视化自动化场景编辑
• 📊 实时数据：设备状态、历史数据可视化
• 🔔 告警推送：多渠道告警通知
• 🏠 场景管理：一键执行预置场景

🏗️ 项目结构

uniapp/
├── src/
│   ├── pages/                # 页面
│   │   ├── index/            # 首页
│   │   ├── login/            # 登录
│   │   ├── device/           # 设备管理
│   │   │   ├── list.vue      # 设备列表
│   │   │   ├── detail.vue    # 设备详情（控制面板）
│   │   │   └── add.vue       # 添加设备（配网）
│   │   ├── rule/             # 联动规则
│   │   │   ├── list.vue      # 规则列表
│   │   │   └── edit.vue      # 规则编辑
│   │   ├── alarm/            # 告警消息
│   │   │   └── list.vue
│   │   └── profile/          # 我的
│   │       ├── profile.vue
│   │       ├── setting.vue
│   │       └── about.vue
│   ├── services/             # 业务服务
│   │   ├── tuyaService.ts    # 涂鸦OpenAPI
│   │   ├── googleHomeService.ts  # Google Home
│   │   ├── alexaService.ts   # Amazon Alexa
│   │   └── deviceService.ts  # 设备统一抽象
│   ├── stores/               # Pinia状态管理
│   │   ├── user.ts
│   │   ├── device.ts
│   │   ├── rule.ts
│   │   └── alarm.ts
│   ├── utils/                # 工具类
│   │   ├── request.ts        # 网络请求
│   │   ├── config.ts         # 全局配置
│   │   ├── tuyaSign.ts       # 涂鸦签名
│   │   └── auth.ts           # 辅助函数
│   ├── static/               # 静态资源
│   │   ├── styles/
│   │   └── tabbar/           # 底部导航图标
│   ├── App.vue
│   ├── main.ts
│   ├── manifest.json         # uni-app配置
│   └── pages.json            # 页面路由
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

🚀 快速开始

环境要求

• Node.js 16+
• HBuilderX （推荐） 或 VSCode
• 微信开发者工具（小程序调试）

安装依赖

cd f:/work/iotsaas/uniapp
npm install

H5 开发

npm run dev:h5
# 访问 http://localhost:9000

微信小程序开发

npm run dev:mp-weixin
# 用微信开发者工具打开 dist/dev/mp-weixin 目录

App 开发（Android/iOS）

推荐使用 HBuilderX 打开项目，运行 → 真机/模拟器。

⚙️ 平台配置

1. 涂鸦智能

1. 在 涂鸦IoT开发平台 创建应用
2. 获取 Client ID 和 Client Secret
3. 修改 src/utils/config.ts：

TUYA: {
  CLIENT_ID: '你的ClientID',
  CLIENT_SECRET: '你的ClientSecret',
  ...
}

2. Google Home

1. 在 Google Cloud Console 创建项目
2. 启用 Smart Device Management API
3. 创建 OAuth 2.0 客户端ID
4. 修改 src/utils/config.ts：

GOOGLE_HOME: {
  CLIENT_ID: '你的ClientID',
  CLIENT_SECRET: '你的ClientSecret',
  ...
}

3. Amazon Alexa

1. 在 Amazon Developer Console 创建 Smart Home Skill
2. 配置 Account Linking（OAuth 2.0）
3. 修改 src/utils/config.ts：

ALEXA: {
  CLIENT_ID: '你的ClientID',
  CLIENT_SECRET: '你的ClientSecret',
  ...
}

📱 功能列表

已实现 ✅

• 多端登录（账号 + 第三方OAuth）
• 设备列表（多平台聚合）
• 设备详情（涂鸦控制面板）
• 设备控制（开关/亮度/色温/颜色/温度/窗帘）
• Wi-Fi配网（EZ/AP/蓝牙模式）
• 联动规则管理
• 告警消息查看
• 第三方账号绑定

待开发 🚧

• Google Home 设备控制（Phase 2）
• Alexa 设备控制（Phase 3）
• 数据可视化图表
• WebSocket实时推送
• 语音控制集成
• Apple HomeKit 原生插件（Phase 4）

🎨 设备类型支持

类型	涂鸦	Google	Alexa
灯（开关/亮度/色温/颜色）	✅	✅	✅
开关/插座	✅	✅	✅
空调/温控	✅	✅	✅
窗帘	✅	✅	✅
门锁	✅	✅	✅
摄像头	✅	✅	✅
传感器	✅	✅	-

🔐 安全说明

• 所有第三方平台的 Client Secret 建议保存在自家后端
• Token 存储使用 uni.storage 加密保存
• 生产环境应启用 HTTPS + 证书校验
• 用户授权应使用 PKCE 流程

📋 开发规范

• 使用 Vue 3 Composition API + <script setup> 语法
• TypeScript 严格模式
• 状态管理统一使用 Pinia
• 样式使用 SCSS，遵循 BEM 命名
• API 请求统一使用 utils/request.ts

🔗 相关项目

• 后端服务 - Spring Boot 微服务
• 管理后台 - Vue 3 桌面端
• Docker 配置 - 基础设施

📄 许可

Copyright © 2026 IoT Platform. All rights reserved.