<acronym id="s8ci2"><small id="s8ci2"></small></acronym>
<rt id="s8ci2"></rt><rt id="s8ci2"><optgroup id="s8ci2"></optgroup></rt>
<acronym id="s8ci2"></acronym>
<acronym id="s8ci2"><center id="s8ci2"></center></acronym>
0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙開發學習:初探【ArkUI-X】

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-05-13 15:58 ? 次閱讀

ArkTS 是華為自研的開發語言。它在TypeScript(簡稱TS)的基礎上,匹配 ArkUI 框架,擴展了聲明式 UI 、狀態管理等相應的能力,讓開發者以更簡潔、更自然的方式開發跨端應用。

ArkUI-X 進一步將 ArkUI 擴展到了多個 OS 平臺:目前支持 OpenHarmony、HarmonyOS、Android、iOS,后續會逐步增加更多平臺支持。開發者基于一套主代碼,就可以構建支持多平臺應用。

簡單來說,ArkTS + ArkUI-X 對標的框架為 flutter,一次代碼,編譯為 native 全平臺運行

本文內容中會教大家如何用 ArkUI-X 開發一個 Android APP

IDE 獲取

HUAWEI DevEco Studio

鴻蒙開發指導文檔:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

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

HUAWEI DevEco Studio 4.0 Beta2

標題地址
Windows x64[下載地址]
Mac(Intel[下載地址]
Mac(Arm[下載地址]

安裝過程很簡單,這東西是基于 IDEA 做的,和 Android Studio 體驗一致

Android Studio

ArkUI-X 可以將 ArkTS 項目編譯為一個 Android 項目,使用 Android Studio 可以將其打包為 APK。

Android Studio 安裝方法就不贅述了。下載地址:

[Download Android Studio & App Tools - Android Developers (google.cn)]

環境搭建

初次進入

DevEco 安裝完成后,首次進入需要設置 nodejs 與 ohpm??梢赃x擇本機已經安裝好的路徑,若本機沒有安裝 nodejs 與 ohpm 也可以在這里下載安裝。

注意:目前鴻蒙開發支持的 nodejs 版本為 14 和 16,如果本機裝了 18 版本的 nodejs 需要先卸載,將全局 nodejs 替換為 16。不然后續項目開發中會遇到各種問題。

上面這段話加粗的目的就是,我昨天頭鐵使用 nodejs 18 ,踩坑太多了。所以建議大家直接將全局 nodejs 使用 16 版本就行,避免不必要的麻煩。這一點我給官方提了 issue 但是還未收到回復。

之后便是無腦下一步,等它下載完成 SDK 與相關依賴即可(你可以將 SDK 路徑設置為其他文件夾)。

安裝 OpenHarmony SDK

相關依賴下載完成,進入 IDE 首頁后,先不急著創建項目,需要安裝 OpenHarmony SDK。

點擊 More Action , 選擇 SDK Manager:

選擇 OpenHarmony:

選擇后需要指定一下路徑,然后它會進行一些下載,等它下載完成:

下載完成后,勾選 API Version 10 相關的選項,點擊確定等它下載完成:

安裝 ArkUI-X SDK

OpenHarmony SDK 安裝完成后,就可以安裝 ArkUI-X SDK 了。同樣的在設置里面選擇 ArkUI-X ,指定路徑,等待下載完成。

設置環境變量

ArkUI-X 需要設置好相應的環境變量才能正確使用。若缺少相關環境變量,會有彈窗提示:

所以在裝好 Android Studio 后,需要將 Android SDK 添加至環境變量中:

變量名:ANDROID_HOME

變量值:你的 Android SDK 路徑

創建項目

創建 Harmon OS 工程

上述步驟完成后,可以創建項目了。這里有很多 Harmon OS 的基礎模板,可以任意選擇一個進行創建:

這里可以不用設置,保持默認即可。我們需要的是這個模板里面的代碼:

創建 OpenHarmony 工程

在創建了一個 Harmon OS 工程后,我們就進入到了 IDE 的實際界面,在此就可以找到創建 OpenHarmony 工程的選項。

為什么要 OpenHarmony 呢?首先要認識到 HarmonOS 和 OpenHarmony 的區別。這個具體區別在此我就不講了,可能會被當做引戰引起某些人不滿意。只需要知道重點: ArkUI-X 是基于 OpenHarmony 的技術 。在上一節也可以看到,使用 ArkUI-X , 需要安裝 OpenHarmony SDK ,而沒有去進行 HarmonOS SDK 的相關操作。

在上面菜單欄選擇 File - New - Import - Import Sample:

然后選擇 OpenHarmony ,選擇 ArkUI-X 下的 HelloWorld

創建完成后進入此項目,等它依賴安裝完成,在右上角選擇 Previewer ,點擊運行,就可以通過 OpenHarmony 預覽界面進行預覽:

這時一個基礎的 OpenHarmony APP 工程就創建完成了。

移入代碼

此時回到之前步驟創建的 Harmon OS 工程,將里面的 UI 代碼移入進來。

進入 Harmon OS 工程的 entry - src - main 目錄,復制里面的 ets 與 resources 目錄:

同樣的,在 OpenHarmony 工程中刪掉這兩個目錄,替換為從 Harmon OS 工程復制的 etsresources。

上述兩個文件夾替換完成后,將同位置的 module.json5 文件中的內容也替換過去

整體步驟就是這樣:

module.json5 的 deviceTypes 這樣寫,在預覽的時候就可以選擇用手機模式還是平板模式:

再次預覽,就可以看到之前通過 Harmony OS 工程模板創建的界面顯示在了這個 OpenHarmony 預覽界面上

編譯 OpenHarmony 工程

在 DevEco 菜單欄,選擇 Build App,在編譯為 OpenHarmony App 的同時,也會生成 Android 與 IOS 項目

編譯完成后,可以看到生成的 Android 工程了:

在 Android 中運行

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

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

由于 ArkUI-X 編譯出來的為 native 文件,只能在 ARM 上運行。Android Studio 提供的模擬器為 x64 架構,所以無法在 Android Studio 的模擬器中預覽程序。

將上述生成的 Android 工程導入至 Android Studio ,等待 Gradle 初始化完成:

然后將它打包為 APK :

發送到手機上安裝運行,可以看到一切正常 :

在 LibChecker 中也可以看到該 APP 使用了 ArkUI 的依賴:

總結

至此基于 ArkUI-X 的跨平臺開發流程已經初步了解了,后續就是根據華為的文檔,學習 ArkTS ,開發實質性的應用程序,以及更深入地進行相關探索。

審核編輯 黃宇

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • ARM
    ARM
    +關注

    關注

    134

    文章

    8670

    瀏覽量

    362259
  • Android
    +關注

    關注

    12

    文章

    3857

    瀏覽量

    125764
  • 模擬器
    +關注

    關注

    2

    文章

    827

    瀏覽量

    42723
  • 鴻蒙
    +關注

    關注

    55

    文章

    1723

    瀏覽量

    42152
收藏 人收藏

    評論

    相關推薦

    基于ArkUI eTS開發的堅果食譜(NutRecipes)

    基于ArkUI eTS開發的堅果食譜(NutRecipes)
    的頭像 發表于 08-18 08:23 ?1247次閱讀
    基于<b class='flag-5'>ArkUI</b> eTS<b class='flag-5'>開發</b>的堅果食譜(NutRecipes)

    鴻蒙ArkUI開發-Video組件的使用

    以視頻功能為例,在應用開發過程中,我們需要通過ArkUI提供的Video組件為應用增加基礎的視頻播放功能。借助Video組件,我們可以實現視頻的播放功能并控制其播放狀態。常見的視頻播放場景包括觀看網絡上的較為流行的短視頻,也包括查看我們存儲在本地的視頻內容。
    的頭像 發表于 01-23 16:59 ?645次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開發</b>-Video組件的使用

    跨Android、iOS、鴻蒙多平臺框架ArkUI-X

    ArkUI是一套構建分布式應用界面的聲明式UI開發框架。它使用極簡的UI信息語法、豐富的UI組件、以及實時界面預覽工具,幫助您提升移動應用界面開發效率30%。您只需使用一套ArkTS API,就能
    的頭像 發表于 01-31 14:52 ?1087次閱讀
    跨Android、iOS、<b class='flag-5'>鴻蒙</b>多平臺框架<b class='flag-5'>ArkUI-X</b>

    鴻蒙ArkUI開發學習:【渲染控制語法】

    ArkUI開發框架是一套構建 HarmonyOS / OpenHarmony 應用界面的聲明式UI開發框架,它支持程序使用?`if/else`?條件渲染,?`ForEach`?循環渲染以及?`LazyForEach`?懶加載渲染
    的頭像 發表于 04-09 16:40 ?470次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開發</b><b class='flag-5'>學習</b>:【渲染控制語法】

    免費學習鴻蒙(HarmonyOS)開發,一些地址分享

    國內一流高校。通過鴻蒙班的設立,高??梢詾閷W生提供專業的鴻蒙OS學習環境和豐富的實踐機會,培養出更多的鴻蒙開發人才,為
    發表于 01-12 20:48

    2024款鴻蒙OS 最新HarmonyOS Next_HarmonyOS4.0系列教程分享

    Next_HarmonyOS4.0系列教程由業內大神錄制于2024年,包括:HarmonyOS ArkTs、ArkUI、ArkTs Api、ArkTs Native、OpenHarmony ArkUI-X跨平臺的基本用法以及項目
    發表于 02-28 10:29

    鴻蒙實戰項目開發:【短信服務】

    ://gitee.com/openharmony/applications_app_samples.git git pull origin master ? 最后呢,很多開發朋友不知道需要學習那些鴻蒙技術?
    發表于 03-03 21:29

    鴻蒙應用開發基礎術語學習 輕應用

    開發者可以通過鴻蒙輕應用,通過點擊關鍵詞解鎖詳細解釋的方式,方便快速第了解鴻蒙的基礎術語??梢元毩⒆鳛橐粋€應用發展,也可以作為各種應用中的一個模塊。適合HarmonyOS開發者及潛在
    發表于 05-19 18:33

    4天帶你上手HarmonyOS ArkUI開發

    代碼即可實現界面功能。ArkUI內置了豐富而精美的HarmonyOS Design的UI組件和API,可滿足大部分跨端應用界面開發的所需。參與任務1、點擊閱讀原文鏈接,即刻報名訓練營,學習如何用
    發表于 09-09 14:44

    資訊速遞 | ArkUI-X 預覽版已正式開源!

    OpenHarmony項目群技術指導委員會(以下簡稱“TSC”)-跨平臺應用開發框架TSG所孵化項目 —— ArkUI-X,近期已正式開源 ,開發者基于一套主代碼,就可以將在OpenHarmony上
    發表于 08-11 16:10

    ArkUI新能力,助力應用開發更便捷

    作者:niulihua,華為ArkUI技術專家;wanglei,華為ArkUI技術專家 ArkUI是一套構建分布式應用的聲明式UI開發框架。它具備簡潔自然的UI信息語法、豐富的UI組件
    的頭像 發表于 02-15 16:35 ?679次閱讀

    資訊速遞 | ArkUI-X 預覽版已正式開源!

    OpenHarmony項目群技術指導委員會(以下簡稱“TSC”)-跨平臺應用開發框架TSG所孵化項目 —— ArkUI-X,近期已正式開源 ,開發者基于一套主代碼,就可以將在OpenHarmony
    的頭像 發表于 08-22 22:19 ?527次閱讀
    資訊速遞 | <b class='flag-5'>ArkUI-X</b> 預覽版已正式開源!

    鴻蒙ArkUI開發-Tabs組件的使用

    鴻蒙ArkUI開發-Tabs組件的使用
    的頭像 發表于 01-19 16:01 ?498次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開發</b>-Tabs組件的使用

    鴻蒙ArkUI開發-應用添加彈窗

    彈窗是一種模態窗口,通常用來展示用戶當前需要的或用戶必須關注的信息或操作。在彈出框消失之前,用戶無法操作其他界面內容。ArkUI為我們提供了豐富的彈窗功能
    的頭像 發表于 01-24 17:22 ?288次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開發</b>-應用添加彈窗

    鴻蒙ArkUI開發實戰:eTS版【笑話app】

    制作一款笑話app,使用ArkUI。
    的頭像 發表于 03-25 16:04 ?201次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>開發</b>實戰:eTS版【笑話app】
    亚洲欧美日韩精品久久_久久精品AⅤ无码中文_日本中文字幕有码在线播放_亚洲视频高清不卡在线观看
    <acronym id="s8ci2"><small id="s8ci2"></small></acronym>
    <rt id="s8ci2"></rt><rt id="s8ci2"><optgroup id="s8ci2"></optgroup></rt>
    <acronym id="s8ci2"></acronym>
    <acronym id="s8ci2"><center id="s8ci2"></center></acronym>