0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫(xiě)文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙跨平臺(tái)框架:【ArkUi-X】創(chuàng)建工程

jf_46214456 ? 來(lái)源:jf_46214456 ? 作者:jf_46214456 ? 2024-05-13 17:48 ? 次閱讀

前言:

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

效果圖:

f293d9a85f6006ad198a9daff00022f8_720.jpg 首先需要下載支持 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)單

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

image.png

安裝 OpenHarmony SDK

38b06a8eb512f66a47f92d9e2c1aeace_720.jpgf3d4f76ef22c16f04d1833d7e84e7c04_720.jpg

安裝 ArkUI-X SDK

38b06a8eb512f66a47f92d9e2c1aeace_720.jpg

49a638c76ae0b97f9bfdf00f5dff7d22_720.jpg

01b37256aa960f912146497407088b75_720.jpg

配置環(huán)境

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

創(chuàng)建 Harmon OS 工程

72b4e841518a523a0fbee9e3377e49fc_720.jpg

9fe309dee5fd0cd65e6c8a93113e8053_720.jpg

編譯 OpenHarmony 工程

ba133e04bde5ad5ef55a8624a6e62ab2_720.jpg

選擇app格式

3e860620552c81d66500e4c0f9e25f86_720.jpg

查看編譯后生成的androidiOS native 工程

6ab7722ba0222a750f43c6cfc47a7c4f_720.jpg

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

05e69b8a29d3d20969c54b8431242b96_720.jpg

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

1139f0c991a4e2d673f9800f641b0f2e_720.jpg

運(yùn)行

4f397b5ed5511f51d6cd05ec2fb8fd36_720.jpg

如圖

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

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

搜狗高速瀏覽器截圖20240326151450.png

最后總結(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 ,不再是“套殼”。

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • 框架
    +關(guān)注

    關(guān)注

    0

    文章

    404

    瀏覽量

    17760
  • 鴻蒙
    +關(guān)注

    關(guān)注

    58

    文章

    2478

    瀏覽量

    43699
收藏 0人收藏

    評(píng)論

    相關(guān)推薦
    熱點(diǎn)推薦

    Android、iOS、鴻蒙平臺(tái)框架ArkUI-X

    ArkUI是一套構(gòu)建分布式應(yīng)用界面的聲明式UI開(kāi)發(fā)框架。它使用極簡(jiǎn)的UI信息語(yǔ)法、豐富的UI組件、以及實(shí)時(shí)界面預(yù)覽工具,幫助您提升移動(dòng)應(yīng)用界面開(kāi)發(fā)效率30%。您只需使用一套ArkTS API,就能
    的頭像 發(fā)表于 01-31 14:52 ?2053次閱讀
    <b class='flag-5'>跨</b>Android、iOS、<b class='flag-5'>鴻蒙</b>多<b class='flag-5'>平臺(tái)</b><b class='flag-5'>框架</b><b class='flag-5'>ArkUI-X</b>

    鴻蒙開(kāi)發(fā)學(xué)習(xí):初探【ArkUI-X

    **簡(jiǎn)單來(lái)說(shuō),ArkTS + ArkUI-X 對(duì)標(biāo)的框架為 flutter,一次代碼,編譯為 native 全平臺(tái)運(yùn)行**
    的頭像 發(fā)表于 05-13 15:58 ?1483次閱讀
    <b class='flag-5'>鴻蒙</b>開(kāi)發(fā)學(xué)習(xí):初探【<b class='flag-5'>ArkUI-X</b>】

    鴻蒙ArkUI-X平臺(tái)開(kāi)發(fā):【命令行工具(ACE Tools)】

    ACE Tools是一套為ArkUI-X項(xiàng)目平臺(tái)應(yīng)用開(kāi)發(fā)者提供的命令行工具,支持在Windows/Ubuntu/macOS平臺(tái)運(yùn)行,用于構(gòu)建OpenHarmony/HarmonyOS
    的頭像 發(fā)表于 05-21 17:39 ?2598次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b>開(kāi)發(fā):【命令行工具(ACE Tools)】

    鴻蒙ArkUI-X平臺(tái)開(kāi)發(fā):【SDK目錄結(jié)構(gòu)介紹】

    本文檔配套ArkUI-X,將OpenHarmony ArkUI開(kāi)發(fā)框架擴(kuò)展到不同的OS平臺(tái),比如Android和iOS平臺(tái),讓開(kāi)發(fā)者基于
    的頭像 發(fā)表于 05-20 16:28 ?1092次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b>開(kāi)發(fā):【SDK目錄結(jié)構(gòu)介紹】

    鴻蒙開(kāi)發(fā)ArkUI-X基礎(chǔ)知識(shí):【ArkUI平臺(tái)設(shè)計(jì)總體說(shuō)明】

    本文檔描述ArkUI開(kāi)發(fā)框架平臺(tái)運(yùn)行能力相關(guān)的總體技術(shù)方案。
    的頭像 發(fā)表于 05-24 15:41 ?1980次閱讀
    <b class='flag-5'>鴻蒙</b>開(kāi)發(fā)<b class='flag-5'>ArkUI-X</b>基礎(chǔ)知識(shí):【<b class='flag-5'>ArkUI</b><b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b>設(shè)計(jì)總體說(shuō)明】

    鴻蒙開(kāi)發(fā)ArkUI-X基礎(chǔ)知識(shí):【ArkUI代碼工程及構(gòu)建介紹】

    ArkUI作為OpenHarmony的默認(rèn)開(kāi)發(fā)框架,在本項(xiàng)目(ArkUI-X)中需要做到一套代碼同時(shí)支持多平臺(tái)構(gòu)建,所以會(huì)采取共倉(cāng)開(kāi)發(fā)的方式,部分倉(cāng)直接指向OpenHarmony相關(guān)開(kāi)
    的頭像 發(fā)表于 05-25 16:45 ?2588次閱讀
    <b class='flag-5'>鴻蒙</b>開(kāi)發(fā)<b class='flag-5'>ArkUI-X</b>基礎(chǔ)知識(shí):【<b class='flag-5'>ArkUI</b>代碼<b class='flag-5'>工程</b>及構(gòu)建介紹】

    ArkUI-X開(kāi)發(fā)指南:【SDK配置和構(gòu)建說(shuō)明】

    ArkUI-X SDK是ArkUI-X開(kāi)源項(xiàng)目的編譯產(chǎn)物,可將ArkUI-X SDK集成到現(xiàn)有Android和iOS應(yīng)用工程中,使開(kāi)發(fā)者基于一套ArkTS主代碼,就可以構(gòu)建支持多
    的頭像 發(fā)表于 05-25 16:48 ?3244次閱讀
    <b class='flag-5'>ArkUI-X</b>開(kāi)發(fā)指南:【SDK配置和構(gòu)建說(shuō)明】

    資訊速遞 | ArkUI-X 預(yù)覽版已正式開(kāi)源!

    OpenHarmony項(xiàng)目群技術(shù)指導(dǎo)委員會(huì)(以下簡(jiǎn)稱“TSC”)-平臺(tái)應(yīng)用開(kāi)發(fā)框架TSG所孵化項(xiàng)目 —— ArkUI-X,近期已正式開(kāi)源 ,開(kāi)發(fā)者基于一套主代碼,就可以將在OpenH
    發(fā)表于 08-11 16:10

    資訊速遞 | ArkUI-X 預(yù)覽版已正式開(kāi)源!

    OpenHarmony項(xiàng)目群技術(shù)指導(dǎo)委員會(huì)(以下簡(jiǎn)稱“TSC”)-平臺(tái)應(yīng)用開(kāi)發(fā)框架TSG所孵化項(xiàng)目 —— ArkUI-X,近期已正式開(kāi)源 ,開(kāi)發(fā)者基于一套主代碼,就可以將在OpenH
    的頭像 發(fā)表于 08-22 22:19 ?1045次閱讀
    資訊速遞 | <b class='flag-5'>ArkUI-X</b> 預(yù)覽版已正式開(kāi)源!

    鴻蒙ArkUI-X平臺(tái)技術(shù):【開(kāi)發(fā)準(zhǔn)備】

    本文檔適用于ArkUI平臺(tái)應(yīng)用開(kāi)發(fā)的初學(xué)者。通過(guò)開(kāi)發(fā)環(huán)境搭建、應(yīng)用工程創(chuàng)建、編譯和運(yùn)行,熟悉ArkUI
    的頭像 發(fā)表于 05-24 10:40 ?800次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b>技術(shù):【開(kāi)發(fā)準(zhǔn)備】

    鴻蒙ArkUI-X平臺(tái)技術(shù):【開(kāi)發(fā)初體驗(yàn)】

    在DevEco Studio中導(dǎo)入ArkUI-X Sample,快速創(chuàng)建平臺(tái)工程
    的頭像 發(fā)表于 05-17 15:54 ?1008次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b>技術(shù):【開(kāi)發(fā)初體驗(yàn)】

    鴻蒙ArkUI-X平臺(tái)開(kāi)發(fā):【 編寫(xiě)第一個(gè)ArkUI-X應(yīng)用】

    通過(guò)構(gòu)建一個(gè)簡(jiǎn)單的ArkUI頁(yè)面跳轉(zhuǎn)示例,快速了解資源創(chuàng)建引用,路由代碼編寫(xiě)和UI布局編寫(xiě)等應(yīng)用開(kāi)發(fā)流程。
    的頭像 發(fā)表于 05-21 17:36 ?1058次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b>開(kāi)發(fā):【 編寫(xiě)第一個(gè)<b class='flag-5'>ArkUI-X</b>應(yīng)用】

    鴻蒙ArkUI-X平臺(tái)開(kāi)發(fā):【 應(yīng)用工程結(jié)構(gòu)說(shuō)明】

    本文檔配套ArkUI-X,將OpenHarmony ArkUI開(kāi)發(fā)框架擴(kuò)展到不同的OS平臺(tái),比如Android和iOS平臺(tái),讓開(kāi)發(fā)者基于
    的頭像 發(fā)表于 05-19 21:05 ?820次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b>開(kāi)發(fā):【 應(yīng)用<b class='flag-5'>工程</b>結(jié)構(gòu)說(shuō)明】

    鴻蒙ArkUI-X語(yǔ)言調(diào)用說(shuō)明:平臺(tái)差異化【Android、ios動(dòng)態(tài)化】

    ArkUI-X支持動(dòng)態(tài)化,使用者可以根據(jù)自己需要?jiǎng)討B(tài)發(fā)布平臺(tái)內(nèi)容,從而使平臺(tái)部分和宿主應(yīng)用進(jìn)行解耦。
    的頭像 發(fā)表于 05-23 14:38 ?1313次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b>語(yǔ)言調(diào)用說(shuō)明:<b class='flag-5'>平臺(tái)</b>差異化【Android、ios動(dòng)態(tài)化】

    鴻蒙ArkUI-X框架開(kāi)發(fā):【開(kāi)發(fā)準(zhǔn)備】

    本文檔適用于ArkUI-X框架開(kāi)發(fā)的初學(xué)者。通過(guò)環(huán)境搭建、代碼下載、代碼編譯、API擴(kuò)展和使用,快速了解平臺(tái)項(xiàng)目開(kāi)發(fā)流程。
    的頭像 發(fā)表于 05-23 21:02 ?681次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>框架</b>開(kāi)發(fā):【開(kāi)發(fā)準(zhǔn)備】

    電子發(fā)燒友

    中國(guó)電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會(huì)員交流學(xué)習(xí)
    • 獲取您個(gè)性化的科技前沿技術(shù)信息
    • 參加活動(dòng)獲取豐厚的禮品