209 lines
7.3 KiB
Markdown
209 lines
7.3 KiB
Markdown
# 米家智能家居 - 课程设计项目
|
||
|
||
**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业**
|
||
|
||
基于纯HTML、CSS和JavaScript开发的米家App界面仿制项目，采用模块化设计和响应式布局。
|
||
|
||
## 🏗️ 项目架构
|
||
|
||
### 核心技术栈
|
||
- **HTML5**: 语义化标签，良好的页面结构
|
||
- **CSS3**: Flexbox/Grid布局，CSS变量，动画过渡
|
||
- **JavaScript ES6+**: 模块化代码，事件驱动，DOM操作
|
||
|
||
### 📱 页面模块
|
||
|
||
#### 核心模块 (底部导航栏)
|
||
- **index.html** - 米家首页：设备控制中心，房间切换，环境监测
|
||
- **smart.html** - 智能页面：设备管理，日志查看
|
||
- **product.html** - 产品页面：产品展示，分类浏览
|
||
- **mall.html** - 商城页面：嵌入小米官方商城
|
||
- **profile.html** - 个人中心：用户信息，功能入口
|
||
|
||
#### 功能子页面
|
||
- **notifications.html** - 通知中心：消息管理，状态更新
|
||
- **environment-settings.html** - 环境设置：分区域监测，数据展示
|
||
- **scene.html** - 智能场景：场景管理，自动化控制
|
||
- **user-profile.html** - 个人资料：用户信息编辑
|
||
- **mijiazhongce.html** - 米家众测：产品试用申请
|
||
- **log.html** - 设备日志：开关记录，历史数据
|
||
- **settings.html** - 设置页面：应用配置
|
||
- **all-products.html** - 全部产品：产品目录
|
||
- **product-encyclopedia.html** - 产品百科：产品知识
|
||
- **whole-house-smart.html** - 全屋智能：智能解决方案
|
||
|
||
## 💻 核心代码解释
|
||
|
||
### JavaScript 主要功能 (scripts/main.js)
|
||
|
||
#### 1. 页面切换系统
|
||
```javascript
|
||
function showPage(pageId) {
|
||
// 隐藏所有页面，显示目标页面
|
||
const pages = document.querySelectorAll('.container');
|
||
pages.forEach(page => page.classList.add('hidden'));
|
||
document.getElementById(pageId)?.classList.remove('hidden');
|
||
updateBottomNav(pageId);
|
||
}
|
||
```
|
||
|
||
#### 2. 设备控制逻辑
|
||
```javascript
|
||
function toggleDevice(deviceElement) {
|
||
deviceElement.classList.toggle('active');
|
||
// 模拟设备状态切换，更新UI显示
|
||
const statusElement = deviceElement.querySelector('.device-status');
|
||
// 状态更新逻辑...
|
||
}
|
||
```
|
||
|
||
#### 3. 实时数据更新
|
||
```javascript
|
||
// 每30秒更新传感器数据
|
||
setInterval(updateSensorData, 30000);
|
||
function updateSensorData() {
|
||
// 模拟温湿度数据变化
|
||
const newTemp = (currentTemp + (Math.random() - 0.5) * 2).toFixed(1);
|
||
}
|
||
```
|
||
|
||
### CSS 样式架构 (styles/)
|
||
|
||
#### 1. 全局样式 (common.css)
|
||
```css
|
||
/* 移动端优先的响应式设计 */
|
||
.container {
|
||
max-width: 414px;
|
||
margin: 0 auto;
|
||
min-height: 100vh;
|
||
padding-bottom: 80px;
|
||
}
|
||
```
|
||
|
||
#### 2. 组件化样式
|
||
- **设备卡片**: 统一的卡片样式，支持状态切换
|
||
- **底部导航**: 固定定位，支持页面切换
|
||
- **渐变背景**: CSS变量实现主题色彩
|
||
|
||
### HTML 结构设计
|
||
|
||
#### 1. 语义化标签
|
||
- 使用 `<main>`, `<section>`, `<article>` 等语义化标签
|
||
- 良好的可访问性支持
|
||
|
||
#### 2. 模块化组件
|
||
- 设备卡片组件复用
|
||
- 导航组件统一管理
|
||
- 页面容器标准化
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
project-fin-takeaway/
|
||
├── index.html # 米家首页 - 设备控制中心
|
||
├── home.html # 备用首页文件
|
||
├── smart.html # 智能页面
|
||
├── product.html # 产品页面
|
||
├── mall.html # 商城页面
|
||
├── profile.html # 个人中心页面
|
||
├── scene.html # 智能场景页面
|
||
├── mijiazhongce.html # 米家众测页面
|
||
├── user-profile.html # 个人资料详情页面
|
||
├── notifications.html # 通知中心页面
|
||
├── environment-settings.html # 环境设置页面
|
||
├── settings.html # 设置页面
|
||
├── all-products.html # 全部产品页面
|
||
├── product-encyclopedia.html # 产品百科页面
|
||
├── whole-house-smart.html # 全屋智能页面
|
||
├── log.html # 设备开关日志页面
|
||
├── styles/ # 样式文件目录
|
||
│ ├── common.css # 公共样式
|
||
│ ├── main.css # 主样式文件
|
||
│ ├── home.css # 首页样式
|
||
│ ├── smart.css # 智能页面样式
|
||
│ ├── product.css # 产品页面样式
|
||
│ ├── mall.css # 商城页面样式
|
||
│ ├── profile.css # 个人中心样式
|
||
│ ├── scene.css # 智能场景样式
|
||
│ ├── mijiazhongce.css # 米家众测样式
|
||
│ ├── user-profile.css # 个人资料样式
|
||
│ ├── notifications.css # 通知中心样式
|
||
│ ├── environment-settings.css # 环境设置样式
|
||
│ ├── settings.css # 设置页面样式
|
||
│ ├── all-products.css # 全部产品样式
|
||
│ ├── product-encyclopedia.css # 产品百科样式
|
||
│ ├── whole-house-smart.css # 全屋智能样式
|
||
│ └── log.css # 日志页面样式
|
||
├── scripts/ # JavaScript文件目录
|
||
│ └── main.js # 主JavaScript文件
|
||
├── images/ # 图片资源目录
|
||
│ └── profile/ # 个人中心相关图片
|
||
│ ├── mijiazhongce/ # 米家众测图片
|
||
│ └── zhinengchangjing/ # 智能场景图片
|
||
├── .gitignore # Git忽略文件配置
|
||
└── README.md # 项目说明文档
|
||
```
|
||
|
||
## 🚀 快速启动
|
||
|
||
```bash
|
||
# 使用Python启动本地服务器
|
||
python3 -m http.server 8000
|
||
|
||
# 使用Node.js http-server
|
||
npx http-server
|
||
|
||
# 或直接在浏览器中打开 index.html
|
||
```
|
||
|
||
## 🗺️ 页面关系图
|
||
|
||
```
|
||
智能家居项目
|
||
├── 🏠 核心模块 (底部导航)
|
||
│ ├── index.html ──── 米家首页
|
||
│ │ ├── → notifications.html
|
||
│ │ └── → environment-settings.html
|
||
│ ├── smart.html ──── 智能页面
|
||
│ │ └── → log.html
|
||
│ ├── product.html ── 产品页面
|
||
│ │ └── → all-products.html
|
||
│ ├── mall.html ───── 商城页面
|
||
│ └── profile.html ── 个人中心
|
||
│ ├── → user-profile.html
|
||
│ ├── → scene.html
|
||
│ ├── → mijiazhongce.html
|
||
│ ├── → product-encyclopedia.html
|
||
│ ├── → whole-house-smart.html
|
||
│ └── → settings.html
|
||
└── 📁 资源文件
|
||
├── styles/ ──── CSS样式
|
||
├── scripts/ ─── JavaScript
|
||
└── images/ ──── 图片资源
|
||
```
|
||
|
||
### 导航逻辑
|
||
- **底部导航**: 5个主模块间切换
|
||
- **页面跳转**: 通过点击事件触发 `showPage()` 函数
|
||
- **状态管理**: `updateBottomNav()` 同步导航状态
|
||
|
||
## 🎯 项目特点
|
||
|
||
- **高度还原**: 像素级仿制米家App界面
|
||
- **响应式设计**: 移动端优先，适配多屏幕
|
||
- **模块化架构**: 组件复用，易于维护
|
||
- **实时交互**: 设备状态切换，数据动态更新
|
||
- **触摸优化**: 移动端触摸反馈和动画效果
|
||
|
||
## 📝 开发说明
|
||
|
||
- 纯前端项目，使用模拟数据展示
|
||
- 采用事件驱动的交互模式
|
||
- 支持Chrome 60+, Firefox 55+, Safari 12+
|
||
- 建议在移动设备模拟模式下体验
|
||
|
||
---
|
||
|
||
**注意**: 本项目仅供学习交流使用，不得用于商业用途。
|
||
|
||
**枣庄学院移动应用开发技术实训 - 课程设计作业** |