前言：

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

效果圖：

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

開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔：[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 安裝過(guò)程就簡(jiǎn)單

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

安裝 OpenHarmony SDK

安裝 ArkUI-X SDK

配置環(huán)境

這里提示我們沒(méi)有配置ANDROID_HOME 因?yàn)檫@里跑iOS 后面我們?cè)僦v一下跑Androi的

創(chuàng)建 Harmon OS 工程

編譯 OpenHarmony 工程

選擇app格式

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

找到磁盤上的iOS 工程 導(dǎo)入xcode

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

運(yùn)行

如圖

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

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

最后總結(jié)

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

審核編輯 黃宇