129 lines
3.8 KiB
Markdown
129 lines
3.8 KiB
Markdown
|
# 智能家居应用
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 手势控制
|
|||
|
|
- **左滑手势**: 当侧边菜单显示时，左滑可以隐藏侧边菜单
|
|||
|
|
- **右滑手势**: 当侧边菜单隐藏时，右滑可以打开侧边菜单
|
|||
|
|
- **触觉反馈**: 手势操作成功时会提供轻微的触觉反馈
|
|||
|
|
- **防误触**: 设置了垂直距离限制，避免误触
|
|||
|
|
- **页面限制**: 在通知页面时，只有高亮索引为0时才启用手势功能，避免与页面内部滑动冲突
|
|||
|
|
|
|||
|
|
### 手势参数
|
|||
|
|
- 最小滑动距离: 50px
|
|||
|
|
- 最大垂直距离: 100px（防止误触）
|
|||
|
|
- 最大滑动时间: 500ms
|
|||
|
|
- 防抖时间: 300ms
|
|||
|
|
- 支持在页面任何位置进行手势操作（除通知页面外）
|
|||
|
|
|
|||
|
|
## 技术实现
|
|||
|
|
|
|||
|
|
### 触摸事件处理
|
|||
|
|
- 使用 `@touchstart`、`@touchmove`、`@touchend` 事件
|
|||
|
|
- 计算滑动距离和方向
|
|||
|
|
- 智能判断手势有效性
|
|||
|
|
- 页面特定逻辑：在通知页面（currentTabIndex === 2）时禁用手势
|
|||
|
|
|
|||
|
|
### CSS优化
|
|||
|
|
- 设置 `touch-action: pan-x pan-y` 确保触摸事件正常工作
|
|||
|
|
- 防止页面滚动干扰手势识别
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
1. **打开侧边菜单**:
|
|||
|
|
- 点击顶部栏的菜单按钮
|
|||
|
|
- 或者从屏幕右边缘向左滑动（除通知页面外）
|
|||
|
|
|
|||
|
|
2. **关闭侧边菜单**:
|
|||
|
|
- 点击菜单外的遮罩区域
|
|||
|
|
- 或者从屏幕左边缘向右滑动（除通知页面外）
|
|||
|
|
|
|||
|
|
3. **通知页面特殊处理**:
|
|||
|
|
- 在通知页面时，只有当高亮索引为0（"全部"标签）时，左右滑动手势才会触发侧边菜单
|
|||
|
|
- 当高亮索引为其他值（安全、故障、布防模式、系统相关）时，手势功能会被禁用
|
|||
|
|
- 这样可以避免与通知页面内部的滑动功能冲突，同时保持必要的交互功能
|
|||
|
|
|
|||
|
|
## 开发说明
|
|||
|
|
|
|||
|
|
手势识别逻辑位于 `pages/index/index.vue` 文件中：
|
|||
|
|
- `handleTouchStart()`: 记录触摸开始位置，在通知页面时根据高亮索引决定是否启用手势
|
|||
|
|
- `handleTouchMove()`: 处理触摸移动，在通知页面时根据高亮索引决定是否启用手势
|
|||
|
|
- `handleTouchEnd()`: 判断手势类型并执行相应操作，在通知页面时根据高亮索引决定是否启用手势
|
|||
|
|
|
|||
|
|
# 聪明房子 APK 项目
|
|||
|
|
|
|||
|
|
这是一个基于 uni-app 开发的智能家居应用，支持多语言功能。
|
|||
|
|
|
|||
|
|
## 多语言功能
|
|||
|
|
|
|||
|
|
### 支持的语言
|
|||
|
|
- 中文 (zh)
|
|||
|
|
- 英文 (en)
|
|||
|
|
- 日语 (ja)
|
|||
|
|
|
|||
|
|
### 使用方法
|
|||
|
|
|
|||
|
|
1. **切换语言**：
|
|||
|
|
- 点击左上角菜单按钮打开侧边菜单
|
|||
|
|
- 点击"语言设置"选项
|
|||
|
|
- 选择想要的语言（中文/English/日本語）
|
|||
|
|
- 语言会立即切换，无需重启应用
|
|||
|
|
|
|||
|
|
2. **语言设置**：
|
|||
|
|
- 语言选择会保存在本地存储中
|
|||
|
|
- 下次打开应用会自动使用上次选择的语言
|
|||
|
|
- 默认语言为中文
|
|||
|
|
|
|||
|
|
### 技术实现
|
|||
|
|
|
|||
|
|
- 使用 uni-app 的本地存储功能保存语言设置
|
|||
|
|
- 通过事件总线 (`uni.$emit` 和 `uni.$on`) 实现组件间的语言变化通知
|
|||
|
|
- 所有文本都通过 `$i18n.t('key')` 方法获取翻译
|
|||
|
|
|
|||
|
|
### 文件结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
common/
|
|||
|
|
├── i18n/
|
|||
|
|
│ └── index.js # 多语言配置文件
|
|||
|
|
└── components/
|
|||
|
|
├── CustomHeader.vue # 自定义头部组件
|
|||
|
|
├── BottomTab.vue # 底部导航组件
|
|||
|
|
├── SideMenu.vue # 侧边菜单组件
|
|||
|
|
└── DeviceTab.vue # 设备列表组件
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 添加新的翻译
|
|||
|
|
|
|||
|
|
1. 在 `common/i18n/index.js` 中的 `messages` 对象中添加新的翻译键值对
|
|||
|
|
2. 在组件中使用 `this.$i18n.t('key')` 获取翻译文本
|
|||
|
|
3. 确保所有支持的语言都有对应的翻译
|
|||
|
|
|
|||
|
|
### 示例
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 在组件中使用
|
|||
|
|
this.$i18n.t('work') // 获取"工作"的翻译
|
|||
|
|
this.$i18n.t('device') // 获取"设备"的翻译
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开发环境
|
|||
|
|
|
|||
|
|
- uni-app
|
|||
|
|
- Vue.js
|
|||
|
|
- SCSS
|
|||
|
|
|
|||
|
|
## 运行项目
|
|||
|
|
|
|||
|
|
1. 安装依赖
|
|||
|
|
2. 在 HBuilderX 中打开项目
|
|||
|
|
3. 运行到手机或模拟器
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
- 多语言支持（中文、英文、日语）
|
|||
|
|
- 设备管理
|
|||
|
|
- 房间管理
|
|||
|
|
- 通知系统
|
|||
|
|
- 智能控制
|
|||
|
|
- 响应式设计
|