【上新+1】HarmonyOS官方模板优秀案例（第12期：智能设备 · 智慧家居）

在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。│││DevicePrivateInfoView.ets

HarmonyOS社区小助手

890人浏览 · 2025-10-31 10:27:37

HarmonyOS社区小助手 · 2025-10-31 10:27:37 发布

【上新+1】HarmonyOS官方模板优秀案例

（第12期：智能设备 · 智慧家居）

💡 鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发效率原地起飞 💡

★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★

智能家居设备是家庭生活小帮手，好用的操作体验能够解放双手，提升生活品质

本期为您介绍智慧家居类应用的开发案例

👉 覆盖20+行业，点击查看往期案例汇总贴，持续更新，点击收藏！一键三连！常看常新！

【第12期】智能设备 · 智慧家居

一、概述

1.行业洞察

1）行业诉求：

数据隐私与安全：用户数据被收集的使用目的未知，设备固件更新不及时，容易成为攻击家庭网络的跳板，例如家庭安防摄像头被非法入侵造成不安全感和信任危机。
场景智能化缺失：设备仅能执行简单指令，无法基于环境和用户习惯进行主动、精准、个性化的预测和服务。
提高智能化水平：很多操控需通过手机App多次点击，操作繁琐复杂，使得用户体验反而倒退，智能设备类应用需要为用户带来简易、便捷、安全、流畅的使用体验。

2）行业常用三方SDK

分类	三方库名称	功能	支持情况	SDK链接
第三方登录类	阿里一键登录SDK/中国移动号码认证服务/中国联通号码认证服务/中国电信天翼账号统一登录/极光认证	一键登录和验证用户手机号码与本机流量卡是否一致的服务	已支持	支付宝SDK 腾讯微信SDK 极光推送穿山甲广告SDK 腾讯浏览服务高德地图腾讯地图SDK 友盟移动统计穿山甲广告SDK 个推 Bugly 极光认证福昕 PDF SDK 友盟应用性能监控腾讯云播放器神策分析SDK
推送	百度移动应用推广/个推消息/华为HMS推送/小米推送/vivo推送/OPPO推送/魅族推送/极光推送	推送消息	已支持
统计	友盟统计分析/友盟移动统计/百度统计SDK/阿里云移动数据分析/神策分析SDK	数据收集、处理、分析、运用	已支持
网络	Google Play Services Cronet/Tnet网络 SDK	构建网络服务、域名解析	已支持
广告	Google Mobile Ads/华为HMS广告服务/腾讯优量汇/Pangle Ads（穿山甲广告）/快手联盟广告/Yandex Mobile Ads/Amazon APS	广告展示	已支持
媒体	HMS统一扫码服务/福昕SDK/腾讯云播放器/火山引擎SDK/腾讯浏览服务SDK	扫码、音视频、浏览器引擎	已支持
工具	android-inline-hook/Klog/sweet-alert-dialog	开发日志、自定义工具	已支持
性能监控	腾讯Bugly SDK/阿里云热修复SDK/友盟应用性能监控SDK	线上问题修复、日志分析、提高服务稳定性，服务崩溃后快速定位问题	已支持
地图	高德地图/高德定位/百度地图/腾讯地图SDK	定位、导航等服务	已支持

说明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”

2.案例概览（下载模板）

基于以上行业分析，本期将介绍鸿蒙生态市场房产装修类行业模板——智慧家居应用模板，为行业提供常用功能的开发案例，构建了一款包含设备添加、设备管理的智能家居应用，并构建了设备模拟端，实现与该模板的蓝牙、MQTT交互，从而整体功能的闭环展示。

Stage开发模型 + 声明式UI开发范式。
分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件。
本模板已集成华为账号等服务，只需做少量配置和定制即可快速实现华为账号的登录功能。

本模板主要页面及核心功能如下所示：

智能家居

|-- 首页

| |-- 设备添加

| | |-- 设备蓝牙发现

| | | |-- 自动扫描

| | | |-- 扫码添加

| | | |-- 手动添加

| | | | |-- 产品列表

| | | | └-- 添加向导（H5）

| | | |-- 重新发现

| | | └-- 发现的设备列表

| | |-- 设备蓝牙连接

| | |-- 设备wifi选择

| | | └-- 识别可用wifi

| | └-- 设备配置

| |-- 设备管理

| | |-- 设备卡片

| | | |-- 设备名称

| | | |-- 连接状态

| | | └-- 设备状态（H5）

| | └-- 设备详情

| | |-- 基本设置

| | | └-- 编辑设备名称

| | |-- 删除设备

| | |-- 设备状态显示（H5）

| | └-- 设备远程控制（H5）

| └-- 设备消息

| |-- 消息提醒

| | |-- 全局消息提醒

| | └-- 设备消息提醒

| |-- 消息分类

| | |-- 全部

| | |-- 已读

| | └-- 未读

| └-- 消息列表

| └-- 按时间展示

|-- 产品

| └-- 产品展示

└-- 我的

|-- 个人中心

| |-- 编辑昵称

| └-- 编辑头像

|-- 权限管理

| └-- 蓝牙权限

|-- 意见反馈

|-- 帮助中心

| └-- 呼叫客服

└-- 关于我们

设备模拟

|--本端开关灯

|--响应远端控制

└--蓝牙广播

二、应用架构设计

1.分层模块化设计

产品定制层：专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。

✧ 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。

基础特性层：用于存放相对独立的功能UI和业务逻辑实现。

✧ 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。

✧ 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。

公共能力层：存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。

✧ 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。

✧ 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。

✧ 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

2.业务组件设计

为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。

三、行业场景技术方案

1.蓝牙扫描功能

1）场景说明

提供蓝牙扫描的能力，包括蓝牙扫描，设备信息展示等。

2）技术方案

通过订阅开关状态变化获取实时的蓝牙开关状态，然后进行蓝牙扫描。

2.Wi-Fi扫描功能

1）场景说明

提供WiFi扫描选择的能力，包括WiFi列表选择，密码展示等。

2）技术方案

通过wifiManager.getScanInfoList 获取包含当前时间点前30s内的缓存扫描结果。

四、模板代码

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.关键代码解读

本篇代码非应用的全量代码，只包括应用的部分能力的关键代码。

1）蓝牙扫描组件

@Builder BuildBleScanImage() {

Column() {

Image(this.bleScanImage)

.size({ height: '60%'})

Stack() {

Text('请将手机尽量靠近要添加的设备')

.visibility(this.isShowReScan ? Visibility.Hidden : Visibility.Visible)

Text('重新搜索')

.onClick(() => {

this.bleScanViewModel.startBleScan()

})

.visibility(this.isShowReScan ? Visibility.Visible : Visibility.Hidden)

}

.margin({top: 10})

}

@Builder BuildBleScanState() {

Column() {

Text(this.scanStateBrief)

Row() {

Text(this.scanStateDetail)

if (this.bleScanViewModel.scanState === BLE_SCAN_STATE.SCANNING) {

LoadingProgress()

}

.height(20)

}

.width('100%')

.alignItems(HorizontalAlign.Start)

}

2）Wi-Fi扫描组件

build() {
  Column() {
    this.BuildWifiNameInput()
    this.BuildWifiPasswordInput()
    this.BuildNextButton()
  }
}

@Builder
BuildWifiNameInput() {
  Select(this.options)
    .optionHeight(300)
    .value('点击选择Wi-Fi')
    .onSelect((_index: number, text?: string | undefined) => {
      if (text) {
        this.wifiName = text
      }
    })
}

@Builder
BuildWifiPasswordInput() {
  TextInput({ placeholder: 'Wi-Fi密码' })
    .type(InputType.Password)
    .onChange((value: string) => {
      this.wifiPassword = value
    })
}

@Builder
BuildNextButton() {
  Button('下一步')
    .onClick(() => { // WiFi选择确认逻辑
      if (this.clickEvent) {
        this.clickEvent(this.wifiName, this.wifiPassword)
      }
    })
}