ArkUI 是一套 UI 開發框架，它提供了開發者進行應用 UI 開發時所必須的能力。隨著 OpenAtom OpenHarmony（以下簡稱“OpenHarmony”） 3.1 Release（以下簡稱 v3.1）版本的釋出，ArkUI 框架也增加了許多新能力，接下來一起看看都有哪些新增能力吧。
ArkUI框架新增能力概覽
本次版本更新主要提升了 ArkUI 框架開發大型應用的能力。如圖 1 所示，藍色模組是本次新版本 ArkUI 框架的新增/增強能力，它包括：Canvas、OffscreenCanvas、XComponent 元件、Web 元件、鍵盤與滑鼠以及 eTS 編譯打包與實時預覽能力。
圖1 ArkUI框架新增能力概覽圖每一次能力的新增，都是為了讓開發者能夠更加高效、便捷地開發，下面一起了解一下這些新能力都將帶來哪些便捷。
為了便於大家理解，本次新增的能力分成了以下三類：新增宣告式 Canvas 繪製能力、新增混合開發能力和增強 UI 開發能力。
新增宣告式Canvas繪製能力
新增宣告式 Canvas 繪製能力中包含 Canvas 元件和 OffscreenCanvas 元件。
● Canvas元件：為了方便開發者通過繪製方式實現自定義 UI 效果，v3.1 版本新增了 Canvas 繪製能力。
● OffscreenCanvas元件：為了滿足開發者離屏繪製開發場景，v3.1 版本新增了離屏繪製能力。
有了 Canvas 繪製能力後，v3.1 版本便基於 Canvas 移植了 Lottie 的動畫庫供開發者使用，後文將詳細介紹。
新增混合開發能力
新增混合開發能力中包含了 XComponent 元件和 Web 元件。
● XComponent元件：為了便於開發者在 OpenHarmony 系統上構建 C++/TS 應用，以滿足類似遊戲、地圖等應用開發場景，v3.1 版本提供了 XComponent 元件及其配套的 NDK（native development kit，原生開發包）。
● Web元件：為了滿足開發者在應用內載入和訪問 HTML5 網頁的需求，v3.1 版本重點構建了 Web 元件，並提供了豐富的 API，可支撐 HTML5 頁面與 TS 頁面進行資料互動。
增強UI開發能力
增強 UI 開發能力中包含了鍵盤與滑鼠的元件統一互動能力增強和開發工具鏈的 eTS 編譯打包與實時預覽能力增強。
● 鍵盤與滑鼠：新版本中還重點提升了統一互動的操作體驗，開發者無需進行復雜適配，即可支援使用者使用鍵盤、滑鼠進行 UI 互動。
● eTS編譯打包與實時預覽：為了滿足了多種狀態樣式統一設定的訴求，v3.1 版本提供了 @Style 裝飾器，優化了工具鏈的編譯效能與預覽效能，實現了支援多種檔案大型應用編譯。
看完這些新增能力，你也許會很好奇，它們是如何使用的呢？接下來一起了解一下這些新增能力的使用方法吧。
新增宣告式Canvas繪製能力
宣告式Canvas介紹
首先介紹一下宣告式 Canvas 給大家提供的繪製能力。為了更好地利用現有 Web Canvas 生態，v3.1 版本提供了標準的 W3C Canvas 繪製介面（如圖 2 所示），豐富的繪製方法可以讓開發者高效繪製出矩形、文字、影像等。
注：因OffscreenCanvas與Canvas繪製介面相同，都遵循w3c標準，故此處不再贅述
使用方法
下面介紹一個示例，給大家展示宣告式開發正規化中 Canvas 元件的基礎使用方法。
圖 3 是三張圖片疊加的效果，頂層的圖片覆蓋了底層的圖片。通過依次使用 drawImage(x,y, width, height)方法設定圖片座標及尺寸，後面繪製的圖片自動覆蓋原來的影像，從而達到圖片疊加顯示的效果。
如下程式碼所示，首先在 Column() 元件中建立了一塊畫布，並結合內建元件與屬性方法對畫布進行宣告式描述。
然後通過 RenderingContext() 獲取命令式的繪圖物件，將宣告式 UI 介面與命令式繪製良好地關聯起來。
最後通過 onReady 回撥方法直接使用命令式語法，使用繪製物件在畫布中進行繪製。
@Entry
@Component
struct IndexCanvas {
// 然後，獲取繪圖物件
private ctx: RenderingContext = new RenderingContext(this.settings);
// 列出所要用到的圖片
private img: ImageBitmap = new ImageBitmap("common/bg.jpg");
build() {
Column() {
// 首先，建立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 是業界常用的動畫格式，它支援通過 Canvas 渲染，OpenHarmony 團隊為大家改造了 Lottie 庫，命名為 lottie-ohos-ets，開發者可以直接引用該庫，繫結 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:‘animation’,
path: ‘common/lottie/ventilation_1.json’
})
})步驟四：顯示動畫
新增混合開發能力
基於XComponent的C++/TS混合開發能力
介紹
在應用開發過程中，很多場景是無法直接採用 UI 組合實現的，例如遊戲、地圖這種應用需要依賴 C++、 SDK 進行獨立渲染，又如相機、視訊播放器這種應用是需要使用相機進行預覽顯示的，因此就需要框架能提供一種可以在 C++ 側進行繪製的元件，於是 v3.1 版本就推出了 XComponent 元件，它可以支援 C++/TS 混合開發。
如圖 4 所示，系統分為應用層、框架層和系統服務層，藍色模組是新增能力。v3.1 版本在框架層部分提供了宣告式的 XComponent 元件，以便開發者在應用頁面中進行使用。
使用方法
在應用層中，開發者可以使用系統 NDK 提供的標準庫進行應用動態庫的開發，標準庫中為應用繪製提供了標準的 EGL/OpenGLES 介面，可以支援三方 SDK 直接引入使用，再結合框架層的 XComponent 提供的介面即可對 C++ 進行渲染。
基於 XComponent 元件的 C++/TS 混合開發主要分為以下幾個步驟：
步驟一：首先是開發 C++ 動態庫。基於 NDK 編譯工具，將開發者編寫的 CPP 檔案編譯成 .so 檔案。
開發者僅需要引入標頭檔案，並覆蓋 OnSurfaceCreate 方法進行繪製即可使用 NDK 提供的 OpenGLES 介面，實現繪製效果。程式碼如下：
// C++ 渲染模組
#include <ace/xcomponent/native_interface_xcomponent.h>
#include <EGL/egl.h>
#include <GLES/gl.h>
#include <stdio.h>
// NDK
void OnSurfaceCreate(OH_NativeXComponent* component, void* nativewindow) {
mEglWindow = static_cast<EGLNativeWindowType>(nativewindow);
mEGLSurface = eglCreateWindowSurface
(mEGLDisplay, mEGLConfig, mEglWindow, winAttribs);
// GLES Logic……
eglSwapBuffers(display, eglsurface);
}步驟二：然後通過 XComponent 元件載入動態庫。呼叫 TS 介面，通過 TS 控制 C++ 邏輯，傳入資料與事件，即可對 C++ 邏輯進行渲染。
XComponent 元件的使用也極其簡單，設定引數對應動態庫名稱即可實現載入。程式碼如下：
XComponent({ id: 'xcomponentId', type: 'texture', libraryname: 'mynativerender'})基於Web元件的HTML5/TS混合開發能力
介紹
有些應用開發場景是在應用中嵌入網頁，網頁可能是本地頁面，也可能是網路頁面，且需要在 HTML5 頁面中與原生元件之間進行資料傳遞。針對以上開發場景，v3.1 版本提供了基於 Web 元件的 HTML5/TS 混合開發能力。
使用方法
Web 元件的使用方法主要分為以下幾個步驟：
步驟一：首先提前準備好 HTML5 頁面檔案或者網路地址
步驟二：然後用 Web 元件載入 HTML5 頁面
步驟三：最後就可以顯示出頁面內容
下面通過一個例子，來為大家展示 Web 元件載入頁面的使用步驟。如圖 5 所示，這是一個常見的 Web 元件使用場景，首先是準備好網路地址 https://openharmony.cn 並將 Web 元件與其他元件在同一頁面中共同縱向佈局排列，然後用 Web 元件通過 src 指定首頁連結並載入頁面，最後頁面就構建完成了。
Web 元件還提供了將 HTML5 頁面與原生 TS 頁面進行互動的能力，它可以支援在原生元件頁面中執行 HTML5 頁面中定義的 JavaScript 方法，也可以支援在 HTML5 頁面中使用原生頁面中注入的 JavaScript 物件。由於篇幅有限，此處不再針對上述能力展開介紹，開發者可以自行訪問社群開發文件，基於 runJavaScript 方法和 registerJavaScriptProxy 方法的示例，構建出能力更強的 Web 應用。
社群開發文件
https://gitee.com/openharmony...
增強UI開發能力
鍵盤與滑鼠的元件統一互動能力增強
在 v3.1 版本中，ArkUI 框架增強了統一互動能力，它讓應用開發更加化繁為簡。如圖 6 所示，v3.1 版本將滑鼠、鍵盤在元件層面進行了統一，通過相同事件回撥遮蔽了輸入裝置型別的差異，因此開發者無需關心具體的輸入裝置型別。
開發工具鏈的eTS編譯打包與實時預覽
開發工具鏈 DevEco Studio 也跟隨 v3.1 版本的更新做了能力的增強，能力增強後的工具實現了支援多種檔案大型應用編譯、擁有亞秒級的實時預覽效果、元件雙向預覽能力、可以實時檢視元件的屬性，且實時檢視的效果已與業界持平。歡迎開發者更新最新的 DevEco Studio 進行使用體驗。
最後介紹一下 v3.1 版本為大家提供的新裝飾器 @Style。該裝飾器可以將樣式統一設定，樣式複用，同時 v3.1 版本針對多型效果，提供了一次性設定介面，該能力能夠最大化複用樣式設定。如圖 7 所示，左邊通過 @Style 分別定義三種樣式集合，之後通過右邊 stateStyles 屬性方法，同時設定給 UI 元件，即可實現圖 8 中三種效果，分別為正常狀態效果、按壓狀態效果和禁用狀態效果。
結語
以上就是本期 ArkUI 框架新能力的全部介紹啦，歡迎大家踴躍嚐鮮。同時 ArkUI 框架未來會進一步提升動態佈局能力和推出跨 OS 平臺部署等相關能力，各位開發者敬請期待！
