ArkUI 是一套 UI 開發(fā)框架,它提供了開發(fā)者進(jìn)行應(yīng)用 UI 開發(fā)時所必須的能力。隨著 OpenAtom OpenHarmony(以下簡稱“OpenHarmony”) 3.1 Release(以下簡稱 v3.1)版本的發(fā)布,ArkUI 框架也增加了許多新能力,接下來跟隨小編一起看看都有哪些新增能力吧。
ArkUI框架新增能力概覽
本次版本更新主要提升了 ArkUI 框架開發(fā)大型應(yīng)用的能力。如圖 1 所示,藍(lán)色模塊是本次新版本 ArkUI 框架的新增/增強(qiáng)能力,它包括:Canvas、OffscreenCanvas、XComponent 組件、Web 組件、鍵盤與鼠標(biāo)以及 eTS 編譯打包與實(shí)時預(yù)覽能力。
每一次能力的新增,都是為了讓開發(fā)者能夠更加高效、便捷地開發(fā),下面一起了解一下這些新能力都將帶來哪些便捷。
為了便于大家理解,小編將本次新增的能力分成了以下三類:新增聲明式 Canvas 繪制能力、新增混合開發(fā)能力和增強(qiáng) UI 開發(fā)能力。
新增聲明式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ì)介紹。
新增混合開發(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ù)交互。
增強(qiáng)UI開發(fā)能力
增強(qiáng) UI 開發(fā)能力中包含了鍵盤與鼠標(biāo)的組件統(tǒng)一交互能力增強(qiáng)和開發(fā)工具鏈的 eTS 編譯打包與實(shí)時預(yù)覽能力增強(qiáng)。
●鍵盤與鼠標(biāo):新版本中還重點(diǎn)提升了統(tǒng)一交互的操作體驗(yàn),開發(fā)者無需進(jìn)行復(fù)雜適配,即可支持用戶使用鍵盤、鼠標(biāo)進(jìn)行 UI 交互。
●eTS編譯打包與實(shí)時預(yù)覽:為了滿足了多種狀態(tài)樣式統(tǒng)一設(shè)置的訴求,v3.1 版本提供了 @Style 裝飾器,優(yōu)化了工具鏈的編譯性能與預(yù)覽性能,實(shí)現(xiàn)了支持多種文件大型應(yīng)用編譯。
看完這些新增能力,你也許會很好奇,它們是如何使用的呢?接下來請跟隨小編的步伐,一起了解一下這些新增能力的使用方法吧。
新增聲明式Canvas繪制能力
聲明式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繪制接口
使用方法
下面介紹一個示例,給大家展示聲明式開發(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)行繪制。
struct 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 團(tuán)隊(duì)為大家改造了 Lottie 庫,命名為 lottie-ohos-ets,開發(fā)者可以直接引用該庫,綁定 Canvas 組件后即可顯示動畫。
使用方法
Lottie 動畫的使用主要分為以下四個步驟:
步驟一:準(zhǔn)備 Lottie 文件,作為資源添加(可以使用 AE 工具制作并導(dǎo)出 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ā)能力
介紹
在應(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ā)
使用方法
在應(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ā)主要分為以下幾個步驟:
步驟一:首先是開發(fā) C++ 動態(tài)庫?;?NDK 編譯工具,將開發(fā)者編寫的 CPP 文件編譯成 .so 文件。
開發(fā)者僅需要引入頭文件,并覆蓋 OnSurfaceCreate 方法進(jìn)行繪制即可使用 NDK 提供的 OpenGLES 接口,實(shí)現(xiàn)繪制效果。代碼如下:
// C++ 渲染模塊
// NDK
void 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++ 邏輯進(jìn)行渲染。
XComponent 組件的使用也極其簡單,設(shè)置參數(shù)對應(yīng)動態(tài)庫名稱即可實(shí)現(xiàn)加載。代碼如下:
XComponent({ id: 'xcomponentId', type: 'texture', libraryname: 'mynativerender'})
基于Web組件的HTML5/TS混合開發(fā)能力
介紹
有些應(yīng)用開發(fā)場景是在應(yīng)用中嵌入網(wǎng)頁,網(wǎng)頁可能是本地頁面,也可能是網(wǎng)絡(luò)頁面,且需要在 HTML5 頁面中與原生組件之間進(jìn)行數(shù)據(jù)傳遞。針對以上開發(fā)場景,v3.1 版本提供了基于 Web 組件的 HTML5/TS 混合開發(fā)能力。
使用方法
Web 組件的使用方法主要分為以下幾個步驟:
步驟一:首先提前準(zhǔn)備好 HTML5 頁面文件或者網(wǎng)絡(luò)地址
步驟二:然后用 Web 組件加載 HTML5 頁面
步驟三:最后就可以顯示出頁面內(nèi)容
下面通過一個例子,來為大家展示 Web 組件加載頁面的使用步驟。如圖 5 所示,這是一個常見的 Web 組件使用場景,首先是準(zhǔn)備好網(wǎng)絡(luò)地址 https://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
增強(qiáng)UI開發(fā)能力
鍵盤與鼠標(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)一交互
開發(fā)工具鏈的eTS編譯打包與實(shí)時預(yù)覽
開發(fā)工具鏈 DevEco Studio 也跟隨 v3.1 版本的更新做了能力的增強(qiáng),能力增強(qiáng)后的工具實(shí)現(xiàn)了支持多種文件大型應(yīng)用編譯、擁有亞秒級的實(shí)時預(yù)覽效果、組件雙向預(yù)覽能力、可以實(shí)時查看組件的屬性,且實(shí)時查看的效果已與業(yè)界持平。歡迎開發(fā)者更新最新的 DevEco Studio 進(jìn)行使用體驗(yàn)。
最后介紹一下 v3.1 版本為大家提供的新裝飾器 @Style。該裝飾器可以將樣式統(tǒng)一設(shè)置,樣式復(fù)用,同時 v3.1 版本針對多態(tài)效果,提供了一次性設(shè)置接口,該能力能夠最大化復(fù)用樣式設(shè)置。如圖 7 所示,左邊通過 @Style 分別定義三種樣式集合,之后通過右邊 stateStyles 屬性方法,同時設(shè)置給 UI 組件,即可實(shí)現(xiàn)圖 8 中三種效果,分別為正常狀態(tài)效果、按壓狀態(tài)效果和禁用狀態(tài)效果。
圖7 樣式集合
圖8 效果圖
結(jié)語
以上就是本期 ArkUI 框架新能力的全部介紹啦,歡迎大家踴躍嘗鮮。同時 ArkUI 框架未來會進(jìn)一步提升動態(tài)布局能力和推出跨 OS 平臺部署等相關(guān)能力,各位開發(fā)者敬請期待!
審核編輯 :李倩
-
開發(fā)
+關(guān)注
關(guān)注
0文章
373瀏覽量
41488 -
框架
+關(guān)注
關(guān)注
0文章
404瀏覽量
17874
原文標(biāo)題:ArkUI 框架又有哪些新增能力?
文章出處:【微信號:HarmonyOS_Community,微信公眾號:電子發(fā)燒友開源社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。
發(fā)布評論請先 登錄
【HarmonyOS next】ArkUI-X新聞熱搜聚合App【進(jìn)階】
【HarmonyOS next】ArkUI-X休閑益智兒童拼圖【進(jìn)階】
【HarmonyOS next】ArkUI-X休閑益智猜字謎【基礎(chǔ)】
ArkUI介紹
ArkUI-X案例解析
ArkUI-X平臺橋接Bridge說明
ArkUI-X應(yīng)用工程結(jié)構(gòu)說明
ArkUI-X跨平臺應(yīng)用改造指南
ArkUI-X與Android聯(lián)動編譯開發(fā)指南
ArkUI-X在Android平臺動態(tài)化開發(fā)指南
ArkUI-X框架LogInterface使用指南
ArkUI-X與Android消息通信
ArkUI-X中Plugin生命周期開發(fā)指南
ArkUI-X跨平臺框架接入指南
HarmonyOS開發(fā)指導(dǎo)類文檔更新速遞(上)

評論