ArkUI 是為 OpenAtom OpenHarmony（以下簡稱“OpenHarmony”）設(shè)計(jì)的應(yīng)用開發(fā)框架，該框架接近自然語言，開發(fā)難度小，可以提升開發(fā)效率。還有運(yùn)行效率高等特點(diǎn)，方便開發(fā)者更加直觀便捷地進(jìn)行 UI 開發(fā)。第三期戰(zhàn)“碼”先鋒直播間圍繞 ArkUI，邀請了華為終端 BG OpenHarmony 主任工程師 Sun Fei，為大家?guī)怼秴⑴c ArkUI，共建 OpenHarmony 繁榮生態(tài)》。為大家講解：什么是 ArkUI、ArkUI 開發(fā)框架的架構(gòu)、開發(fā)者參與開源共建的價值和開發(fā)者如何參與貢獻(xiàn)。

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

什么是ArkUI

UI開發(fā)框架介紹

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

ArkUI開發(fā)框架介紹

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

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

兩種開發(fā)范式的示例

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

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

其它還有：

?UI 描述：聲明式的方式來描述 UI 的結(jié)構(gòu)，如上述 build（） 方法內(nèi)部的代碼塊。

?內(nèi)置組件：框架中默認(rèn)內(nèi)置的基礎(chǔ)和布局組件，可直接被開發(fā)者調(diào)用，如代碼中的 Flex、Path、Button。

?屬性方法：用于組件屬性的配置，統(tǒng)一通過屬性方法進(jìn)行設(shè)置，如代碼中的 scale（）、opacity（）、color（） 等。

?事件方法：用于添加組件對事件的響應(yīng)邏輯，統(tǒng)一通過事件方法進(jìn)行設(shè)置，如跟隨在 Animator 后面的 onFrame（）、onFinish（）。

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

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

ArkUI開發(fā)框架的架構(gòu)

ArkUI架構(gòu)

ArkUI 架構(gòu)主要圍繞開發(fā)效率、性能體驗(yàn)、多平臺支持進(jìn)行設(shè)計(jì)。?開發(fā)效率：能夠兼顧兩種開發(fā)范式，方便不同經(jīng)驗(yàn)的開發(fā)者進(jìn)行選擇，并結(jié)合工具鏈的能力，提升開發(fā)和調(diào)試的效率。?性能體驗(yàn)：結(jié)合方舟編譯器和 Runtime，提升語言的執(zhí)行效率；另外，使用 C++ 開發(fā)的聲明是 UI 后端保證了渲染引擎較高的性能。

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

ArkUI完整流程涉及代碼倉

如果想?yún)⑴c ArkUI 的貢獻(xiàn)，可以先了解一下 ArkUI 完整生命周期的各個環(huán)節(jié)以及過程中涉及的代碼倉。首先，開發(fā)者會基于我們的 DevEco Studio 進(jìn)行應(yīng)用的開發(fā)，DevEco Studio 會集成 ArkUI 提供的 SDK 和工具鏈。大家可以在這幾個代碼倉找到開發(fā)者提交一些新的組件、API 以及工具鏈相關(guān)的能力進(jìn)行學(xué)習(xí)和貢獻(xiàn)。

當(dāng)開發(fā)者寫的代碼編譯成應(yīng)用包，會經(jīng)過應(yīng)用市場或其它的渠道進(jìn)行分發(fā)，最終安裝到終端設(shè)備上，設(shè)備上會包含 ArkUI 的運(yùn)行環(huán)境，提供基礎(chǔ)的組件和 API。這個運(yùn)行環(huán)境就是 ArkUI 框架部署在終端上的形態(tài)，提供 ArkUI 的運(yùn)行環(huán)境。ArkUI 框架涉及到了核心引擎代碼倉和能力擴(kuò)展代碼倉。對于類 Web 范式還有一個 JS 的 Framework，是用 JavaScript 實(shí)現(xiàn)的一個前端框架。大家有興趣的話，可以到對應(yīng)的倉進(jìn)行學(xué)習(xí)和貢獻(xiàn)。

ArkUI核心代碼的模塊結(jié)構(gòu)

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

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

以上是 ArkUI 核心的代碼結(jié)構(gòu)，方便大家后續(xù)參考和查閱相關(guān)的代碼。如果希望參與貢獻(xiàn)的話可以以這個作為入口，進(jìn)一步了解其中的內(nèi)容。

開發(fā)者參與開源共建的價值

參與開源貢獻(xiàn)的價值

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

最后從個人的發(fā)展上來說，在社區(qū)中，有一個完整的晉升通道，Contributor 經(jīng)過自己的努力，可以成為某一個領(lǐng)域的 Committer，甚至可以成為某個 PMC 的成員，來領(lǐng)導(dǎo)社區(qū)的發(fā)展。參與社區(qū)對個人的影響力也是有一定提升的，對于學(xué)生來說，如果有開源項(xiàng)目相關(guān)的經(jīng)驗(yàn)，在求職過程中，是很好的加分項(xiàng)。

對于社區(qū)來說，更多貢獻(xiàn)者的參與能帶來更開放的環(huán)境。大家一起參與 OpenHarmony 的建設(shè)，可以幫助 OpenHarmony 的能力進(jìn)一步完善，最終促進(jìn) OpenHarmony 的生態(tài)更加繁榮。

選擇ArkUI進(jìn)行貢獻(xiàn)的優(yōu)勢

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

3、社區(qū)活躍度比較高，從去年下半年轉(zhuǎn)社區(qū)開發(fā)，提交的 PR 數(shù)已經(jīng)有 3000+，累計(jì) 200+ 人參與過貢獻(xiàn)。

4、調(diào)試方便，可以不依賴硬件開發(fā)板，有工作電腦就能參與。

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

開發(fā)者如何參與貢獻(xiàn)

如何參與貢獻(xiàn)

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

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

貢獻(xiàn)和開發(fā)流程

如果開發(fā)者發(fā)現(xiàn)問題，可以在代碼倉庫中提交 Issue。在代碼倉庫的右上角，點(diǎn)擊新建 Issue，按照規(guī)范填寫標(biāo)題、內(nèi)容，清楚地描述問題是怎么觸發(fā)的，以及當(dāng)時的測試環(huán)境。最好能提供觸發(fā)問題的應(yīng)用代碼或安裝包，這樣能夠更加順利地讓社區(qū)的其他開發(fā)者發(fā)現(xiàn)問題并解決問題。

當(dāng)發(fā)現(xiàn)有能力解決 Issue，即可在社區(qū)中認(rèn)領(lǐng) Issue 并解決。在 Issue 列表中找到自己感興趣的問題，評論回復(fù)，表達(dá)你想認(rèn)領(lǐng)的 Issue 的意愿，社區(qū)的管理員看到后會審核并把 Issue 分配給你，你就可開始準(zhǔn)備解決問題并提交了。

認(rèn)領(lǐng) Issue 后，開發(fā)者便進(jìn)入了完整的開發(fā)階段，首先需要搭建基礎(chǔ)的開發(fā)環(huán)境：

1. 下載完整 OpenHarmony 代碼，參考官方指導(dǎo)配置開發(fā)環(huán)境。

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

2. 在對應(yīng)的倉點(diǎn)擊 Fork，將代碼 Fork 到自己的私倉。

3. 將私倉加入到開發(fā)環(huán)境的遠(yuǎn)端倉中，fetch過后就能看到個人倉的所有分支。

# git remote add ［《選項(xiàng)》］ 《名稱》 《地址》

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

git fetch sunfei2021

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

# git checkout -b ［本地分支］ ［遠(yuǎn)端分支］

git checkout -b work_0506 sunfei2021/master

5. 修改代碼，本地驗(yàn) 證OK，提交代碼，并 push 到遠(yuǎn)端分支。

git commit -sm “fix xxx issue”

git push -f sunfei2021

6. 創(chuàng)建 PR、關(guān)聯(lián) Issue、觸發(fā) CI（評論`start build`），獲取鏡像基本功能自驗(yàn)證，聯(lián)系 Reviewer，在評論區(qū)交流，等待代碼合入。

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

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

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

文中涉及的鏈接匯總：

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

能力擴(kuò)展：

https://gitee.com/openharmony/arkui_napi

JS Framework：

https://gitee.com/openharmony/third_party_jsframework

官方指導(dǎo)配置開發(fā)環(huán)境：

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

審核編輯 ：李倩