• 微信:WANCOME
  • 扫码加微信,提供专业咨询
  • 服务热线
  • 0769-23063100
    13027920428

  • 微信扫码访问本页

华为发布了跨平台开发的ArkUI-X,我不允许你学不会!

旺道.商弈 -> 正文

就在8月7日开源鸿蒙 OpenHarmony 4.0 Beta2 发布,多平台开发框架 ArkUI-X 首发。

首先介绍下啥是 ArkUI:

ArkTS 语言 - HarmonyOS应用开发官网

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

首先需要下载支持 ArkUI-X 套件的华为开发工具 DevEco ,版本为 4.0 以上,目前可以下载预览版进行体验。下载地址:

HUAWEI DevEco Studio 4.0 Beta2

标题

地址

Windows x64

下载地址

Mac(Intel)

下载地址

Mac(Arm)

下载地址

安装过程很简单,这东西是基于 IDEA 做的,和 Android Studio 体验一致

文章图片1

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 也可以在这里下载安装。

文章图片2

注意:目前鸿蒙开发支持的 nodejs 版本为 14 和 16,如果本机装了 18 版本的 nodejs 需要先卸载,将全局 nodejs 替换为 16。不然后续项目开发中会遇到各种问题。

上面这段话加粗的目的就是,我昨天头铁使用 nodejs 18 ,踩坑太多了。所以建议大家直接将全局 nodejs 使用 16 版本就行,避免不必要的麻烦。这一点我给官方提了 issue 但是还未收到回复。

文章图片3

之后便是无脑下一步,等它下载完成 SDK 与相关依赖即可(你可以将 SDK 路径设置为其他文件夹)。

文章图片4

文章图片5

安装 OpenHarmony SDK

相关依赖下载完成,进入 IDE 首页后,先不急着创建项目,需要安装 OpenHarmony SDK。

点击 More Action , 选择 SDK Manager:

文章图片6

选择 OpenHarmony:

文章图片7

选择后需要指定一下路径,然后它会进行一些下载,等它下载完成:

文章图片8

文章图片9

下载完成后,勾选 API Version 10 相关的选项,点击确定等它下载完成:

文章图片10

安装 ArkUI-X SDK

OpenHarmony SDK 安装完成后,就可以安装 ArkUI-X SDK 了。同样的在设置里面选择 ArkUI-X ,指定路径,等待下载完成。

文章图片11

设置环境变量

ArkUI-X 需要设置好相应的环境变量才能正确使用。若缺少相关环境变量,会有弹窗提示:

文章图片12

所以在装好 Android Studio 后,需要将 Android SDK 添加至环境变量中:

变量名:ANDROID_HOME

变量值:你的 Android SDK 路径

文章图片13

文章图片14

创建项目

创建 Harmon OS 工程

上述步骤完成后,可以创建项目了。这里有很多 Harmon OS 的基础模板,可以任意选择一个进行创建:

文章图片15

这里可以不用设置,保持默认即可。我们需要的是这个模板里面的代码:

文章图片16

创建 OpenHarmony 工程

在创建了一个 Harmon OS 工程后,我们就进入到了 IDE 的实际界面,在此就可以找到创建 OpenHarmony 工程的选项。

为什么要 OpenHarmony 呢?首先要认识到 HarmonOS 和 OpenHarmony 的区别。这个具体区别在此我就不讲了,可能会被当做引战引起某些人不满意。只需要知道重点: ArkUI-X 是基于 OpenHarmony 的技术。在上一节也可以看到,使用 ArkUI-X , 需要安装 OpenHarmony SDK ,而没有去进行 HarmonOS SDK 的相关操作。

在上面菜单栏选择 File - New - Import - Import Sample:

文章图片17

然后选择 OpenHarmony ,选择 ArkUI-X 下的 HelloWorld

文章图片18

创建完成后进入此项目,等它依赖安装完成,在右上角选择 Previewer ,点击运行,就可以通过 OpenHarmony 预览界面进行预览:

文章图片19

文章图片20

这时一个基础的 OpenHarmony APP 工程就创建完成了。

移入代码

此时回到之前步骤创建的 Harmon OS 工程,将里面的 UI 代码移入进来。

进入 Harmon OS 工程的 entry - src - main 目录,复制里面的 ets 与 resources 目录:

文章图片21

同样的,在 OpenHarmony 工程中删掉这两个目录,替换为从 Harmon OS 工程复制的 ets 与 resources。

上述两个文件夹替换完成后,将同位置的 module.json5 文件中的内容也替换过去

整体步骤就是这样:

文章图片22

module.json5 的 deviceTypes 这样写,在预览的时候就可以选择用手机模式还是平板模式:

文章图片23

文章图片24

再次预览,就可以看到之前通过 Harmony OS 工程模板创建的界面显示在了这个 OpenHarmony 预览界面上

文章图片25

编译 OpenHarmony 工程

在 DevEco 菜单栏,选择 Build App,在编译为 OpenHarmony App 的同时,也会生成 Android 与 IOS 项目

文章图片26

编译完成后,可以看到生成的 Android 工程了:

文章图片27

在 Android 中运行

由于 ArkUI-X 编译出来的为 native 文件,只能在 ARM 上运行。Android Studio 提供的模拟器为 x64 架构,所以无法在 Android Studio 的模拟器中预览程序。

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

文章图片28

然后将它打包为 APK :

文章图片29

发送到手机上安装运行,可以看到一切正常 :

文章图片30

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

文章图片31

总结

至此基于 ArkUI-X 的跨平台开发流程已经初步了解了,后续就是根据华为的文档,学习 ArkTS ,开发实质性的应用程序,以及更深入地进行相关探索。

初识ArkTS语言-学习ArkTS语言-入门-HarmonyOS应用开发

对于华为的 ArkTS + ArkUI-X 开发框架,整体上我是很看到的。每个技术都有它的优点,都有它存在的意义。 React Native、Ionic、uniapp ,使用 H5 技术极大地提高了移动端跨平台开发效率;flutter ,降低了高性能跨平台 APP 开发的门槛;ArkTS + ArkUI-X ,让国产自研技术达到了一个新高度,完成了从零到一的迈步,让自研不再是 PPT ,不再是“套壳”。

当然 ArkTS + ArkUI-X 目前还有很多不足之处,比如 DevEco 有不少小 bug ,开发出来的 APP 在过渡动画上略有生硬。不过我相信华为一定会将它打磨完美,达到真正能够比肩 flutter 的程度。



原文链接:
https://juejin.cn/post/7264996015806545983


为什么程序员不能对代码终身负责?

Hello!这里是W3Cschool编程狮的小狮妹!在现代科技驱动的世界中,编程已经成为了无处不在的一项关键技能。程序员们的工作是创造、维护和改

华为发布了跨平台开发的ArkUI-X,我不允许你学不会!

就在8月7日开源鸿蒙 OpenHarmony 4.0 Beta2 发布,多平台开发框架 ArkUI-X 首发。首先介绍下啥是 ArkUI:Ark

一篇了解ERP与CRM、MRP、PLM、APS、MES、WMS、SRM的关系 !

ERP则是集成管理软件,可以覆盖企业的多个业务流程和数据,包括财务、人力、研发、生产制造、供应链、采购、销售、服务、资产管理等多个模块。

大屏可视化综合展示平台解决方案

概述建立大屏可视化综合展示平台,构建各业务板块统一的大数据分析平台,构建数据驾驶舱与智慧调度平台。深入探索挖掘企业的客户信息数据,以“大数据”理

Ideogram:一款秒杀Midjourney,免费无限生成的AI绘画神器

导读:Ideogram AI是一个文本生成图片的平台,它最大的优点就是好用、免费又没有生成限制,因此可以秒杀MJ和SD。AI绘画是人工智能领域的

Google 在中国大陆上线官方镜像资源站,为开发者提供访问和支持

摘要: Google 中国近日在其运营的公众号「谷歌开发者」中发布公告:目前国内开发者可通过 google.cn 直接访问 web.dev 以及... ...

生意之道:想赚大钱,就要学会与人分钱

只要你得到了好处 ,你就一定要分给别人,你只要每次都给了别人好处,你就会有源源不断的生意,就会源源不断地赚到许多莫名其妙的钱财,哈哈,这个莫名其... ...

2024流量共生,公域做规模,私域要复利

公域和私域是共生关系,在单独探讨一方时候总不自觉地思考与另一方的关系和联动。有很多企业两者之间会有所侧重,比如重公域销售,跑通投产比就持续放大,... ...

Nginx 常用配置汇总!从入门到干活足矣

众所周知,Nginx 是 Apache服务不错的替代品。其特点是占有内存少,并发能力强,事实上 Nginx 的并发能力在同类型的网页服务器中表现... ...

分布式架构和微服务架构的区别

1、含义不同微服务架构是一种将一个单一应用程序开发为一组小型服务的方法,每个服务运行在自己的进程中。分布式系统是若干独立计算机的集合,这些计算机... ...

大屏可视化综合展示平台解决方案

概述建立大屏可视化综合展示平台,构建各业务板块统一的大数据分析平台,构建数据驾驶舱与智慧调度平台。深入探索挖掘企业的客户信息数据,以“大数据”理... ...

Ideogram:一款秒杀Midjourney,免费无限生成的AI绘画神器

导读:Ideogram AI是一个文本生成图片的平台,它最大的优点就是好用、免费又没有生成限制,因此可以秒杀MJ和SD。AI绘画是人工智能领域的... ...

陈春花:营销的根本在于理解消费者

巨变时代,企业曾经行之有效的经验和方法也许不再有效,营销需要做合适的事情,其根本在于理解消费者,在创造顾客价值上的有所作为。春暖花开市场经济环境... ...

穷人变富需要具备的四大能力,你有吗?1 抗拒诱惑游戏、视频、麻将-今日头条

穷人变富需要具备的四大能力,你有吗?1 抗拒诱惑游戏、视频、麻将、小说等等这些东西无时不刻诱惑着我们。穷人若想变富,必须要把精力和时间用在学习知... ...

ChatGPT时代,重新定义官网

ChatGPT时代已来,人机之间用自然语言交流成为现实,用户表达需求的方式可以更自然、更直接。那么,各大网站上复杂的导航栏设计、重复性极高的筛选... ...

小红书高时效推荐系统背后的技术升级

在小红书 APP 中,推荐系统的实效性对推荐效果有着特别重要的影响,特别是作为 UGC 平台,小红书的推荐系统如果能更快地捕捉用户与笔记之间的变... ...

你的店铺真的盈利了吗?万能「烘焙运营公式」奉上!

面包王子说:做好一个店铺,并不只是运营店铺,而是在做一家企业,门店需要一家企业所要拥有的一切。包括:组织能力、战略能力和营销能力的三大方向。我们... ...