在HarmonyOS Connect生態(tài)產(chǎn)品應用開發(fā)過程中，很多開發(fā)者對于如何接入智慧生活App還存在一些疑問，如：如何選擇合適的開發(fā)方式、如何進行H5開發(fā)與調(diào)測等。 為了更好地幫助開發(fā)者，官方文檔特意整理出“接入智慧生活App”專題。跟緊小編的步伐，趕緊來看看本次文檔更新內(nèi)容~

文檔中心-接入智慧生活App的開發(fā)指導：

https://device.harmonyos.com/cn/docs/devicepartner/DevicePartner-Guides/ai-life-app-overview-0000001241444445

智慧生活App作為華為全場景智慧體驗的重要入口，可以實現(xiàn)華為自研設備與生態(tài)伙伴設備的統(tǒng)一管理。

圖1 智慧生活App

伙伴可以通過開發(fā)H5接入智慧生活App，為消費者帶來以下功能體驗：

設備添加：用戶可以通過智慧生活App快速發(fā)現(xiàn)設備并添加設備，簡單易用。

設備管控：用戶添加設備后，可以通過智慧生活App實現(xiàn)遠程控制設備、查看狀態(tài)、分類管理、共享設備、刪除設備等。

場景聯(lián)動：通過場景編排可以實現(xiàn)不同產(chǎn)品、不同功能的聯(lián)動，為用戶提供智慧化的場景體驗。

以上功能體驗的實現(xiàn)，讓智慧生活App變身成為消費者貼心的“私人管家”。不僅讓日常生活增添“智能”感，更是讓冰冷的機器提升了溫度。

一、新增智慧生活App H5開發(fā)方式選擇介紹

如此便捷好用的H5如何實現(xiàn)？本次文檔更新，新增了H5接入原理及開發(fā)方式選擇介紹。

1. 接入原理介紹

① 伙伴通過線上或線下方式開發(fā)H5，并上傳至Device Partner平臺。平臺會將H5開發(fā)包推送至HarmonyOS Connect云。

② 消費者通過智慧生活App調(diào)用云端的H5開發(fā)包，從而實現(xiàn)對設備的管理和控制。

圖2 H5開發(fā)接入原理

2.開發(fā)方式選擇

智慧生活App的H5包支持線上開發(fā)與線下開發(fā)兩種方式，開發(fā)者伙伴可以根據(jù)下表的設備的使用范圍和能力差異來選擇：

選擇好適合的開發(fā)方式即可著手進行H5開發(fā)啦！

下面小編要為伙伴隆重介紹：本次文檔更新內(nèi)容——在線界面設計工具（即UI+工具）介紹。

二、新增在線界面設計工具（即UI+工具）介紹

1. UI+工具特點介紹

UI+工具有以下特點：

自動生成界面：可以根據(jù)物模型定義，自動生成符合設計規(guī)范的操作界面。

減少審核環(huán)節(jié)：通過UI+工具生成的設計稿無需再提交審核。

開發(fā)者可以根據(jù)需求進行在線的調(diào)整、編排，快速實現(xiàn)期望的界面效果，這可是大大提升了H5的線上開發(fā)效率！

2. UI+工具功能介紹

UI+工具界面由編輯區(qū)和預覽區(qū)（包含設備展示區(qū)、信息展示區(qū)、功能區(qū)等）兩部分組成，主要提供如下功能：

編輯：單擊設備展示區(qū)、信息展示區(qū)或功能區(qū)，可以在右側(cè)的編輯區(qū)進行編排。通過實時預覽效果來調(diào)整編輯操作，快速實現(xiàn)所需的頁面。

保存：單擊編輯區(qū)右上方的，可以保存H5設計草稿。

預覽：按Alt鍵+單擊界面預覽區(qū)的控件，在線模擬操作效果；也可以單擊編輯區(qū)右上方的，通過手機掃描二維碼預覽H5的實現(xiàn)效果。

下載：開發(fā)完成后，單擊編輯區(qū)右上方的，可以下載H5包到本地進行功能調(diào)測。

圖3 UI+工具界面UI+工具入口放在這里啦，還不趕緊上手體驗一把！

① 登錄華為智能硬件合作伙伴平臺，單擊右上角的“管理中心”。

② 在左側(cè)導航欄中選擇“產(chǎn)品開發(fā)”，單擊待開發(fā)的產(chǎn)品，進入產(chǎn)品開發(fā)流程。 ③ 選擇“交互設計 > 智慧生活App > App開發(fā) > App設計 > 線上開發(fā)”，進入UI+工具界面。管理中心：

https://devicepartner.huawei.com/console/

三、新增H5線下開發(fā)指導

官方文檔新增H5線下開發(fā)指導，內(nèi)容概覽如下：

1.開發(fā)UI界面：

●H5頁面控件開發(fā)：按照UI設計稿以及Profile文件，完成頁面控件的開發(fā)。

●暗黑模式適配：介紹如何基于暗黑模式（深色模式）進行適配，確保在不同的模式下顯示效果。

●多端適配：介紹如何針對平板和折疊屏的適配開發(fā)，保證在不同的終端上的顯示效果。

2.開發(fā)H5功能：

●開發(fā)H5功能（Wi-Fi/Combo）：介紹如何按照UI設計文件和Profile文件，實現(xiàn)H5功能開發(fā)。

●開發(fā)H5功能（BLE）：介紹藍牙BLE設備如何按照UI設計文件和Profile文件，實現(xiàn)H5功能開發(fā)。

3.配置頁面與產(chǎn)品：

●頁面配置：配置智慧生活App的界面圖和界面信息。

●產(chǎn)品配置：配置場景聯(lián)動、產(chǎn)品國際化、消息通知等功能。

4.調(diào)測H5功能：使用智慧生活App Debug版本在本地運行和調(diào)試H5項目。

5.上傳H5包并提交UI審核：將H5項目打包上傳到Device Partner平臺，并提交UI審核。

希望本次文檔的更新內(nèi)容，可以為大家?guī)硪欢ㄩ_發(fā)幫助。讓我們一起攜手構(gòu)筑更為智慧的全場景體驗吧~

審核編輯 ：李倩