鴻蒙Next(一) 跨平臺開發ArkUI-X

鴻蒙、Flutter、SwiftUI、Compose都是聲明式布局,這四者開發風格都比較相似。其中我個人覺得鴻蒙和Flutter是最像的,不僅代碼風格和布局屬性像,就連很多組件的命名都一模一樣,比如Row、Column等。

最開始我想著以后市場上肯定會出現很多用Flutter一拖三的方式開發的項目。但是當我看到一篇關于ArkUI-X的文章,發現鴻蒙可以跨平臺后就不這么覺得了,貌似以后只需要開發一份鴻蒙代碼,就可以滿足鴻蒙、iOS、Android了。??

ArkUI是鴻蒙的UI開發框架、ArkUI-X是基于ArkUI的跨平臺框架。(ArkUI-X開源項目地址ArkUI-X-v2.0.0-Beta1版本

.?



.

一、安裝 DevEco Studio 開發工具


開發工具DevEco Studio?版本要安裝4.0,我最開始安裝的3.1的發現無法配置 ArkUI-X。

DevEco Studio 4.0 下載地址:?Windows(64-bit)?、?Mac(Intel)?、?Mac(ARM)

DevEco Studio 安裝官方教程:DevEco Studio 使用指南

.

二、DevEco Studio 配置


1、安裝成功后,打開偏好設置


2、然后點擊SDK,選擇HarmonyOS,勾選并安裝3.1.0(API 9)版本,點擊確定


3、切換Tools,勾選并安裝模擬器,點擊確定

4、最后選擇OpenHarmony,勾選并安裝?API Version 10版本,點擊確定

(安裝前 - 需要點擊Edit選擇安裝地址,我用的默認地址)?

(安裝成功)?

.

三、ArkUI-X 配置


配置完后會看到偏好設置里面多出來了一個ArkUI-X選項,切換到 ArkUI-X,勾選并安裝?API Version 10版本,點擊確定

.

四、新建項目


1、點擊右上角更多,彈出框中選擇Import Sample

2、在彈出框中選擇OpenHarmony,點擊ArkUI-X下的HelloWorld

點擊下一步,會生成一個基于 ArkUI-X 的 Hello World 新工程?

3、打開工程,點擊Build,選擇編譯App(s),等待編譯完成

4、查看工程,在.arkui-x?目錄下,可以分別看到Android和iOS項目的文件夾

?(推薦幾款好用的插件,示例如上圖:漢化插件Chinese、 圖標插件Atom Material Icons、 黑色主題插件One Dark theme、 代碼縮進插件Rainbow Brackets

.

五、iOS運行


打開iOS文件夾,用Xcode打開iOS工程,直接運行就行了,可以運行模擬器、可以運行真機

(iOS相關的證書配置、Xcode配置、真機運行編譯這里就不做額外的拓展了)?

真機運行效果:

.

注意:

我修改代碼后,想在iOS上看到更新效果,于是在Xcode上重新運行了項目,但是一直看不到更新內容。

于是我重新構建了一次(點擊Build,選擇編譯App(s)),再運行項目,就可以看到更新了。。。??

.

資料:

鴻蒙應用開發-初見:ArkUI-X

鴻蒙開發者官網

ArkUI-X開源項目地址

DevEco Studio 使用指南

華為發布了跨平臺開發的ArkUI-X,我不允許你學不會!

鴻蒙跨平臺框架來了ArkUi-X

OpenHarmony 4.0 Release

華為開發者大會 2023(HDC.Together)開發者主題演講

如果覺得本文有用,可以在下方點個贊。如果發現有遺漏或不對的地方,請在下方留言~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容