前言：

鴻蒙推出了鴻ArkUi-X 框架所以就寫個文章分享一下

效果圖：

首先需要下載支持 ArkUI-X 套件的華為開發(fā)工具 DevEco ，版本為 4.0 以上，目前可以下載預覽版進行體驗。

開發(fā)前請熟悉鴻蒙開發(fā)指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

DevEco Studio 4.0Beta下載鏈接

[Windows(64-bit)]https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Flink%3Ftarget%3Dhttps%253A%252F%252Fcontentcenter-vali-drcn.dbankcdn.cn%252Fpvt_2%252FDeveloperAlliance_package_901_9%252F38%252Fv3%252FefALRNm3TJuKHfv-1xzjew%252Fdevecostudio-windows-4.0.0.201.zip%253FHW-CC-KV%253DV1%2526HW-CC-Date%253D20230613T085338Z%2526HW-CC-Expire%253D315360000%2526HW-CC-Sign%253D49E7D85C8A485D5D1F04944DFE1AFCFEE3F60E03D25A01BEFE12BA6CEADD19E0 "https://gitee.com/link?target=https%3A%2F%2Fcontentcenter-vali-drcn.dbankcdn.cn%2Fpvt_2%2FDeveloperAlliance_package_901_9%2F38%2Fv3%2FefALRNm3TJuKHfv-1xzjew%2Fdevecostudio-windows-4.0.0.201.zip%3FHW-CC-KV%3DV1%26HW-CC-Date%3D20230613T085338Z%26HW-CC-Expire%3D315360000%26HW-CC-Sign%3D49E7D85C8A485D5D1F04944DFE1AFCFEE3F60E03D25A01BEFE12BA6CEADD19E0"

[Mac(X86)]https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Flink%3Ftarget%3Dhttps%253A%252F%252Fcontentcenter-vali-drcn.dbankcdn.cn%252Fpvt_2%252FDeveloperAlliance_package_901_9%252F71%252Fv3%252FA3thi3-kRTSeO4Jp0DSigA%252Fdevecostudio-mac-4.0.0.201.zip%253FHW-CC-KV%253DV1%2526HW-CC-Date%253D20230613T085132Z%2526HW-CC-Expire%253D315360000%2526HW-CC-Sign%253DBA233FE054A7D07F4B1C3ED80C84F9DD29112E49BB6D5D1506C5A5A0238741AD "https://gitee.com/link?target=https%3A%2F%2Fcontentcenter-vali-drcn.dbankcdn.cn%2Fpvt_2%2FDeveloperAlliance_package_901_9%2F71%2Fv3%2FA3thi3-kRTSeO4Jp0DSigA%2Fdevecostudio-mac-4.0.0.201.zip%3FHW-CC-KV%3DV1%26HW-CC-Date%3D20230613T085132Z%26HW-CC-Expire%3D315360000%26HW-CC-Sign%3DBA233FE054A7D07F4B1C3ED80C84F9DD29112E49BB6D5D1506C5A5A0238741AD"

[Mac(ARM)]https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Flink%3Ftarget%3Dhttps%253A%252F%252Fcontentcenter-vali-drcn.dbankcdn.cn%252Fpvt_2%252FDeveloperAlliance_package_901_9%252Fed%252Fv3%252FIFYYMuT9SbCPCHZntvlrKQ%252Fdevecostudio-mac-arm-4.0.0.201.zip%253FHW-CC-KV%253DV1%2526HW-CC-Date%253D20230613T085231Z%2526HW-CC-Expire%253D315360000%2526HW-CC-Sign%253D8F98E23E393E3D0D104BDBF7F33684D36C48613303909E6D04D016DB0E7E8696 "https://gitee.com/link?target=https%3A%2F%2Fcontentcenter-vali-drcn.dbankcdn.cn%2Fpvt_2%2FDeveloperAlliance_package_901_9%2Fed%2Fv3%2FIFYYMuT9SbCPCHZntvlrKQ%2Fdevecostudio-mac-arm-4.0.0.201.zip%3FHW-CC-KV%3DV1%26HW-CC-Date%3D20230613T085231Z%26HW-CC-Expire%3D315360000%26HW-CC-Sign%3D8F98E23E393E3D0D104BDBF7F33684D36C48613303909E6D04D016DB0E7E8696"

ide 安裝過程就簡單

DevEco 安裝完成后，首次進入需要設置 nodejs 與 ohpm?？梢赃x擇本機已經(jīng)安裝好的路徑，若本機沒有安裝 nodejs 與 ohpm 也可以在這里下載安裝。(這里借用了網(wǎng)友的圖片哈尷尬)

安裝 OpenHarmony SDK

安裝 ArkUI-X SDK

配置環(huán)境

這里提示我們沒有配置ANDROID_HOME 因為這里跑iOS 后面我們再講一下跑Androi的

創(chuàng)建 Harmon OS 工程

編譯 OpenHarmony 工程

選擇app格式

查看編譯后生成的android和iOS native 工程

找到磁盤上的iOS 工程 導入xcode

需要把這里改成iOS 13.0 最新版的mac os 系統(tǒng)

運行

如圖

查看包里面內容 在 LibChecker 中也可以看到該 APP 使用了 ArkUI 的依賴：(這個是Android方便查看哈 iOS同理)

HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

最后總結

鴻蒙的 ArkUi-X其實之前朋友就有提到過 一直沒有去嘗試，國慶放長假期回來我覺得有必要分享給大家，在這里我也希望鴻蒙能夠崛起 這樣也可以給我們開發(fā)者創(chuàng)造出更多的崗位 至于這個語言arkts 算是ts超集, 前端的同學比較容易上手跟flutter也比較像 學起來也沒什么難度。ArkTS + ArkUI-X ，讓國產自研技術達到了一個新高度，完成了從零到一的邁步，讓自研不再是 PPT ，不再是“套殼”。

審核編輯 黃宇