💡 鴻蒙生態為開發者提供海量的HarmonyOS模板/組件，助力開發效率原地起飛 💡
★ 一鍵直達生態市場組件&模板市場 , 快速應用DevEco Studio插件市場集成組件&模板★
智能家居設備是家庭生活小幫手，好用的操作體驗能夠解放雙手，提升生活品質
本期為您介紹智慧家居類應用的開發案例
👉 覆蓋20+行業，點擊查看往期案例彙總貼，持續更新，點擊收藏！一鍵三連！常看常新！
【第12期】智能設備 · 智慧家居
一、概述
1.行業洞察
1）行業訴求：
- 數據隱私與安全：用户數據被收集的使用目的未知，設備固件更新不及時，容易成為攻擊家庭網絡的跳板，例如家庭安防攝像頭被非法入侵造成不安全感和信任危機。
- 場景智能化缺失：設備僅能執行簡單指令，無法基於環境和用户習慣進行主動、精準、個性化的預測和服務。
- 提高智能化水平：很多操控需通過手機App多次點擊，操作繁瑣複雜，使得用户體驗反而倒退，智能設備類應用需要為用户帶來簡易、便捷、安全、流暢的使用體驗。
2）行業常用三方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 | 定位、導航等服務 | 已支持 |
説明："以上三方庫及鏈接僅為示例，三方庫由三方開發者獨立提供，以其官方內容為準"
SDK鏈接：
支付寶SDK
騰訊微信SDK
極光推送
穿山甲廣告SDK
騰訊瀏覽服務
高德地圖
騰訊地圖SDK
友盟移動統計
穿山甲廣告SDK
個推
Bugly
極光認證
福昕 PDF 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 // Index2.關鍵代碼解讀
本篇代碼非應用的全量代碼，只包括應用的部分能力的關鍵代碼。
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行業解決方案】為各行業鴻蒙應用提供全流程技術方案。點擊查看
