7.3 KiB
7.3 KiB
米家智能家居 - 课程设计项目
本项目仅为枣庄学院移动应用开发技术实训的课程设计作业
基于纯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. 页面切换系统
function showPage(pageId) {
// 隐藏所有页面，显示目标页面
const pages = document.querySelectorAll('.container');
pages.forEach(page => page.classList.add('hidden'));
document.getElementById(pageId)?.classList.remove('hidden');
updateBottomNav(pageId);
}
2. 设备控制逻辑
function toggleDevice(deviceElement) {
deviceElement.classList.toggle('active');
// 模拟设备状态切换，更新UI显示
const statusElement = deviceElement.querySelector('.device-status');
// 状态更新逻辑...
}
3. 实时数据更新
// 每30秒更新传感器数据
setInterval(updateSensorData, 30000);
function updateSensorData() {
// 模拟温湿度数据变化
const newTemp = (currentTemp + (Math.random() - 0.5) * 2).toFixed(1);
}
CSS 样式架构 (styles/)
1. 全局样式 (common.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 # 项目说明文档
🚀 快速启动
# 使用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+
- 建议在移动设备模拟模式下体验
注意: 本项目仅供学习交流使用，不得用于商业用途。
枣庄学院移动应用开发技术实训 - 课程设计作业