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元件使用場景，首先是準備好網路地址並將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平臺部署等相關能力，各位開發者敬請期待！