ArkUI 是為 OpenAtom OpenHarmony（以下簡稱“OpenHarmony”）設計的應用開發框架，該框架接近自然語言，開發難度小，可以提升開發效率。還有運行效率高等特點，方便開發者更加直觀便捷地進行 UI 開發。第三期戰“碼”先鋒直播間圍繞 ArkUI，邀請了華為終端 BG OpenHarmony 主任工程師 Sun Fei，為大家帶來《參與 ArkUI，共建 OpenHarmony 繁榮生態》。為大家講解：什么是 ArkUI、ArkUI 開發框架的架構、開發者參與開源共建的價值和開發者如何參與貢獻。

參與戰“碼”先鋒，PR 征集令！你可以在 Gitee 的 OpenHarmony 代碼倉提交 PR 參與活動，和全球開發者同臺競技，比拼技藝，為 OpenHarmony 生態建設貢獻力量。

什么是ArkUI

UI開發框架介紹

了解 ArkUI 前，大家首先需要了解什么是UI開發框架。Sun Fei 從三個角度介紹：①站在開發者角度來看，他們最關心的是編程語言，如界面描述需要用 xml、css 來描述布局還是其它的方式，調試是否方便。②從系統視角來看，開發框架給應用提供了一個運行環境和基礎的能力。當一個程序即應用包安裝到系統中，通過系統應用管理的能力將應用運行起來，就進入了 UI 開發框架的運行環境中。環境中提供了組件、事件、動效基礎的能力，以及一套渲染管線，它們負責把應用中的代碼轉換成最終的內容寫入硬件層，并呈現在最終的屏幕上。③從用戶的視角來看，最直觀的就是視覺和交互效果：如動畫的連貫流暢度，響應的快慢，幀率的高低等，這將直接影響用戶對應用的使用體驗。一個優秀的開發框架主要圍繞這三點來設計；對開發者有更好的開發體驗，在系統中能發揮框架的優勢，做到更好的性能和更優的資源占用；能更快地響應，讓用戶體驗更流暢。

ArkUI開發框架介紹

ArkUI 是為 OpenHarmony 設計的應用開發框架，該框架提供兩種 UI 編程范式：ArkUI JS 類 Web 范式和 Ark eTS 聲明式 UI 范式。ArkUI JS 主要是為 Web 開發人員提供的快速開發 OpenHarmony 應用的開發框架，采用 JavaScript 作為開發語言，同時提供不同算力平臺支持的組件供開發者使用；ArkUI eTS 聲明式 UI 范式框架是一種采用極簡 DSL 的界面描述語法，采用 TypeScript 作為開發語言，同時在 TypeScript 的語法基礎上提供了裝飾器、尾隨閉包等擴展語法。ArkUI eTS 主要是為 OpenHarmony 標準設備提供快速開發的 UI 框架，同時 ArkUI eTS 開發框架還封裝了純 JS 的系統能力接口，開發者可以通過簡單的接口調用，實現從 UI 設計到系統能力調用的極簡開發。

另外，ArkUI 開發框架在 UI 組件方面，提供了多種開箱即用的組件：如文本顯示、圖片顯示、按鍵交互等；在布局上，提供了多種布局方式：彈性布局、列表、宮格、柵格布局等；也提供了屬性動畫、轉場動畫和自定義動畫能力；同時，ArkUI 開發框還提供了多種繪制能力，支持圖形繪制、顏色填充、文本繪制、圖片繪制等；交互事件：提供了多種交互能力，應用在不同平臺通過不同輸入設備均可正常進行 UI 交互響應；另外還提供了 API 擴展機制，通過此種機制進行封裝風格統一的 JS 接口。

兩種開發范式的示例

上文提到了兩種開發范式中，Web 開發范式是一個典型的三段式的開發模式。它是通過類似 xml 的格式來描述 UI 結構，通過 css 描述界面的樣式，通過 JavaScript 完成業務邏輯。同時，框架也提供了一些數據綁定、事件綁定、API 擴展的基礎能力，并提供 mediaQuery 完成響應式布局，做到多設備的適配。

第二個是聲明式范式，這里實現了從啟動界面跳轉到內容列表。從頁面呈現的代碼可以看出，有些代碼中帶有“@”符號，其中“@”被稱之為“裝飾器”，主要用來裝飾：類、結構體、方法以及變量，賦予其特殊的含義，如示例中 @Entry 表示頁面的入口組件，@Component 表示是自定義的組件，這些都是裝飾器。另外，如上述被 @Component 裝飾的 struct Logo，被稱之為自定義組件，它是可復用的 UI 單元，可組合其它組件，其它組件可以是內置組件比如 Flex、Shape 等。

其它還有：

?UI 描述：聲明式的方式來描述 UI 的結構，如上述 build（） 方法內部的代碼塊。

?內置組件：框架中默認內置的基礎和布局組件，可直接被開發者調用，如代碼中的 Flex、Path、Button。

?屬性方法：用于組件屬性的配置，統一通過屬性方法進行設置，如代碼中的 scale（）、opacity（）、color（） 等。

?事件方法：用于添加組件對事件的響應邏輯，統一通過事件方法進行設置，如跟隨在 Animator 后面的 onFrame（）、onFinish（）。

以上是聲明式開發的一些基礎概念，通過自定義組件的組合，加上一些 API 的能力，就可以簡單地開發 UI 界面了。

說到 ArkUI 開發框架，不得不提的是 DevEco Studio。它集成了實時預覽的能力，讓開發者寫 UI 代碼的時候可以做到所見即所得，并且可以在預覽器上點擊組件對代碼進行定位，也可以做到 UI 界面和代碼的雙向跳轉。這樣開發者可以實時查看、編輯對應組件的屬性，讓代碼開發起來更方便。

ArkUI開發框架的架構

ArkUI架構

ArkUI 架構主要圍繞開發效率、性能體驗、多平臺支持進行設計。?開發效率：能夠兼顧兩種開發范式，方便不同經驗的開發者進行選擇，并結合工具鏈的能力，提升開發和調試的效率。?性能體驗：結合方舟編譯器和 Runtime，提升語言的執行效率；另外，使用 C++ 開發的聲明是 UI 后端保證了渲染引擎較高的性能。

?多平臺支持：提供 NAPI 的擴展機制，橋接到不同平臺的實現層，保證 API 的一致性。此外，還支持跨平臺運行，例如設備端的效果在 PC 端的預覽，是利用引擎的跨平臺性，完全復用引擎層的代碼，這樣能保證渲染的一致性。

ArkUI完整流程涉及代碼倉

如果想參與 ArkUI 的貢獻，可以先了解一下 ArkUI 完整生命周期的各個環節以及過程中涉及的代碼倉。首先，開發者會基于我們的 DevEco Studio 進行應用的開發，DevEco Studio 會集成 ArkUI 提供的 SDK 和工具鏈。大家可以在這幾個代碼倉找到開發者提交一些新的組件、API 以及工具鏈相關的能力進行學習和貢獻。

當開發者寫的代碼編譯成應用包，會經過應用市場或其它的渠道進行分發，最終安裝到終端設備上，設備上會包含 ArkUI 的運行環境，提供基礎的組件和 API。這個運行環境就是 ArkUI 框架部署在終端上的形態，提供 ArkUI 的運行環境。ArkUI 框架涉及到了核心引擎代碼倉和能力擴展代碼倉。對于類 Web 范式還有一個 JS 的 Framework，是用 JavaScript 實現的一個前端框架。大家有興趣的話，可以到對應的倉進行學習和貢獻。

ArkUI核心代碼的模塊結構

接下來，Sun Fei 給大家介紹ArkUI核心代碼的模塊結構以及代碼的目錄結構，方便大家閱讀相關的源碼。首先，在前端框架層，針對類 Web 范式和聲明式范式分別會有一個 JS/TS 實現的框架代碼。類 Web 的 JSFramework 中，會實現模板的解析、數據綁定、虛擬 DOM 等能力。對于聲明式框架會有一個十分輕量的框架 StateMgmt，主要負責狀態管理的能力。然后，ACE Engine 是核心引擎代碼，由 C++ 開發，目錄結構如下：

foundation/arkui/ace_engine├── ace_config.gni // 全局配置文件├── adapter // 平臺適配層│ ├── ohos // OpenHarmony平臺適配│ └── preview // 預覽器平臺適配├── build // 編譯配置├── BUILD.gn // 全局編譯配置├── frameworks // 引擎框架層│ ├── base // base庫│ ├── bridge // 前端橋接│ └── core // 引擎核心實現│ ├── accessibility│ ├── animation│ ├── BUILD.gn│ ├── common│ ├── components│ ├── event│ ├── focus│ ├── gestures│ ├── image│ ├── mock│ └── pipeline // 渲染管線├── interfaces // 通用對外接口└── test // 測試相關

以上是 ArkUI 核心的代碼結構，方便大家后續參考和查閱相關的代碼。如果希望參與貢獻的話可以以這個作為入口，進一步了解其中的內容。

開發者參與開源共建的價值

參與開源貢獻的價值

首先，參與 OpenHarmony 的開源活動，在社區的交流中，可以結識更多的伙伴，找到趣味相投的小伙伴，獲得更大的成就感。以 Sun Fei 為例，當自己寫的代碼被更多的人使用，運行在上億的設備上，會有很大的成就感，這是持續貢獻的內在驅動。從個人的技術能力、編碼水平提升方面來說，參與到社區中，接觸到更多的技術專家，與更多的開發者交流，在代碼 Review 的過程中和相關 Committer、專家交流對自己的能力是很好的提升，也可以擴寬自己的視野。

最后從個人的發展上來說，在社區中，有一個完整的晉升通道，Contributor 經過自己的努力，可以成為某一個領域的 Committer，甚至可以成為某個 PMC 的成員，來領導社區的發展。參與社區對個人的影響力也是有一定提升的，對于學生來說，如果有開源項目相關的經驗，在求職過程中，是很好的加分項。

對于社區來說，更多貢獻者的參與能帶來更開放的環境。大家一起參與 OpenHarmony 的建設，可以幫助 OpenHarmony 的能力進一步完善，最終促進 OpenHarmony 的生態更加繁榮。

選擇ArkUI進行貢獻的優勢

Sun Fei 為大家總結了幾點：1、ArkUI 對新手來說更直觀，寫幾行代碼就能看到效果，所見即所得。2、上手相對容易，但是想進一步的深入地了解里面的原理又具備一定的挑戰。

3、社區活躍度比較高，從去年下半年轉社區開發，提交的 PR 數已經有 3000+，累計 200+ 人參與過貢獻。

4、調試方便，可以不依賴硬件開發板，有工作電腦就能參與。

5、提交的成果更容易被更多的人使用。

開發者如何參與貢獻

如何參與貢獻

只要你使用 ArkUI 開發自己的應用，對 OpenHarmony 來說就是巨大的貢獻。對一些想入門 ArkUI 的開發者，Sun Fei 建議先從應用開發入手，你可以把在開發過程中實現的一些可復用的組件貢獻出來，讓更多的人使用。并且在開發的過程中你也可能就會發現一些 Bug 或易用性的問題。此時，就可以在對應的代碼倉上提交 Issue，幫助我們發現問題和改進。經過一段時間的應用開發，對框架有了進一步的了解，如果想參與框架的貢獻，則需要深入地學習框架的代碼，比如內置組件的實現、渲染流程、事件處理等。當你有了一定的積累后，就可以從 Issue 的列表中，認領一些任務，解決后進一步提交 PR。對于一個資深的開發者，如果想更深入地進行參與，組織會依照個人能力安排一些高級的特性開發。

當然，也可以將自己寫的組件貢獻出來，讓更多的人使用。由自己創建開源工程，提交組件代碼，在 OpenHarmony-SIG 下申請倉，孵化畢業到 OpenHarmony-TPC，就正式成為 OpenHarmony 指定的三方庫，讓更多的人用到。也可以將自己的組件共享到 OHOS 的 npm 中心，方便其他人快捷的引用，后續可直接申請提交到 ArkUI 的組件庫中。

貢獻和開發流程

如果開發者發現問題，可以在代碼倉庫中提交 Issue。在代碼倉庫的右上角，點擊新建 Issue，按照規范填寫標題、內容，清楚地描述問題是怎么觸發的，以及當時的測試環境。最好能提供觸發問題的應用代碼或安裝包，這樣能夠更加順利地讓社區的其他開發者發現問題并解決問題。

當發現有能力解決 Issue，即可在社區中認領 Issue 并解決。在 Issue 列表中找到自己感興趣的問題，評論回復，表達你想認領的 Issue 的意愿，社區的管理員看到后會審核并把 Issue 分配給你，你就可開始準備解決問題并提交了。

認領 Issue 后，開發者便進入了完整的開發階段，首先需要搭建基礎的開發環境：

1. 下載完整 OpenHarmony 代碼，參考官方指導配置開發環境。

https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/quick-start/quickstart-standard.md

2. 在對應的倉點擊 Fork，將代碼 Fork 到自己的私倉。

3. 將私倉加入到開發環境的遠端倉中，fetch過后就能看到個人倉的所有分支。

# git remote add ［《選項》］ 《名稱》 《地址》

git remote add sunfei2021 git@gitee.com:sunfei2021/ace_ace_engine.git

git fetch sunfei2021

4. 建立一個本地分支跟蹤個人倉的分支。

# git checkout -b ［本地分支］ ［遠端分支］

git checkout -b work_0506 sunfei2021/master

5. 修改代碼，本地驗 證OK，提交代碼，并 push 到遠端分支。

git commit -sm “fix xxx issue”

git push -f sunfei2021

6. 創建 PR、關聯 Issue、觸發 CI（評論`start build`），獲取鏡像基本功能自驗證，聯系 Reviewer，在評論區交流，等待代碼合入。

當代碼合入后，你便正式成為了 OpenHarmony 的 Contributor，按照操作流程，希望大家能夠多多嘗試，最終成為社區達人。

最后，Sun Fei 簡單介紹了 ArkUI 的發展方向。因為 OpenHarmony 是面向萬物互聯的系統，所以目標是適配不同的設備，ArkUI 未來會在多設備適配、多態控件、動態布局這些能力上持續提升開發者的體驗。同時，近期也會開源 ArkUI 的跨平臺支持能力。這就意味著通過 ArkUI 寫的應用，不僅僅只能運行在 OpenHarmony 上，也可以運行在其它的系統上，今年 ArkUI 還會支持 Android 和 iOS 的跨平臺版本，大家敬請期待。

ArkUI 期待您的參與，參與戰“碼”先鋒，PR 征集令！在 Gitee 的 OpenHarmony 代碼倉提交 PR 參與活動，和全球的開發者一起共建 OpenHarmony 的繁榮生態！

文中涉及的鏈接匯總：

SDK：

https://gitee.com/openharmony/interface_sdk-js

工具鏈：

https://gitee.com/openharmony/developtools_ace-ets2bundle

https://gitee.com/openharmony/developtools_ace-js2bundle

核心引擎：

https://gitee.com/openharmony/arkui_ace_engine

能力擴展：

https://gitee.com/openharmony/arkui_napi

JS Framework：

https://gitee.com/openharmony/third_party_jsframework

官方指導配置開發環境：

https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/quick-start/quickstart-standard.md

審核編輯 ：李倩