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

    文章

    9091

    浏览量

    367494
  • Android
    +关注

    关注

    12

    文章

    3936

    浏览量

    127379
  • 模拟器
    +关注

    关注

    2

    文章

    875

    浏览量

    43218
  • 鸿蒙
    +关注

    关注

    57

    文章

    2350

    浏览量

    42842
收藏 人收藏

    评论

    相关推荐

    鸿蒙ArkUI-X跨平台开发:【命令行工具(ACE Tools)】

    ACE Tools是一套为ArkUI-X项目跨平台应用开发者提供的命令行工具,支持在Windows/Ubuntu/macOS平台运行,用于构建OpenHarmony/HarmonyOS、Android和iOS平台的应用程序,其功能包括
    的头像 发表于 05-21 17:39 1770次阅读
    <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 813次阅读
    <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 1548次阅读
    <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 2085次阅读
    <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 2608次阅读
    <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 827次阅读
    资讯速递 | <b class='flag-5'>ArkUI-X</b> 预览版已正式开源!

    鸿蒙ArkUI开发-Tabs组件的使用

    鸿蒙ArkUI开发-Tabs组件的使用
    的头像 发表于 01-19 16:01 1886次阅读
    <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 948次阅读
    <b class='flag-5'>鸿蒙</b>跨平台框架:【<b class='flag-5'>ArkUi-X</b>】创建工程

    鸿蒙ArkUI-X跨平台技术:【开发准备】

    本文档适用于ArkUI跨平台应用开发的初学者。通过开发环境搭建、应用工程创建、编译和运行,熟悉ArkUI跨平台应用开发基本流程。
    的头像 发表于 05-24 10:40 472次阅读
    <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 639次阅读
    <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 700次阅读
    <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 589次阅读
    <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 882次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b>跨语言调用说明:平台差异化【Android、ios动态化】

    鸿蒙ArkUI-X框架开发:【开发准备】

    本文档适用于ArkUI-X框架开发的初学者。通过环境搭建、代码下载、代码编译、API扩展和使用,快速了解跨平台项目开发流程。
    的头像 发表于 05-23 21:02 473次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b>框架<b class='flag-5'>开发</b>:【<b class='flag-5'>开发</b>准备】