一文詳細(xì)了解ArkUI框架新增能力

ArkUI是一套UI開發(fā)框架，它提供了開發(fā)者進(jìn)行應(yīng)用UI開發(fā)時(shí)所必須的能力。隨著OpenHarmony v3.1 Release（后文簡稱v3.1）版本的發(fā)布，ArkUI框架也增加了許多新能力，接下來跟隨小編一起看看都有哪些新增能力吧。

1 ArkUI框架新增能力概覽

本次版本更新主要提升了ArkUI框架開發(fā)大型應(yīng)用的能力。如圖1所示，藍(lán)色模塊是本次新版本ArkUI框架的新增/增強(qiáng)能力，它包括：Canvas、OffscreenCanvas、XComponent組件、Web組件、鍵盤與鼠標(biāo)以及eTS編譯打包與實(shí)時(shí)預(yù)覽能力。

圖1 ArkUI框架新增能力概覽圖

每一次能力的新增，都是為了讓開發(fā)者能夠更加高效、便捷地開發(fā)，下面一起了解一下這些新能力都將帶來哪些便捷。

為了便于大家理解，小編將本次新增的能力分成了以下三類：新增聲明式Canvas繪制能力、新增混合開發(fā)能力和增強(qiáng)UI開發(fā)能力。

1.1 新增聲明式Canvas繪制能力

新增聲明式Canvas繪制能力中包含Canvas組件和OffscreenCanvas組件。

● Canvas組件：為了方便開發(fā)者通過繪制方式實(shí)現(xiàn)自定義UI效果，v3.1版本新增了Canvas繪制能力。

● OffscreenCanvas組件：為了滿足開發(fā)者離屏繪制開發(fā)場景，v3.1版本新增了離屏繪制能力。

有了Canvas繪制能力后，v3.1版本便基于Canvas移植了Lottie的動畫庫供開發(fā)者使用，后文將詳細(xì)介紹。

1.2 新增混合開發(fā)能力

新增混合開發(fā)能力中包含了XComponent組件和Web組件。

● XComponent組件：為了便于開發(fā)者在OpenHarmony系統(tǒng)上構(gòu)建C++/TS應(yīng)用，以滿足類似游戲、地圖等應(yīng)用開發(fā)場景，v3.1版本提供了XComponent組件及其配套的NDK（native development kit，原生開發(fā)包）。

● Web組件：為了滿足開發(fā)者在應(yīng)用內(nèi)加載和訪問HTML5網(wǎng)頁的需求，v3.1版本重點(diǎn)構(gòu)建了Web組件，并提供了豐富的API，可支撐HTML5頁面與TS頁面進(jìn)行數(shù)據(jù)交互。

1.3 增強(qiáng)UI開發(fā)能力

增強(qiáng)UI開發(fā)能力中包含了鍵盤與鼠標(biāo)的組件統(tǒng)一交互能力增強(qiáng)和開發(fā)工具鏈的eTS編譯打包與實(shí)時(shí)預(yù)覽能力增強(qiáng)。

● 鍵盤與鼠標(biāo)：新版本中還重點(diǎn)提升了統(tǒng)一交互的操作體驗(yàn)，開發(fā)者無需進(jìn)行復(fù)雜適配，即可支持用戶使用鍵盤、鼠標(biāo)進(jìn)行UI交互。

● eTS編譯打包與實(shí)時(shí)預(yù)覽：為了滿足了多種狀態(tài)樣式統(tǒng)一設(shè)置的訴求，v3.1版本提供了@Style裝飾器，優(yōu)化了工具鏈的編譯性能與預(yù)覽性能，實(shí)現(xiàn)了支持多種文件大型應(yīng)用編譯。

看完這些新增能力，你也許會很好奇，它們是如何使用的呢？接下來請跟隨小編的步伐，一起了解一下這些新增能力的使用方法吧。

2 新增聲明式Canvas繪制能力

2.0.1 聲明式Canvas介紹

首先介紹一下聲明式Canvas給大家提供的繪制能力。為了更好地利用現(xiàn)有Web Canvas生態(tài)，v3.1版本提供了標(biāo)準(zhǔn)的W3C Canvas繪制接口（如圖2所示），豐富的繪制方法可以讓開發(fā)者高效繪制出矩形、文本、圖像等。

注：因OffscreenCanvas與Canvas繪制接口相同，都遵循w3c標(biāo)準(zhǔn)，故此處不再贅述

圖2 W3C Canvas繪制接口

2.0.2 使用方法

下面介紹一個(gè)示例，給大家展示聲明式開發(fā)范式中Canvas組件的基礎(chǔ)使用方法。

圖3是三張圖片疊加的效果，頂層的圖片覆蓋了底層的圖片。通過依次使用drawImage(x,y, width, height)方法設(shè)置圖片坐標(biāo)及尺寸，后面繪制的圖片自動覆蓋原來的圖像，從而達(dá)到圖片疊加顯示的效果。

圖3 圖片疊加

如下代碼所示，首先在Column()組件中創(chuàng)建了一塊畫布，并結(jié)合內(nèi)置組件與屬性方法對畫布進(jìn)行聲明式描述。

然后通過RenderingContext()獲取命令式的繪圖對象，將聲明式UI界面與命令式繪制良好地關(guān)聯(lián)起來。

最后通過onReady回調(diào)方法直接使用命令式語法，使用繪制對象在畫布中進(jìn)行繪制。

2.1 基于聲明式Canvas的Lottie動畫支持

2.1.1 介紹

Lottie是業(yè)界常用的動畫格式，它支持通過Canvas渲染，OpenHarmony團(tuán)隊(duì)為大家改造了lottie庫，命名為lottie-ohos-ets，開發(fā)者可以直接引用該庫，綁定Canvas組件后即可顯示動畫。

2.1.2 使用方法

Lottie動畫的使用主要分為以下四個(gè)步驟：

步驟一：準(zhǔn)備Lottie文件，作為資源添加（可以使用AE工具制作并導(dǎo)出JSON文件）

步驟二：引入Lottie-ohos-ets支持庫

import lottie from ‘lottie-ohos-ets’

步驟三：將lottie動畫與Canvas綁定

步驟四：顯示動畫

3 新增混合開發(fā)能力

3.1 基于XComponent的C++/TS混合開發(fā)能力

3.1.1 介紹

在應(yīng)用開發(fā)過程中，很多場景是無法直接采用UI組合實(shí)現(xiàn)的，例如游戲、地圖這種應(yīng)用需要依賴C++、 SDK進(jìn)行獨(dú)立渲染，又如相機(jī)、視頻播放器這種應(yīng)用是需要使用相機(jī)進(jìn)行預(yù)覽顯示的，因此就需要框架能提供一種可以在C++側(cè)進(jìn)行繪制的組件，于是v3.1版本就推出了XComponent組件，它可以支持C++/TS混合開發(fā)。

如圖4所示，系統(tǒng)分為應(yīng)用層、框架層和系統(tǒng)服務(wù)層，藍(lán)色模塊是新增能力。v3.1版本在框架層部分提供了聲明式的XComponent組件，以便開發(fā)者在應(yīng)用頁面中進(jìn)行使用。

圖4 XComponent的C++/TS混合開發(fā)

3.1.2 使用方法

在應(yīng)用層中，開發(fā)者可以使用系統(tǒng)NDK提供的標(biāo)準(zhǔn)庫進(jìn)行應(yīng)用動態(tài)庫的開發(fā)，標(biāo)準(zhǔn)庫中為應(yīng)用繪制提供了標(biāo)準(zhǔn)的EGL/OpenGLES接口，可以支持三方SDK直接引入使用，再結(jié)合框架層的XComponent提供的接口即可對C++進(jìn)行渲染。

基于XComponent組件的C++/TS混合開發(fā)主要分為以下幾個(gè)步驟：

步驟一：首先是開發(fā)C++動態(tài)庫。基于NDK編譯工具，將開發(fā)者編寫的CPP文件編譯成.so文件。

開發(fā)者僅需要引入頭文件，并覆蓋OnSurfaceCreate方法進(jìn)行繪制即可使用NDK提供的OpenGLES接口，實(shí)現(xiàn)繪制效果。代碼如下：

步驟二：然后通過XComponent組件加載動態(tài)庫。調(diào)用TS接口，通過TS控制C++邏輯，傳入數(shù)據(jù)與事件，即可對C++邏輯進(jìn)行渲染。

XComponent組件的使用也極其簡單，設(shè)置參數(shù)對應(yīng)動態(tài)庫名稱即可實(shí)現(xiàn)加載。代碼如下：

3.2 基于Web組件的HTML5/TS混合開發(fā)能力

3.2.1 介紹

有些應(yīng)用開發(fā)場景是在應(yīng)用中嵌入網(wǎng)頁，網(wǎng)頁可能是本地頁面，也可能是網(wǎng)絡(luò)頁面，且需要在HTML5頁面中與原生組件之間進(jìn)行數(shù)據(jù)傳遞。針對以上開發(fā)場景，v3.1版本提供了基于Web組件的HTML5/TS混合開發(fā)能力。

3.2.2 使用方法

Web組件的使用方法主要分為以下幾個(gè)步驟：

步驟一：首先提前準(zhǔn)備好HTML5頁面文件或者網(wǎng)絡(luò)地址

步驟二：然后用Web組件加載HTML5頁面

步驟三：最后就可以顯示出頁面內(nèi)容

下面通過一個(gè)例子，來為大家展示W(wǎng)eb組件加載頁面的使用步驟。如圖5所示，這是一個(gè)常見的Web組件使用場景，首先是準(zhǔn)備好網(wǎng)絡(luò)地址http://openharmony.cn并將Web組件與其他組件在同一頁面中共同縱向布局排列，然后用Web組件通過src指定首頁鏈接并加載頁面，最后頁面就構(gòu)建完成了。

圖5 Web組件的HTML5/TS混合開發(fā)

Web組件還提供了將HTML5頁面與原生TS頁面進(jìn)行交互的能力，它可以支持在原生組件頁面中執(zhí)行HTML5頁面中定義的JavaScript方法，也可以支持在HTML5頁面中使用原生頁面中注入的JavaScript對象。由于篇幅有限，此處不再針對上述能力展開介紹，開發(fā)者可以自行訪問社區(qū)開發(fā)文檔，基于runJavaScript 方法 和 registerJavaScriptProxy 方法的示例，構(gòu)建出能力更強(qiáng)的Web應(yīng)用。

社區(qū)開發(fā)文檔

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md

4 增強(qiáng)UI開發(fā)能力

4.1 鍵盤與鼠標(biāo)的組件統(tǒng)一交互能力增強(qiáng)

在v3.1版本中，ArkUI框架增強(qiáng)了統(tǒng)一交互能力，它讓應(yīng)用開發(fā)更加化繁為簡。如圖6所示，v3.1版本將鼠標(biāo)、鍵盤在組件層面進(jìn)行了統(tǒng)一，通過相同事件回調(diào)屏蔽了輸入設(shè)備類型的差異，因此開發(fā)者無需關(guān)心具體的輸入設(shè)備類型。

圖6 組件統(tǒng)一交互

4.2 開發(fā)工具鏈的eTS編譯打包與實(shí)時(shí)預(yù)覽

開發(fā)工具鏈DevEco Studio也跟隨v3.1版本的更新做了能力的增強(qiáng)，能力增強(qiáng)后的工具實(shí)現(xiàn)了支持多種文件大型應(yīng)用編譯、擁有亞秒級的實(shí)時(shí)預(yù)覽效果、組件雙向預(yù)覽能力、可以實(shí)時(shí)查看組件的屬性，且實(shí)時(shí)查看的效果已與業(yè)界持平。歡迎開發(fā)者更新最新的DevEco Studio進(jìn)行使用體驗(yàn)。

DevEco Studio下載地址：

https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony

最后介紹一下v3.1版本為大家提供的新裝飾器@Style。該裝飾器可以將樣式統(tǒng)一設(shè)置，樣式復(fù)用，同時(shí)v3.1版本針對多態(tài)效果，提供了一次性設(shè)置接口，該能力能夠最大化復(fù)用樣式設(shè)置。如圖7所示，左邊通過@Style分別定義三種樣式集合，之后通過右邊stateStyles屬性方法，同時(shí)設(shè)置給UI組件，即可實(shí)現(xiàn)圖8中三種效果，分別為正常狀態(tài)效果、按壓狀態(tài)效果和禁用狀態(tài)效果。

圖7 樣式集合

圖8 效果圖

5 結(jié)語

以上就是本期ArkUI框架新能力的全部介紹啦，歡迎大家踴躍嘗鮮。同時(shí)ArkUI框架未來會進(jìn)一步提升動態(tài)布局能力和推出跨OS平臺部署等相關(guān)能力，各位開發(fā)者敬請期待！

審核編輯：湯梓紅