[[416276]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

萬物互聯(lián)的時(shí)代，作為應(yīng)用開發(fā)者，你是否面臨著同一應(yīng)用要部署在手機(jī)、手表、大屏、車機(jī)、平板、電腦甚至更小的IoT設(shè)備上的難題?你是否花費(fèi)大量時(shí)間在不同設(shè)備的屏幕適配上?你是否面臨同一應(yīng)用需要支持超十種分布于不同設(shè)備的不同交互方式的挑戰(zhàn)?

開發(fā)多設(shè)備場(chǎng)景下應(yīng)用，開發(fā)者面臨著設(shè)備形態(tài)差異帶來的開發(fā)挑戰(zhàn)：不同設(shè)備屏幕大小、屏幕分辨率以及屏幕形狀不盡相同，由此讓不同設(shè)備UI樣式開發(fā)難度加大。同時(shí)，不同設(shè)備上交互模式不同也帶來了交互維度的開發(fā)挑戰(zhàn)。

面對(duì)設(shè)備形態(tài)差異帶來的開發(fā)挑戰(zhàn)，HarmonyOS針對(duì)性地提出了兩方面的解決策略，一方面是圍繞UI維度，另一方面圍繞交互維度。

針對(duì)終端形態(tài)差異挑戰(zhàn)的解決策略

圍繞UI維度的解決策略，主要包括以下方面：

• 多態(tài)控件

同樣一個(gè)控件，在不同設(shè)備上有不同的形態(tài)以及交互模式，這就是多態(tài)。舉個(gè)例子，一個(gè)開關(guān)按鈕在不同設(shè)備上的UI效果訴求是不一樣的。在手機(jī)一般采用滑動(dòng)條的形式，大屏基本上是打勾打叉選擇的形式，而不是滑動(dòng)條。

然而大家會(huì)發(fā)現(xiàn)，雖然形態(tài)不同，但對(duì)描述來說，或者實(shí)現(xiàn)的結(jié)果，都是相同的。HarmonyOS的多態(tài)控件可以做到對(duì)同一種按鈕做一樣的描述，但在不同設(shè)備上有不同呈現(xiàn)，有不同的體驗(yàn)，同時(shí)設(shè)計(jì)能夠直接貼合相應(yīng)設(shè)備的設(shè)計(jì)規(guī)范。HarmonyOS通過多態(tài)控件做”表述統(tǒng)一”從而幫助開發(fā)者進(jìn)一步降低開發(fā)成本。

• 動(dòng)態(tài)布局

我們都知道，單單解決控件問題是不夠的，開發(fā)還會(huì)涉及布局的問題。布局問題如果再細(xì)分的話，又可分兩個(gè)維度：內(nèi)容框架和界面元素。

內(nèi)容框架 指的是布局的整個(gè)內(nèi)容，比如說橫屏或豎屏，內(nèi)容呈現(xiàn)大致形式是什么樣。

界面元素 是指布局在內(nèi)容框架中的元素，開發(fā)需要解決的問題是它們應(yīng)該如何排列，能否進(jìn)行擴(kuò)展等問題。

HarmonyOS通過動(dòng)態(tài)布局，達(dá)到按需取用。本質(zhì)上來說，就是針對(duì)不同分辨率可選不同的布局。同時(shí)，在分辨率變化的情況下，提供柵格化原子化布局能力，針對(duì)UI元素進(jìn)行組合，如縮放，自動(dòng)折行，自動(dòng)隱藏等。通過這種基礎(chǔ)能力實(shí)現(xiàn)更好的屏幕適配，幫助開發(fā)者在屏幕布局上做進(jìn)一步增強(qiáng)。

圍繞交互維度，HarmonyOS引入交互事件歸一的解決策略：

• 事件歸一

雖然我們都知道在不同平臺(tái)上交互模式是不一樣的，但其想達(dá)到的效果卻是一樣的，在這樣想法的驅(qū)使下，HarmonyOS通過框架層，屏蔽輸入差異，把不同的輸入變成統(tǒng)一的事件，把交互事件的接口盡量一致化， 使得開發(fā)者在響應(yīng)控件時(shí)，只需關(guān)心一致化的事件，達(dá)到更好的一致化響應(yīng)交互行為。

以上是HarmonyOS針對(duì)設(shè)備形態(tài)差異挑戰(zhàn)的解決策略。這些解決策略將被封裝成HarmonyOS UI框架，讓開發(fā)者可以通過調(diào)用相應(yīng)接口直接開發(fā)，提高開發(fā)效率。

HarmonyOS UI框架

HarmonyOS的這一套UI框架，全稱為AbilityCross-platform Environment，ACE UI框架，可支持主流的開發(fā)語言——Java以及JavaScript，分別對(duì)應(yīng)命令式和聲明式兩種開發(fā)模式。

對(duì)于Java UI框架，命令式開發(fā)模式而言，相對(duì)來說都是細(xì)粒度的API，完全由開發(fā)者控制。開發(fā)者操縱UI實(shí)現(xiàn)具體變更，通過調(diào)用API來實(shí)現(xiàn)整個(gè)UI編程的目標(biāo)。這是一種由開發(fā)者來處理的較為常用的開發(fā)模式。

JavaUI框架基本架構(gòu)是上層細(xì)粒度UI編程接口，中間是命令式UI后端引擎(包含UI組件，布局計(jì)算，視圖管理….),緊接著是跨平臺(tái)渲染引擎基礎(chǔ)設(shè)施。

同時(shí)，HarmonyOS也提供JavaScript UI框架，即JS UI 框架，聲明式模式，對(duì)UI描述是相對(duì)高層的，本質(zhì)上聲明式對(duì)UI操縱主要靠描述，對(duì)于開發(fā)者來說，只需描述即可，剩下的UI變更是通過數(shù)據(jù)驅(qū)動(dòng)實(shí)現(xiàn)，這些變更的真正操作是通過框架層來處理。相當(dāng)于開發(fā)者只要通過聲明式描述好UI，以及明確什么樣的數(shù)據(jù)狀態(tài)改變，涉及什么樣的UI變更，其余由框架層來具體實(shí)現(xiàn)。

JS UI框架基本架構(gòu)是上層為高層UI描述接口，中間是聲明式UI后端引擎，包含UI組件，布局計(jì)算，視圖管理….，緊接著是跨平臺(tái)渲染引擎基礎(chǔ)設(shè)施。

下面讓我們展開看一下 JS UI和Java UI的框架 到底是怎么樣的。

JS UI 框架

• 總體架構(gòu)

從上面的圖可以看到，JS UI 總體架構(gòu)大的維度主要分為前端和后端。

一、前端

前端主要是JavaScript的前端框架。這里采用的是類web的前端開發(fā)模式，開發(fā)相應(yīng)的UI。

二、后端

后端主要分為以下幾個(gè)部分：

• UI 引擎部分

即呈現(xiàn)的構(gòu)建部分**，這當(dāng)中包含JS執(zhí)行引擎本身**， 由C++構(gòu)建的聲明式UI后端引擎(包括UI組件實(shí)現(xiàn)、布局視圖、動(dòng)畫事件)和渲染引擎，這些共同構(gòu)建了整個(gè)UI的呈現(xiàn)。

• 中間轉(zhuǎn)換層

通過中間轉(zhuǎn)化層，把前面JS的UI描述，轉(zhuǎn)化成聲明式UI，讓后端引擎去執(zhí)行。

• 能力擴(kuò)展

HarmonyOS提供“擴(kuò)展API“包括各種各樣的分布式能力、系統(tǒng)的基礎(chǔ)能力。通過能力擴(kuò)展基礎(chǔ)設(shè)施，開發(fā)者可以調(diào)用JavaScript API來實(shí)現(xiàn)更豐富的邏輯功能。

• 跨平臺(tái)的適配層

從設(shè)計(jì)上來說，HarmonyOS可以實(shí)現(xiàn)跨設(shè)備跨OS。主要是因?yàn)檎麄€(gè)渲染路徑是由后端完全自己繪制的，通過一個(gè)底層畫布來實(shí)現(xiàn)UI功能，這樣對(duì)OS的依賴相對(duì)較少，能達(dá)到跨平臺(tái)的效果。

• 平臺(tái)橋接層

從架構(gòu)設(shè)計(jì)上來說，我們是可以運(yùn)行在HarmonyOS上，其實(shí)也可以在其他OS上運(yùn)行。這里前提條件是HarmonyOS會(huì)與其他OS內(nèi)的基礎(chǔ)設(shè)施以及基礎(chǔ)能力做橋接，從而達(dá)到能力擴(kuò)展的目標(biāo)。

當(dāng)然同時(shí)我們離不開工具的幫助，通過IDE包括其他相應(yīng)一些工具鏈就實(shí)現(xiàn)通過JS開發(fā)后，部署到不同的設(shè)備上的目標(biāo)。

總的來說，通過聲明式UI框架，借用類Web前端的簡(jiǎn)易開發(fā)能力，同時(shí)結(jié)合后端引擎的高性能能力，HarmonyOS幫助開發(fā)者達(dá)到易開發(fā)，高性能的目標(biāo)。通過HarmonyOS的跨平臺(tái)渲染基礎(chǔ)設(shè)施，能夠達(dá)到相對(duì)比較一致的跨平臺(tái)的體驗(yàn)。如電視或手表上的預(yù)覽路徑、渲染路徑基本保持一致，達(dá)到一個(gè)較好的實(shí)時(shí)預(yù)覽效果，從而得到較一致的渲染體驗(yàn)。

• 運(yùn)行流程

通過上述流程圖我們可以看到，當(dāng)一個(gè)應(yīng)用啟動(dòng)時(shí)，最早是從Ability(HarmonyOS運(yùn)行的最基礎(chǔ)單元)出發(fā)，Ability內(nèi)有UI的框架部分。前端框架的整體職責(zé)就是加載解析和運(yùn)行JS應(yīng)用，并完成前端開發(fā)范式的組件樹到聲明式后端渲染框架層Component樹的復(fù)雜對(duì)接。后端渲染框架是實(shí)現(xiàn)整個(gè)渲染流水線管理的核心部分，維護(hù)了三棵渲染相關(guān)的樹：Component樹、Element樹和Render樹，一些耗時(shí)的IO操作，例如圖片相關(guān)的獲取和加載放在了單獨(dú)的IO線程，這些都納入到了容器的統(tǒng)一管理之中，配合動(dòng)畫、事件等，完成UI線程的繪制，最終由渲染引擎負(fù)責(zé)光柵化以及合成上屏，構(gòu)建了高效的渲染流水線。

這當(dāng)中完全是多線程設(shè)計(jì)的，也就是說前端部分，JS 線程，UI線程，以及IO線程都可以并行化處理，從而達(dá)到較好的執(zhí)行效率，以及較高的性能，這是一個(gè)大致ACE JS的運(yùn)行流程。

• 應(yīng)用示例

我們來看具體一個(gè)例子——一個(gè)音樂應(yīng)用，可以在手表和大屏上同時(shí)運(yùn)行。

代碼組成分為三個(gè)部分——模板、樣式及業(yè)務(wù)邏輯。

• 模板

基本描述了整個(gè)UI結(jié)構(gòu)。

• 樣式

對(duì)整個(gè)UI結(jié)構(gòu)的呈現(xiàn)模式進(jìn)行描述。

• 業(yè)務(wù)邏輯

具備數(shù)據(jù)綁定的聲明，以此獲取數(shù)據(jù)之間的關(guān)聯(lián)。擴(kuò)展能力聲明，可調(diào)用系統(tǒng)里面各種各樣的Ability來做功能擴(kuò)展。

在多UI自適應(yīng)上面，HarmonyOS支持業(yè)界主流機(jī)制，做到動(dòng)態(tài)布局以及UI自適應(yīng)能力。

• JS UI 為百K級(jí)設(shè)備提供輕量化框架

上述說提到的都是關(guān)于富設(shè)備的設(shè)備UI架構(gòu)。所謂的富設(shè)備，就是內(nèi)存相對(duì)比較充足的，至少有512Mb以上的。那對(duì)于輕設(shè)備，內(nèi)存較小的設(shè)備來說，HarmonyOS提供輕量化框架。

在輕量化框架中，HarmonyOS把一些核心框架做下沉，C++化及提供輕量級(jí)的JS引擎，包括UI組件，達(dá)到非常輕量的目標(biāo)，通過統(tǒng)一的開發(fā)范式，可以在百K資源上運(yùn)行起來。但由于是在輕量化的框架設(shè)備上，能力還是有限的，有些資源的限制可能API沒辦法提供，但對(duì)公共部分的API是完全共通的。

Java UI框架

與JS的聲明式不同，Java更多是面向命令式開發(fā)模式，從API維度而言會(huì)更加豐富更加細(xì)粒度一點(diǎn)。也擁有多態(tài)控件，布局等能力。

• 總體架構(gòu)

從邏輯上來說，它的整個(gè)架構(gòu)分為五個(gè)部分。

• JavaUI框架接口層

包括控件、布局、動(dòng)效和描述。

• 多態(tài)控件、布局和動(dòng)效實(shí)現(xiàn)

核心的C++層，有相應(yīng)的多態(tài)控件布局，各種各樣動(dòng)效實(shí)現(xiàn)。

• 視圖管理

生成UI控件對(duì)應(yīng)的View對(duì)象，管理View對(duì)象的生命周期(更新，掛載，卸載，刪除),維護(hù)View對(duì)象組成的UI hierarchies關(guān)系。

• 渲染樹

維護(hù)View對(duì)象對(duì)應(yīng)的Render Node, 維護(hù)UI組件變更引起的渲染樹的變更，生成Render Node對(duì)應(yīng) Draw Command。

• 2D/3D渲染引擎

執(zhí)行Draw Command, 生成UI控件所包含的線條，面，文本對(duì)象。

最終到系統(tǒng)的合成，總體構(gòu)成了整個(gè)ACE Java架構(gòu)。

• 渲染流程

這里簡(jiǎn)要描述整個(gè)渲染流程。

JavaUI渲染采用多線程設(shè)計(jì)，分為幾個(gè)階段：在應(yīng)用框架部分，創(chuàng)建窗口，創(chuàng)建相應(yīng)的Java UI接口。在資源加載之后，由相應(yīng)的UI框架組件部分轉(zhuǎn)化成Native視圖，Native視圖包括整個(gè)控件布局實(shí)現(xiàn)、動(dòng)效實(shí)現(xiàn)、視圖抽象、事件處理、渲染抽象等，同步UI線程，渲染樹會(huì)交給UI框架渲染部分(GPU線程)來做相應(yīng)的渲染以及最終的合成，這就是整個(gè)ACE Java的渲染過程。

• 應(yīng)用示例

我們來看一個(gè)Java例子，其實(shí)跟傳統(tǒng)的或說常用的Java開發(fā)模式類似。

通過XML描述整個(gè)布局，這當(dāng)中少不了多態(tài)控件的支撐。通過屬性和值來制定具體XML指定不同樣式，以此創(chuàng)建組件。創(chuàng)建完成后，開發(fā)者可以設(shè)置各種各樣的交互、相應(yīng)的事件處理及后續(xù)UI變更。當(dāng)然，HarmonyOS提供相應(yīng)的API為后續(xù)變更做支撐。

當(dāng)然多設(shè)備場(chǎng)景開發(fā)還是有很多挑戰(zhàn)，需要我們持續(xù)不斷地增強(qiáng)和提升。當(dāng)然也希望眾多的開發(fā)者一起加入進(jìn)來，與我們一起圍繞著跨設(shè)備開發(fā)相關(guān)內(nèi)容，多一些碰撞，共同把多設(shè)備開發(fā)體驗(yàn)逐步增強(qiáng)。

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com