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

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

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

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

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

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

一、 概述

1. 行业洞察

1) 行业诉求：

· 数据隐私与安全：用户数据被收集的使用目的未知，设备固件更新不及时，容易成为攻击家庭网络的跳板，例如家庭安防摄像头被非法入侵造成不安全感和信任危机。

· 场景智能化缺失：设备仅能执行简单指令，无法基于环境和用户习惯进行主动、精准、个性化的预测和服务。

· 提高智能化水平：很多操控需通过手机App多次点击，操作繁琐复杂，使得用户体验反而倒退，智能设备类应用需要为用户带来简易、便捷、安全、流畅的使用体验。

2) 行业常用三方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)
      }
    })
}

3. 模板集成

本模板提供了两种代码集成方式，供开发者自由选用。

1) 整体集成（下载模板）

开发者可以选择直接基于模板工程开发自己的应用工程。

· 模板代码获取：

通过IDE插件创建模板工程，开发指导。

通过生态市场下载源码， 下载模板。

通过开源仓访问源码，仓库地址。

· 打开模板工程，根据README说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。

· 对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。

将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。

在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。

根据自己的业务内容修改模板，进行定制化开发。

2) 按需集成

若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。

· 组件代码获取：

通过IDE插件下载组件源码。开发指导

通过生态市场下载组件源码。 下载地址

· 下载组件源码，根据README中的说明，将组件包配置在自己的工程中。

· 根据API参考和示例代码，将组件集成在自己的对应场景中。

以上是第12期“智慧家居”行业优秀案例的内容，更多行业敬请期待~

欢迎下载使用行业模板“点击下载”，若您有体验和开发问题，或者迫不及待想了解XX行业的优秀案例，欢迎在评论区留言，小编会快马加鞭为您解答~

同时诚邀您添加下方二维码加入“组件模板活动社群”，精彩上新&活动不错过！

👉HarmonyOS官方模板优秀案例系列持续更新， 点击查看往期案例汇总贴， 点击收藏 “⭐️”方便查找！

👉【集成有礼】HarmonyOS官方模板集成创新活动，挥洒创意，赢精美大礼！点击参加

👉【HarmonyOS行业解决方案】为各行业鸿蒙应用提供全流程技术方案。点击查看