IT之家 4 月 26 日消息，據(jù)華為鴻蒙發(fā)布，在 HarmonyOS Connect 生態(tài)產(chǎn)品應(yīng)用開(kāi)發(fā)過(guò)程中，很多開(kāi)發(fā)者對(duì)于如何接入智慧生活 App 還存在一些疑問(wèn)，如：如何選擇合適的開(kāi)發(fā)方式、如何進(jìn)行 H5 開(kāi)發(fā)與調(diào)測(cè)等。
為了更好地幫助開(kāi)發(fā)者，官方文檔特意整理出“接入智慧生活 App”專(zhuān)題。
文檔中心-接入智慧生活 App 的開(kāi)發(fā)指導(dǎo)：
https://device.harmonyos.com/cn/docs/devicepartner/DevicePartner-Guides/ai-life-app-overview-0000001241444445
智慧生活 App 作為華為全場(chǎng)景智慧體驗(yàn)的重要入口，可以實(shí)現(xiàn)華為自研設(shè)備與生態(tài)伙伴設(shè)備的統(tǒng)一管理。
▲ 圖 1 智慧生活 App
伙伴可以通過(guò)開(kāi)發(fā) H5 接入智慧生活 App，為消費(fèi)者帶來(lái)以下功能體驗(yàn)：
設(shè)備添加：用戶(hù)可以通過(guò)智慧生活 App 快速發(fā)現(xiàn)設(shè)備并添加設(shè)備，簡(jiǎn)單易用。
設(shè)備管控：用戶(hù)添加設(shè)備后，可以通過(guò)智慧生活 App 實(shí)現(xiàn)遠(yuǎn)程控制設(shè)備、查看狀態(tài)、分類(lèi)管理、共享設(shè)備、刪除設(shè)備等。
場(chǎng)景聯(lián)動(dòng)：通過(guò)場(chǎng)景編排可以實(shí)現(xiàn)不同產(chǎn)品、不同功能的聯(lián)動(dòng)，為用戶(hù)提供智慧化的場(chǎng)景體驗(yàn)。
一、新增智慧生活 App H5 開(kāi)發(fā)方式選擇介紹
如此便捷好用的 H5 如何實(shí)現(xiàn)？本次文檔更新，新增了 H5 接入原理及開(kāi)發(fā)方式選擇介紹。
1. 接入原理介紹
① 伙伴通過(guò)線(xiàn)上或線(xiàn)下方式開(kāi)發(fā) H5，并上傳至 Device Partner 平臺(tái)。平臺(tái)會(huì)將 H5 開(kāi)發(fā)包推送至 HarmonyOS Connect 云。
② 消費(fèi)者通過(guò)智慧生活 App 調(diào)用云端的 H5 開(kāi)發(fā)包，從而實(shí)現(xiàn)對(duì)設(shè)備的管理和控制。
▲ 圖 2 H5 開(kāi)發(fā)接入原理
2.開(kāi)發(fā)方式選擇
智慧生活 App 的 H5 包支持線(xiàn)上開(kāi)發(fā)與線(xiàn)下開(kāi)發(fā)兩種方式，開(kāi)發(fā)者伙伴可以根據(jù)下表的設(shè)備的使用范圍和能力差異來(lái)選擇：
選擇好適合的開(kāi)發(fā)方式即可著手進(jìn)行 H5 開(kāi)發(fā)啦！
更多詳細(xì)說(shuō)明，可參考：
https://device.harmonyos.com/cn/docs/devicepartner/DevicePartner-Guides/ai-life-app-overview-0000001241444445
下面要為伙伴隆重介紹：本次文檔更新內(nèi)容 —— 在線(xiàn)界面設(shè)計(jì)工具（即 UI + 工具）介紹。
二、新增在線(xiàn)界面設(shè)計(jì)工具（即 UI + 工具）介紹
1. UI + 工具特點(diǎn)介紹
UI + 工具有以下特點(diǎn)：
自動(dòng)生成界面：可以根據(jù)物模型定義，自動(dòng)生成符合設(shè)計(jì)規(guī)范的操作界面。
減少審核環(huán)節(jié)：通過(guò) UI + 工具生成的設(shè)計(jì)稿無(wú)需再提交審核。
開(kāi)發(fā)者可以根據(jù)需求進(jìn)行在線(xiàn)的調(diào)整、編排，快速實(shí)現(xiàn)期望的界面效果，這可是大大提升了 H5 的線(xiàn)上開(kāi)發(fā)效率！
2. UI + 工具功能介紹
UI + 工具界面由編輯區(qū)和預(yù)覽區(qū)（包含設(shè)備展示區(qū)、信息展示區(qū)、功能區(qū)等）兩部分組成，主要提供如下功能：
編輯：?jiǎn)螕粼O(shè)備展示區(qū)、信息展示區(qū)或功能區(qū)，可以在右側(cè)的編輯區(qū)進(jìn)行編排。通過(guò)實(shí)時(shí)預(yù)覽效果來(lái)調(diào)整編輯操作，快速實(shí)現(xiàn)所需的頁(yè)面。
保存：?jiǎn)螕艟庉媴^(qū)右上方的，可以保存 H5 設(shè)計(jì)草稿。
預(yù)覽：按 Alt 鍵 + 單擊界面預(yù)覽區(qū)的控件，在線(xiàn)模擬操作效果；也可以單擊編輯區(qū)右上方的，通過(guò)手機(jī)掃描二維碼預(yù)覽 H5 的實(shí)現(xiàn)效果。
下載：開(kāi)發(fā)完成后，單擊編輯區(qū)右上方的，可以下載 H5 包到本地進(jìn)行功能調(diào)測(cè)。
▲ 圖 3 UI + 工具界面
UI + 工具入口放在這里啦，還不趕緊上手體驗(yàn)一把！
① 登錄華為智能硬件合作伙伴平臺(tái)，單擊右上角的“管理中心”。
② 在左側(cè)導(dǎo)航欄中選擇“產(chǎn)品開(kāi)發(fā)”，單擊待開(kāi)發(fā)的產(chǎn)品，進(jìn)入產(chǎn)品開(kāi)發(fā)流程。
③ 選擇“交互設(shè)計(jì) > 智慧生活 App > App 開(kāi)發(fā) > App 設(shè)計(jì) > 線(xiàn)上開(kāi)發(fā)”，進(jìn)入 UI + 工具界面。
管理中心：
https://devicepartner.huawei.com/console/
更多詳細(xì)說(shuō)明，可參考：
https://device.harmonyos.com/cn/docs/devicepartner/DevicePartner-Guides/ai-life-app-online-dev-0000001119759354
三、新增 H5 線(xiàn)下開(kāi)發(fā)指導(dǎo)
官方文檔新增 H5 線(xiàn)下開(kāi)發(fā)指導(dǎo)，內(nèi)容概覽如下：
1.開(kāi)發(fā) UI 界面：
● H5 頁(yè)面控件開(kāi)發(fā)：按照 UI 設(shè)計(jì)稿以及 Profile 文件，完成頁(yè)面控件的開(kāi)發(fā)。
● 暗黑模式適配：介紹如何基于暗黑模式（深色模式）進(jìn)行適配，確保在不同的模式下顯示效果。
● 多端適配：介紹如何針對(duì)平板和折疊屏的適配開(kāi)發(fā)，保證在不同的終端上的顯示效果。
2.開(kāi)發(fā) H5 功能：
● 開(kāi)發(fā) H5 功能（Wi-Fi / Combo）：介紹如何按照 UI 設(shè)計(jì)文件和 Profile 文件，實(shí)現(xiàn) H5 功能開(kāi)發(fā)。
● 開(kāi)發(fā) H5 功能（BLE）：介紹藍(lán)牙 BLE 設(shè)備如何按照 UI 設(shè)計(jì)文件和 Profile 文件，實(shí)現(xiàn) H5 功能開(kāi)發(fā)。
3.配置頁(yè)面與產(chǎn)品：
● 頁(yè)面配置：配置智慧生活 App 的界面圖和界面信息。
● 產(chǎn)品配置：配置場(chǎng)景聯(lián)動(dòng)、產(chǎn)品國(guó)際化、消息通知等功能。
4.調(diào)測(cè) H5 功能：使用智慧生活 App Debug 版本在本地運(yùn)行和調(diào)試 H5 項(xiàng)目。
5.上傳 H5 包并提交 UI 審核：將 H5 項(xiàng)目打包上傳到 Device Partner 平臺(tái)，并提交 UI 審核。
更多詳細(xì)說(shuō)明，可參考：
https://device.harmonyos.com/cn/docs/devicepartner/DevicePartner-Guides/ai-life-app-offline-process-0000001204484398
廣告聲明：文內(nèi)含有的對(duì)外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時(shí)間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。