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

1 ArkUI框架新增能力概覽

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

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

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

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

1.1 新增聲明式Canvas繪制能力

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

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

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

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

1.2 新增混合開發能力

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

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

● Web組件：為了滿足開發者在應用內加載和訪問HTML5網頁的需求，v3.1版本重點構建了Web組件，并提供了豐富的API，可支撐HTML5頁面與TS頁面進行數據交互。

1.3 增強UI開發能力

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

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

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

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

2 新增聲明式Canvas繪制能力

2.0.1 聲明式Canvas介紹

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

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

圖2 W3C Canvas繪制接口

2.0.2 使用方法

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

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

圖3 圖片疊加

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

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

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

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

2.1.1 介紹

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

2.1.2 使用方法

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

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

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

import lottie from ‘lottie-ohos-ets’

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

步驟四：顯示動畫

3 新增混合開發能力

3.1 基于XComponent的C++/TS混合開發能力

3.1.1 介紹

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

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

圖4 XComponent的C++/TS混合開發

3.1.2 使用方法

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

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

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

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

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

XComponent組件的使用也極其簡單，設置參數對應動態庫名稱即可實現加載。代碼如下：

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

3.2.1 介紹

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

3.2.2 使用方法

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

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

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

步驟三：最后就可以顯示出頁面內容

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

圖5 Web組件的HTML5/TS混合開發

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

社區開發文檔

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

4 增強UI開發能力

4.1 鍵盤與鼠標的組件統一交互能力增強

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

圖6 組件統一交互

4.2 開發工具鏈的eTS編譯打包與實時預覽

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

DevEco Studio下載地址：

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

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

圖7 樣式集合

圖8 效果圖

5 結語

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