程序員Feri一名12年+的程序員,做過開發帶過團隊創過業,擅長Java相關開發、鴻蒙開發、人工智能等,專注于程序員搞錢那點兒事,希望在搞錢的路上有你相伴！君志所向,一往無前！

0.前言

在移動開發領域，長期以來存在著兩大陣營：iOS和Android。為了滿足不同平臺的需求，開發者往往需要分別編寫兩套代碼，這無疑增加了開發成本和維護難度。在這種背景下，跨平臺UI框架應運而生，旨在實現“一套代碼，多平臺運行”。

目前主流的跨端開發框架：

1. React Native由Facebook開發
2. Flutter是由Google公司開發的
3. uni-app 是國內的DCloud開發的
4. ArkUI 是華為推出一款跨平臺
5. Weex是由阿里巴巴開發的跨平臺

1.ArkUI是什么

ArkUI（方舟UI框架）正是在這樣的背景下誕生的。它是一款基于Web技術棧的跨平臺UI框架，采用聲明式語法，使得開發者可以輕松地構建美觀、流暢的跨平臺應用。是華為推出的一款跨平臺用戶界面（UI）開發框架，它是華為HarmonyOS（鴻蒙操作系統）的一部分，旨在為開發者提供一種統一的方式來構建適用于多種設備的用戶界面。

ArkUI（方舟UI框架）為應用的UI開發提供了完整的基礎設施，包括簡潔的UI語法、豐富的UI功能（組件、布局、動畫以及交互事件），以及實時界面預覽工具等，可以支持開發者進行可視化界面開發。

2.ArkUI開發范式

針對不同的應用場景及技術背景，方舟UI框架提供了兩種開發范式，分別是基于ArkTS的聲明式開發范式（簡稱“聲明式開發范式”）和兼容JS的類Web開發范式（簡稱“類Web開發范式”）。針對2種模式的說明，如下所示：

1. 聲明式開發范式：采用基于TypeScript聲明式UI語法擴展而來的ArkTS語言，從組件、動畫和狀態管理三個維度提供UI繪制能力。
2. 類Web開發范式：采用經典的HML、CSS、JavaScript三段式開發方式，即使用HML標簽文件搭建布局、使用CSS文件描述樣式、使用JavaScript文件處理邏輯。該范式更符合于Web前端開發者的使用習慣，便于快速將已有的Web應用改造成方舟UI框架應用。

目前推薦使用的是聲明式開發，為什么呢，主要基于以下幾點考慮：

• 開發效率： 聲明式開發范式更接近自然語義的編程方式，開發者可以直觀地描述UI，無需關心如何實現UI繪制和渲染，開發高效簡潔。
• 應用性能： 如下圖所示，兩種開發范式的UI后端引擎和語言運行時是共用的，但是相比類Web開發范式，聲明式開發范式無需JS框架進行頁面DOM管理，渲染更新鏈路更為精簡，占用內存更少，應用性能更佳。
• 發展趨勢：聲明式開發范式后續會作為主推的開發范式持續演進，為開發者提供更豐富、更強大的能力。

3.ArkUI聲明式開發

基于ArkTS的聲明式開發范式的方舟開發框架是一套開發極簡、高性能、支持跨設備的UI開發框架，提供了構建應用UI所必需的能力，主要包括以下幾點：

1.ArkTS

ArkTS是優選的主力應用開發語言，圍繞應用開發在TypeScript（簡稱TS）生態基礎上做了進一步擴展。

擴展能力包含聲明式UI描述、自定義組件、動態擴展UI元素、狀態管理和渲染控制。

狀態管理作為基于ArkTS的聲明式開發范式的特色，通過功能不同的裝飾器給開發者提供了清晰的頁面更新渲染流程和管道。

狀態管理包括UI組件狀態和應用程序狀態，兩者協作可以使開發者完整地構建整個應用的數據更新和UI渲染。

2.布局

布局是UI的必要元素，它定義了組件在界面中的位置。

ArkUI框架提供了多種布局方式，除了基礎的線性布局、層疊布局、彈性布局、相對布局、柵格布局外，也提供了相對復雜的列表、宮格、輪播等。

3.組件

組件是UI的必要元素，形成了在界面中的樣子，由框架直接提供的稱為系統組件，由開發者定義的稱為自定義組件。

系統內置組件包括按鈕、單選框、進度條、文本等。開發者可以通過鏈式調用的方式設置系統內置組件的渲染效果。

我們也可以將系統內置組件組合為自定義組件，通過這種方式將頁面組件化為一個個獨立的UI單元，實現頁面不同單元的獨立創建、開發和復用，具有更強的工程性。

4.頁面路由和組件導航

應用可能包含多個頁面，可通過頁面路由實現頁面間的跳轉。一個頁面內可能存在組件間的導航如典型的分欄，可通過導航組件實現組件間的導航。

5.圖形

方舟開發框架提供了多種類型圖片的顯示能力和多種自定義繪制的能力，以滿足開發者的自定義繪圖需求，支持繪制形狀、填充顏色、繪制文本、變形與裁剪、嵌入圖片等。

6.動畫

動畫是UI的重要元素之一。優秀的動畫設計能夠極大地提升用戶體驗，框架提供了豐富的動畫能力，除了組件內置動畫效果外，還包括屬性動畫、顯式動畫、自定義轉場動畫以及動畫API等，開發者可以通過封裝的物理模型或者調用動畫能力API來實現自定義動畫軌跡。

7.交互事件

交互事件是UI和用戶交互的必要元素。方舟開發框架提供了多種交互事件，除了觸摸事件、鼠標事件、鍵盤按鍵事件、焦點事件等通用事件外，還包括基于通用事件進行進一步識別的手勢事件。手勢事件有單一手勢如點擊手勢、長按手勢、拖動手勢、捏合手勢、旋轉手勢、滑動手勢，以及通過單一手勢事件進行組合的組合手勢事件。

8.自定義能力

自定義能力是UI開發框架提供給開發者對UI界面進行開發和定制化的能力。包括：自定義組合、自定義擴展、自定義節點和自定義渲染。

4.聲明式開發范式的好處

4.1開發效率高，開發體驗好

代碼簡潔：通過接近自然語義的方式描述UI，不必關心框架如何實現UI繪制和渲染。

數據驅動UI變化：讓開發者更專注自身業務邏輯的處理。當UI發生變化時，開發者無需編寫在不同的UI之間進行切換的UI代碼， 開發人員僅需要編寫引起界面變化的數據，具體UI如何變化交給框架。

開發體驗好：界面也是代碼，讓開發者的編程體驗得到提升。

4.2 性能優越

聲明式UI前端和UI后端分層：UI后端采用C++語言構建，提供對應前端的基礎組件、布局、動效、交互事件、組件狀態管理和渲染管線。

語言編譯器和運行時的優化：統一字節碼、高效FFI（Foreign Function Interface）、AOT（Ahead Of Time）、引擎極小化、類型優化等。

4.3 生態容易快速推進

能夠借力主流語言生態快速推進，語言相對中立友好，有相應的標準組織可以逐步演進

5.ArkUI架構體系

1.聲明式UI前端

提供了UI開發范式的基礎語言規范，并提供內置的UI組件、布局和動畫，提供了多種狀態管理機制，為應用開發者提供一系列接口支持。

2.語言運行時

選用方舟語言運行時，提供了針對UI范式語法的解析能力、跨語言調用支持的能力和TS語言高性能運行環境。

3.聲明式UI后端引擎

后端引擎提供了兼容不同開發范式的UI渲染管線，提供多種基礎組件、布局計算、動效、交互事件，提供了狀態管理和繪制能力。

4.渲染引擎

提供了高效的繪制能力，將渲染管線收集的渲染指令，繪制到屏幕的能力。

5.平臺適配層

提供了對系統平臺的抽象接口，具備接入不同系統的能力，如系統渲染管線、生命周期調度等。

好啦，本篇文章就到這里了，希望本篇可以為你帶來新知識，關注我，跟著我搞起來！