congming_huose-apk/README.md

3.8 KiB
Raw Blame History

智能家居应用

功能特性

手势控制

  • 左滑手势: 当侧边菜单显示时,左滑可以隐藏侧边菜单
  • 右滑手势: 当侧边菜单隐藏时,右滑可以打开侧边菜单
  • 触觉反馈: 手势操作成功时会提供轻微的触觉反馈
  • 防误触: 设置了垂直距离限制,避免误触
  • 页面限制: 在通知页面时只有高亮索引为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.$emituni.$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. 确保所有支持的语言都有对应的翻译

示例

// 在组件中使用
this.$i18n.t('work')  // 获取"工作"的翻译
this.$i18n.t('device')  // 获取"设备"的翻译

开发环境

  • uni-app
  • Vue.js
  • SCSS

运行项目

  1. 安装依赖
  2. 在 HBuilderX 中打开项目
  3. 运行到手机或模拟器

功能特性

  • 多语言支持(中文、英文、日语)
  • 设备管理
  • 房间管理
  • 通知系统
  • 智能控制
  • 响应式设计