吴忠躺衫网络科技有限公司

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 平臺:目前支持 OpenHarmonyHarmonyOSAndroidiOS,后續會逐步增加更多平臺支持。開發者基于一套主代碼,就可以構建支持多平臺應用。

簡單來說,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。可以選擇本機已經安裝好的路徑,若本機沒有安裝 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

    文章

    9165

    瀏覽量

    369194
  • Android
    +關注

    關注

    12

    文章

    3945

    瀏覽量

    127930
  • 模擬器
    +關注

    關注

    2

    文章

    881

    瀏覽量

    43421
  • 鴻蒙
    +關注

    關注

    57

    文章

    2392

    瀏覽量

    43050
收藏 人收藏

    評論

    相關推薦

    鴻蒙ArkUI-X跨平臺開發:【命令行工具(ACE Tools)】

    ACE Tools是一套為ArkUI-X項目跨平臺應用開發者提供的命令行工具,支持在Windows/Ubuntu/macOS平臺運行,用于構建OpenHarmony/HarmonyOS、Android和iOS平臺的應用程序,其功能包括
    的頭像 發表于 05-21 17:39 ?1982次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b>跨平臺<b class='flag-5'>開發</b>:【命令行工具(ACE Tools)】

    鴻蒙ArkUI-X跨平臺開發:【SDK目錄結構介紹】

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

    鴻蒙開發ArkUI-X基礎知識:【ArkUI跨平臺設計總體說明】

    本文檔描述ArkUI開發框架跨平臺運行能力相關的總體技術方案。
    的頭像 發表于 05-24 15:41 ?1634次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>開發</b><b class='flag-5'>ArkUI-X</b>基礎知識:【<b class='flag-5'>ArkUI</b>跨平臺設計總體說明】

    鴻蒙開發ArkUI-X基礎知識:【ArkUI代碼工程及構建介紹】

    ArkUI作為OpenHarmony的默認開發框架,在本項目(ArkUI-X)中需要做到一套代碼同時支持多平臺構建,所以會采取共倉開發的方式,部分倉直接指向OpenHarmony相關開
    的頭像 發表于 05-25 16:45 ?2187次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>開發</b><b class='flag-5'>ArkUI-X</b>基礎知識:【<b class='flag-5'>ArkUI</b>代碼工程及構建介紹】

    ArkUI-X開發指南:【SDK配置和構建說明】

    ArkUI-X SDK是ArkUI-X開源項目的編譯產物,可將ArkUI-X SDK集成到現有Android和iOS應用工程中,使開發者基于一套ArkTS主代碼,就可以構建支持多平臺的
    的頭像 發表于 05-25 16:48 ?2791次閱讀
    <b class='flag-5'>ArkUI-X</b><b class='flag-5'>開發</b>指南:【SDK配置和構建說明】

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

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

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

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

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

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

    鴻蒙跨平臺框架:【ArkUi-X】創建工程

    鴻蒙推出了鴻ArkUi-X 框架所以就寫個文章分享一下
    的頭像 發表于 05-13 17:48 ?1052次閱讀
    <b class='flag-5'>鴻蒙</b>跨平臺框架:【<b class='flag-5'>ArkUi-X</b>】創建工程

    鴻蒙ArkUI-X跨平臺技術:【開發準備】

    本文檔適用于ArkUI跨平臺應用開發的初學者。通過開發環境搭建、應用工程創建、編譯和運行,熟悉ArkUI跨平臺應用開發基本流程。
    的頭像 發表于 05-24 10:40 ?568次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b>跨平臺技術:【<b class='flag-5'>開發</b>準備】

    鴻蒙ArkUI-X跨平臺技術:【開發初體驗】

    在DevEco Studio中導入ArkUI-X Sample,快速創建跨平臺工程。
    的頭像 發表于 05-17 15:54 ?760次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b>跨平臺技術:【<b class='flag-5'>開發</b>初體驗】

    鴻蒙ArkUI-X跨平臺開發:【 編寫第一個ArkUI-X應用】

    通過構建一個簡單的ArkUI頁面跳轉示例,快速了解資源創建引用,路由代碼編寫和UI布局編寫等應用開發流程。
    的頭像 發表于 05-21 17:36 ?795次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b>跨平臺<b class='flag-5'>開發</b>:【 編寫第一個<b class='flag-5'>ArkUI-X</b>應用】

    鴻蒙ArkUI-X跨平臺開發:【 應用工程結構說明】

    本文檔配套ArkUI-X,將OpenHarmony ArkUI開發框架擴展到不同的OS平臺,比如Android和iOS平臺,讓開發者基于ArkUI
    的頭像 發表于 05-19 21:05 ?658次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b>跨平臺<b class='flag-5'>開發</b>:【 應用工程結構說明】

    鴻蒙ArkUI-X跨語言調用說明:平臺差異化【Android、ios動態化】

    ArkUI-X支持動態化,使用者可以根據自己需要動態發布跨平臺內容,從而使跨平臺部分和宿主應用進行解耦。
    的頭像 發表于 05-23 14:38 ?987次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b>跨語言調用說明:平臺差異化【Android、ios動態化】

    鴻蒙ArkUI-X框架開發:【開發準備】

    本文檔適用于ArkUI-X框架開發的初學者。通過環境搭建、代碼下載、代碼編譯、API擴展和使用,快速了解跨平臺項目開發流程。
    的頭像 發表于 05-23 21:02 ?521次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b>框架<b class='flag-5'>開發</b>:【<b class='flag-5'>開發</b>準備】
    百家乐官网赌场玩法技巧| 百家乐菲律宾| 即时比分直播| 优惠搏百家乐官网的玩法技巧和规则| 博彩百家乐的玩法技巧和规则| 豪杰百家乐官网游戏| 百家乐投注方式| 大发娱乐场官方下载| V博百家乐官网的玩法技巧和规则| 大发888信誉| 百家乐官网赌博游戏| 首席百家乐的玩法技巧和规则| 百家乐官网有真假宝单吗| 代理百家乐免费试玩| 长岛县| 百家乐官网软件代理| 大发888城亚洲游戏| 澳门赌百家乐官网的玩法技巧和规则 | 赌博百家乐趋势把握| 大名县| 百家乐官网平台哪个比较安全 | 赌场百家乐官网玩法介绍| 百家乐必赢| 百家乐官网投注平台信誉排名| 李雷雷百家乐的奥妙| 百家乐官网任你博娱乐| 环球棋牌评测网| 川宜百家乐注册号| 百家乐官网如何投注法| 澳门百家乐网上娱乐场开户注册| 百家乐官网规则博彩正网| 凯斯百家乐的玩法技巧和规则 | 百家乐庄闲和概率| 网上玩百家乐官网有钱| 正品百家乐玩法| 七胜百家乐官网赌场娱乐网规则| 云博国际| 保单百家乐游戏机厂家| 百家乐官网赌博代理荐| 大发888 dafa888游戏| 百家乐开户送十元|