HarmonyOS鸿蒙Next开发案例：房产装修类行业官方模板介绍 （Part1：智慧家居应用模板）
HarmonyOS鸿蒙Next开发案例：房产装修类行业官方模板介绍 （Part1：智慧家居应用模板）
鸿蒙生态市场
💡摘要： 本模板来自华为生态市场（Huawei Partner Market），本文选取了房产装修类行业的一个官方模板——智慧家居应用模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！
一、概述
- 行业洞察（待补充）
- 行业痛点
- 优秀案例概览
- Stage开发模型 + 声明式UI开发范式
- 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件
- 本模板已集成华为账号等服务，只需做少量配置和定制即可快速实现华为账号的登录功能
| 首页 | 产品 | 我的 | 设备模拟 |
|---|---|---|---|
 |
 |
 |
 |
本模板主要页面及核心功能如下所示：
智能家居
|-- 首页
| |-- 设备添加
| | |-- 设备蓝牙发现
| | | |-- 自动扫描
| | | |-- 扫码添加
| | | |-- 手动添加
| | | | |-- 产品列表
| | | | └-- 添加向导（H5）
| | | |-- 重新发现
| | | └-- 发现的设备列表
| | |-- 设备蓝牙连接
| | |-- 设备wifi选择
| | | └-- 识别可用wifi
| | └-- 设备配置
| |-- 设备管理
| | |-- 设备卡片
| | | |-- 设备名称
| | | |-- 连接状态
| | | └-- 设备状态（H5）
| | └-- 设备详情
| | |-- 基本设置
| | | └-- 编辑设备名称
| | |-- 删除设备
| | |-- 设备状态显示（H5）
| | └-- 设备远程控制（H5）
| └-- 设备消息
| |-- 消息提醒
| | |-- 全局消息提醒
| | └-- 设备消息提醒
| |-- 消息分类
| | |-- 全部
| | |-- 已读
| | └-- 未读
| └-- 消息列表
| └-- 按时间展示
|-- 产品
| └-- 产品展示
└-- 我的
|-- 个人中心
| |-- 编辑昵称
| └-- 编辑头像
|-- 权限管理
| └-- 蓝牙权限
|-- 意见反馈
|-- 帮助中心
| └-- 呼叫客服
└-- 关于我们
设备模拟
|--本端开关灯
|--响应远端控制
└--蓝牙广播
二、应用架构设计
1. 分层模块化设计
- 产品定制层： 专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
- 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。
- 基础特性层： 用于存放相对独立的功能UI和业务逻辑实现。
- 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
- 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。
- 公共能力层： 存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
- 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
- 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
- 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。
本模板详细工程结构可见工程结构章节。
2. 业务组件设计
为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。
三、行业场景技术方案（待补充）
四、模板代码
1. 工程结构
详细代码结构如下所示：
SmartHome
├─commons // 公共层
│ ├─external_interactions // 外部交互
│ │ └─src
│ │ └─main
│ │ └─ets
│ │ RemoteProxyModel.ets // 代理后端
│ │
│ ├─uicomponents // 公共UI组件
│ │ └─src
│ │ └─main
│ │ └─ets
│ │ AccessSettingBarView.ets // 应用权限设置bar视图
│ │ CommonBarView.ets // 公共bar视图
│ │ DeviceBaseInfoView.ets // 设备基本信息视图，图片+名字
│ │ ImageSettingBarView.ets // 图片设置bar视图，例如设置头像
│ │ NavBarListView.ets // 导航bar列表视图，用于我的页面
│ │ NavBarView.ets // 单个导航bar视图
│ │ SettingBarView.ets // 设置bar视图，供图片、文字设置bar使用
│ │ TextBarView.ets // 展示文字的bar视图
│ │ TextSettingBarView.ets // 文字设置bar视图，例如设备名称
│ │ TextShowBarView.ets // 文字显示bar视图，例如账号信息
│ │
│ └─utils // 公共功能
│ └─src
│ └─main
│ └─ets
│ Constants.ets // 常量定义
│ LogUtil.ets // 日志
│ ObserverMngModel.ets // 观察者模式，供viewModel层订阅model层数据
│ StorageUtil.ets // 数据存储
│ Tools.ets // 小工具
├─features // 特性层
│ ├─device_add // 设备添加特性
│ │ └─src
│ │ └─main
│ │ └─ets
│ │ ├─model // model层
│ │ │ BleClientModel.ets // ble客户端模型，包括ble扫描、连接等
│ │ │ GetWifiInfoModel.ets // 获取周边wifi信息模型
│ │ │
│ │ ├─pages // page页
│ │ │ AddDevicePage.ets // 添加设备页
│ │ │ AddInstructionPage.ets // 添加指导页
│ │ │ ConfigDevicePage.ets // 配置设备页
│ │ │ ManualAddPage.ets // 手动添加设备页
│ │ │ SearchDevicePage.ets // 搜索设备页
│ │ │ SelectWifiPage.ets // 设置wifi页
│ │ │
│ │ ├─view // view层
│ │ │ AddButtonView.ets // 扫码添加/手动添加视图
│ │ │ AddEntryView.ets // 添加设备的+号视图
│ │ │ BleScannedDevicesView.ets // ble扫描出的设备展示视图
│ │ │ BleScanView.ets // ble扫描视图
│ │ │ TwoLevelListView.ets // 二级联动列表视图
│ │ │
│ │ └─viewmodel // viewModel层
│ │ AddDeviceViewModel.ets // 添加设备视图模型
│ │ AddInstructionViewModel.ets // 添加指导视图模型
│ │ BleScanViewModel.ets // ble扫描视图模型
│ │ ConfigDeviceViewModel.ets // 配置设备视图模型
│ │ ProductListViewModel.ets // 手动添加页的商品列表视图模型
│ │ SearchDeviceViewModel.ets // 搜索设备视图模型
│ │ SelectWifiViewModel.ets // 设置wifi视图模型
│ │
│ ├─device_mng // 设备管理特性
│ │ └─src
│ │ └─main
│ │ └─ets
│ │ ├─model // model层
│ │ │ AddedDevicesModel.ets // 设备管理模型
│ │ │ MqttClientModel.ets // mqtt客户端模型
│ │ │ WebInteractModel.ets // ets与h5交互模型
│ │ │
│ │ ├─pages // page页
│ │ │ BaseSettingPage.ets // 设备基本信息设置页
│ │ │ DeviceDetailPage.ets // 设备详细页
│ │ │ DeviceNotifyListPage.ets // 单设备的通知消息列表页
│ │ │ DevicesNotifyPage.ets // 所有设备的最新通知消息页
│ │ │
│ │ ├─view // view层
│ │ │ DeviceCardView.ets // 首页的设备卡片视图
│ │ │ DeviceCommonInfoView.ets // 设备详情页中的设备公共信息视图
│ │ │ DeviceNotifyListView.ets // 设备通知消息列表视图
│ │ │ DevicePrivateInfoView.ets // 设备详情页中的设备私有信息视图
│ │ │ DevicesNotifyView.ets // 所有设备的最新通知消息视图
│ │ │ NotifyEntryView.ets // 用于首页的通知图标视图
│ │ │
│ │ └─viewmodel // viewModel层
│ │ BaseSettingViewModel.ets // 设备基本信息设置视图模型
│ │ DeviceCardViewModel.ets // 单个设备卡片视图模型
│ │ DeviceDetailViewModel.ets // 设备详细视图模型
│ │ DeviceNotifyListViewModel.ets // 设备通知消息列表视图模型
│ │ DevicesCardsViewModel.ets // 所有设备卡片的视图模型
│ │ DevicesNotifyViewModel.ets // 所有设备的最新通知消息视图模型
│ │ NotifyEntryViewModel.ets // 用于首页的通知图标视图模型
│ │
│ └─device_service // 设备服务特性
│ └─src
│ └─main
│ └─ets
│ ├─model // model层
│ │ ErrorCodeEntity.ets // 登录错误码
│ │ PersonalInfoModel.ets // 个人信息模型
│ │
│ ├─pages // page页
│ │ AboutUsPage.ets // 关于我们页
│ │ AdviceFeedbackPage.ets // 意见反馈页
│ │ HelpCenterPage.ets // 帮助中心页
│ │ PersonalCenterPage.ets // 个人中心页
│ │ PrivacyPolicyPage.ets // 隐私政策页
│ │ QuickLoginPage.ets // 快速登录页
│ │ TermsOfServicePage.ets // 用户协议页
│ │
│ ├─view // view层
│ │ AgreementView.ets // 用于登录页的同意对话框
│ │ PersonalProfileView.ets // 个人头像/昵称视图
│ │ PersonalTitleView.ets // 个人标题，首页左上角
│ │
│ └─viewmodel // viewModel层
│ AdviceFeedbackViewModel.ets // 意见反馈视图模型
│ PersonalCenterViewModel.ets // 个人中心视图模型
│ PersonalProfileViewModel.ets // 个人头像/昵称视图模型
│ PersonalTitleViewModel.ets // 个人标题视图模型
├─products // 产品层
│ └─phone // 手机
│ └─src
│ └─main
│ └─ets
│ ├─pages // page页
│ │ AccessControlPage.ets // 权限管理页
│ │ HomePage.ets // 首页
│ │ Index.ets // Index
│ │ MinePage.ets // 我的
│ │ ProductPage.ets // 产品
│ ├─phoneability
│ │ PhoneAbility.ets // 应用主窗口
│ │
│ ├─phoneformability
│ │ PhoneFormAbility.ets // 设备桌面卡片
│ │
│ ├─view // view层
│ │ DevicesCardsView.ets // 首页的设备卡片视图
│ │
│ ├─viewmodel // viewModel层
│ │ AccessControlViewModel.ets // 权限管理视图模型
│ │ HomeViewModel.ets // 首页视图模型
│ │ ProductViewModel.ets // 产品视图模型
│ │
│ └─widget
│ └─pages
│ WidgetCard.ets // 桌面设备卡片
└─test // 测试相关
└─device_simulation // 设备模拟
└─src
└─main
└─ets
├─device_simulationability
│ Device_simulationAbility.ets // 设备模拟窗口
├─model // model层
│ ArrayBufferUtils.ets // ArrayBuffer处理
│ BleServerModel.ets // ble服务端模型
│ LogUtil.ets // 日志
│ MqttClientModel.ets // mqtt客户端模型
│
└─pages // page页
Index.ets // Index
2. 关键代码解读（待补充）
- 待补充
3. 模板集成
本模板提供了两种代码集成方式，供开发者自由使用。
1）整体集成
开发者可以选择直接基于模板工程开发自己的应用工程。
-
模板代码获取：
-
打开模板工程，根据README说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。
-
对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。
- 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。
- 在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。
- 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。
-
根据自己的业务内容修改模板，进行定制化开发。
2）按需集成
若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。
-
组件代码获取：
-
下载组件源码，根据README中的说明，将组件包配置在自己的工程中。
-
根据API参考和示例代码，将组件集成在自己的对应场景中。
更多关于HarmonyOS鸿蒙Next开发案例：房产装修类行业官方模板介绍 （Part1：智慧家居应用模板）的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
HarmonyOS鸿蒙Next智慧家居应用模板基于原子化服务理念开发，支持FA/PA两种形态。该模板采用Stage模型，使用ArkTS语言实现UI界面，包含首页、产品、场景、我的四大功能模块。模板已集成设备配网、控制、场景联动等核心能力，通过分布式技术实现多设备协同。数据管理采用Preferences持久化存储，网络请求模块封装了axios库。模板符合鸿蒙设计规范，提供标准卡片服务，支持服务卡片快捷操作。
更多关于HarmonyOS鸿蒙Next开发案例：房产装修类行业官方模板介绍 （Part1：智慧家居应用模板）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
这个智慧家居应用模板展现了HarmonyOS在智能家居领域的典型开发实践，具有以下技术亮点：
-
架构设计采用分层模块化思想，分为产品定制层、基础特性层和公共能力层，实现了代码的高内聚低耦合。
-
基于Stage模型和声明式UI开发范式，提供了完整的设备管理功能闭环，包括：
- 设备发现（支持蓝牙自动扫描、扫码添加、手动添加三种方式）
- 设备连接（BLE和WiFi配网）
- 设备控制（通过MQTT实现远程控制）
- 消息通知系统
-
工程结构清晰规范，采用MVVM模式组织代码：
- model层处理业务逻辑和数据
- view层负责UI展示
- viewmodel层作为桥梁连接两者
-
提供了两种集成方式：
- 整体集成：适合全新项目开发
- 按需集成：可单独使用设备管理、账号登录等业务组件
-
已集成华为账号服务，开发者只需简单配置即可实现快速登录功能。
该模板充分体现了HarmonyOS在分布式能力、多设备协同方面的优势，为智能家居类应用开发提供了很好的参考实现。开发者可以基于此快速构建自己的智能家居应用，或借鉴其架构设计和实现方式。
