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

ArkUI框架新增能力概覽

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

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

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

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

新增聲明式Canvas繪制能力

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

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

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

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

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

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

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

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

增強UI開發(fā)能力

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

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

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

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

新增聲明式Canvas繪制能力

聲明式Canvas介紹

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

注：因OffscreenCanvas與Canvas繪制接口相同，都遵循w3c標準，故此處不再贅述

圖2 W3C Canvas繪制接口

使用方法

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

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

圖3 圖片疊加

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

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

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

@Entry@Componentstruct IndexCanvas  {// 然后，獲取繪圖對象    private ctx: RenderingContext = new RenderingContext(this.settings);// 列出所要用到的圖片    private img: ImageBitmap = new ImageBitmap("common/bg.jpg");    build() {        Column() {            // 首先，創(chuàng)建canvas畫布            Canvas(this.ctx)                .width(1500)                .height(900)                .backgroundColor('#ffff00')                // 最后，開始繪制                .onReady(() => {                    this.ctx.drawImage( this.img, 400, 200, 540, 300);                    this.ctx.drawImage( this.img, 500, 300, 540, 300);                    this.ctx.drawImage( this.img, 600, 400, 540, 300);                })        }        .width('100%')        .height('100%')    }}

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

介紹

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

使用方法

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

步驟一：準備 Lottie 文件，作為資源添加（可以使用 AE 工具制作并導出 JSON 文件）

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

import lottie from ‘lottie-ohos-ets’

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

Canvas(this.context)        .onAppear(() => {          //  隨Canvas布局自動加載動畫          let anim = lottie.loadAnimation({            container: this.context,            renderer: ‘canvas’,            name:‘a(chǎn)nimation’,            path: ‘common/lottie/ventilation_1.json’          })})

步驟四：顯示動畫

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

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

介紹

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

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

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

使用方法

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

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

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

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

// C++ 渲染模塊#include #include #include #include // NDKvoid OnSurfaceCreate(OH_NativeXComponent* component, void* nativewindow)  {         mEglWindow = static_cast(nativewindow);    mEGLSurface = eglCreateWindowSurface        (mEGLDisplay, mEGLConfig, mEglWindow, winAttribs);    // GLES Logic……    eglSwapBuffers(display, eglsurface);}

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

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

XComponent({ id: 'xcomponentId', type: 'texture',  libraryname: 'mynativerender'})

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

介紹

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

使用方法

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

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

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

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

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

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

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

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

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

增強UI開發(fā)能力

鍵盤與鼠標的組件統(tǒng)一交互能力增強

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

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

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

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

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

圖7 樣式集合

圖8 效果圖

結(jié)語

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