ArkUI-X跨平台已至,何需其它!

news2024/11/15 21:37:43

运行环境

DevEco Studio:4.0Release

OpenHarmony SDK API10

开发板:润和DAYU200

自从写了一篇ArkUI-X跨平台的文章之后,好多人都说对这个项目十分关注。

那么今天我们就来完整的梳理一下这个项目。

1、ArkUI-X

我们之前可能更多接触的是ArkUI,我们都知道ArkUI是一套构建分布式应用的声明式UI开发框架。如今ArkUI-X进一步将ArkUI扩展到了多个OS平台:目前支持OpenHarmony、HarmonyOS、Android、 iOS,四个平台。未来也会支持更多的平台。

2、关键特征

ArKUI跨平台框架关键特征如下:

  1. 简洁自然的声明式语法。
  2. 高效的渲染管线以及平台一致性的渲染机制。
  3. 高效的方舟编译器以及运行时。
  4. 统一的跨平台API能力集以及扩展机制。
  5. 动态化特性

3、技术架构

4、配置IDE开发环境

您可以通过自己偏好的文本编辑器和ACE Tools命令行工具进行ArkUI-X应用开发,我推荐您结合DevEco Studio进行应用开发以获取更好的开发体验,除提供代码智能编辑和双向预览功能外,还会对ArkTS接口进行跨平台过滤和编译提示。

当然我的推荐也只是我的推荐,你可以继续使用ACE Tools命令行工具进行ArkUI-X应用开发。我也会在后面介绍这种方式。

我们先用IDE的方式来教大家如何使用。

4.1、关于使用IDE的约束

  • DevEco Studio仅支持ArkUI-X源码开发和调试,各平台Native代码请使用对应平台的IDE编辑器进行开发和调试;
  • ArkUI-X支持在Android/iOS平台真机和模拟器上运行调试;
  • 平台版本及构建工具要求:
  • OpenHarmony平台:支持API 10+;
  • Android平台:Android 8+,Level-26,version code: O,Codename: Oreo;
  • iOS平台:iOS 10+

在开发应用前,请先完成依赖环境准备。

表1 Windows平台环境要求

组件包名说明
OpenHarmony SDKOpenHarmony的SDK包。
ArkUI-X SDKArkUI-X的SDK包。
Android SDKAndroid的SDK包。

表2 macOS平台环境要求

组件包名说明
OpenHarmony SDKOpenHarmony的SDK包。
ArkUI-X SDKArkUI-X的SDK包。
Android SDKAndroid的SDK包。
XcodeiOS应用开发环境,请参考官方环境搭建指导。

这里默认大家的Android SDK和Xcode是ok 的,所以我们只关心OpenHarmony SDK和ArkUI-X SDK。

4.2、OpenHarmony SDK

  1. File > Settings > SDK(macOS为DevEco Studio > Preferences > SDK)下,点击Location右侧的Edit,为SDK选择存储路径。

  2. 在弹出的SDK Setup页面选择存储路径,一直点击Next,直到完成SDK的安装后,点击Finish

4.3、安装ArkUI-X SDK

  1. File > Settings > ArkUI-X(macOS为DevEco Studio > Preferences > ArkUI-X)下,点击Location右侧的Edit,为SDK选择存储路径。

  2. 在弹出的SDK Setup页面选择存储路径,一直点击Next,直到完成SDK的安装后,点击Finish

4.4、配置Android SDK安装目录环境变量

配置环境变量ANDROID_HOME,设置Android SDK安装目录。

  • Windows环境变量设置方法:在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中,新建系统变量。变量名为ANDROID_HOME,变量值为Android SDK安装目录。

zh-cn_image_0000001578322442

  • 环境变量配置完成后,关闭并重启DevEco Studio。
  • macOS环境变量设置方法:
  1. 打开终端工具,执行以下命令,打开.bash_profile文件。
vi ~/.bash_profile
  1. 单击字母“i”,进入Insert模式。

  2. 输入以下内容,配置Android SDK安装目录。

export ANDROID_HOME=/Users/xxx/Library/Android/sdk  
  1. 编辑完成后,单击Esc键,退出编辑模式,然后输入“:wq”,单击Enter键保存。

  2. 执行以下命令,使配置的环境变量生效。

source ~/.bash_profile  
  1. 环境变量配置完成后,关闭并重启DevEco Studio。

5、ACE Tools快速指南

ACE Tools是一套为ArkUI-X应用开发者提供的命令行工具,支持在Windows/Ubuntu/macOS平台运行,用于构建OpenHarmony、HarmonyOS、Android和iOS平台的应用程序, 其功能包括开发环境检查,新建项目,编译打包,安装调试等。

前置条件: Ubuntu需要18.04以上版本,macOS需要11.6.2及以上版本,Windows需要Windows 10版本。

1. 配置ohpm环境

OHPM CLI作为鸿蒙生态三方库的包管理工具,支持OpenHarmony共享包的发布、安装和依赖管理。可通过DevEco Studio > File > Settings > Build, Execution, Deployment > Ohpm 查看ohpm home的安装路径,并配置到环境变量中(macOS为DevEco Studio > Preferences > Build, Execution, Deployment > Ohpm)。

2. 配置ArkUI-X SDK环境

ArkUI-X SDK下载路径,可通过DevEco Studio > File > Settings > ArkUI-X查看ArkUI-X的安装路径,并配置到环境变量中(macOS为DevEco Studio > Preferences > ArkUI-X)。推荐如下配置方法:

[macOS]

// 配置环境变量
export ARKUIX_SDK_HOME=/path-to-arkui-x-sdk
export PATH=${ARKUIX_SDK_HOME}/10/arkui-x/toolchains/bin:$PATH

[Windows]

可在桌面工具栏搜索框键入"环境变量",然后选择编辑系统环境变量,进行环境变量配置。另外,也可在控制台通过如下命令进行配置。

// 配置环境变量  
set ARKUIX_SDK_HOME=/path-to-arkui-x-sdk  
set PATH=%PATH%;%ARKUIX_SDK_HOME%/10/arkui-x/toolchains/bin  

5.1、开发环境检查

ace check  

执行 ace check 命令可以检查ArkUI-X应用开发环境是否完备。


说明:开发环境检查只识别IDE和SDK默认的安装路径,如果提示结果与实际不符,可以通过ace config命令来配置

5.2、ace config

设置ACE工具链相关配置,包括OpenHarmony SDK路径,HarmonyOS SDK路径、ArkUI-X SDK路径、Android SDK路径、Node.js路径、编译输出路径等。

语法:

ace config [arguments]  
参数说明
–android-sdkAndroid SDK路径。
–android-studio-pathAndroid Studio安装路径(可选参数)。
–arkui-x-sdkArkUI-X SDK路径。
–build-dir编译输出的路径。
–deveco-studio-pathDevEco Studio安装路径(可选参数)。
–harmonyos-sdkHarmonyOS SDK路径。
–java-sdkJDK路径。
–nodejs-dirNode.js 路径。
–ohpm-dirOhpm路径。
–openharmony-sdkOpenHarmony SDK路径。

5.3、命令行创建应用

以创建一个 Stage模型‘demo’项目为例:

ohos@user Desktop % ace create demo
? Enter the project name(demo): # 输入工程名称,不输入默认为文件夹名称
? Enter the bundleName (com.example.demo):  # 输入包名,不输入默认为com.example.工程名
? Enter the runtimeOS (1: OpenHarmony, 2: HarmonyOS): 1 # 输入RuntimeOS系统

Project created. Target directory:  ${当前目录}/demo.

In order to run your app, type:

   $ cd demo
   $ ace run

Your app code is in demo/entry.

5.4、应用运行

  • 安装运行到Android/iOS/OpenHarmony设备(注:iOS设备执行ace run前请先打开Xcode完成应用签名)
cd demo
ace run

6、IDE创建应用

6.1、应用介绍

使用ArkTS语言开发(Stage模型)

通过构建一个简单的ArkUI页面跳转示例,快速了解资源创建引用,路由代码编写和UI布局编写等应用开发流程。

6.2、导入应用模板

通过Import Samples导入helloworld工程。

切换到OpenHarmony

点击next

然后项目就创建完成啦。

7、目录结构

  • AppScope > app.json5:应用的全局配置信息。
  • entry:OpenHarmony工程模块,编译构建生成一个HAP包。
  • build:用于存放OpenHarmony编译生成的hap包。
  • src > main > ets:用于存放ArkTS源码。
  • src > main > ets > entryability:应用/服务的入口。
  • src > main > ets > pages:应用/服务包含的页面。
  • src > main > resources:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。
  • src > main > module.json5:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
  • build-profile.json5:当前的模块信息 、编译信息配置项,包括buildOption、targets配置等。
  • hvigorfile.ts:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
  • oh_modules:用于存放三方库依赖信息。
  • build-profile.json5:应用级配置信息,包括签名signingConfigs、产品配置products等。
  • hvigorfile.ts:应用级编译构建任务脚本。

8、编写代码

在上述工程创建完成后,开发者可在项目中的entry目录下进行代码开发。

import { Router } from '@ohos.arkui.UIContext'
import router from '@ohos.router'

@Entry
@Component
struct SecondPage {
  @State message: string =
    '坚果,华为HDE、中国计算机学会CCF专业会员、2022OpenHarmony布道师开发者联盟优秀讲师、2023年开源之夏导师、2023年OpenHarmony应用创新赛导师、OpenHarmony金融应用创新赛导师、RISC-V+OpenHarmony应用创意赛导师、OpenHarmony三方库贡献者、开放原子开源基金会技术+生态贡献者第一批开放原子开源讲师OpenHarmony校源行开源大使、InfoQ签约作者、CSDN博客专家、电子发烧友MVP、51CTO博客专家博主、阿里云博客专家、曾受邀参加2022,2023HDC大会。专注于分享的技术包括HarmonyOS/OpenHarmony,ArkUI-X,元服务,服务卡片,华为自研语言,在2022年战码活动中,带领100余人完成pr的提交,配合孵化三个小队长。也在此活动中累计完成1.5W行代码提交,以及在2023年OpenHarmony创新赛中。累计辅导60+队伍,完成作品的提交,在相关社区累计发布OpenHarmony相关技术文章/视频50+,获得20w+浏览量。团队成员聚集在北京,上海,南京,深圳,广州,宁夏等地,欢迎合作。'

  build() {

    Column() {
      Scroll() {
        Column() {
          Text("坚果").fontSize(38)
          Text(this.message)
            .fontSize(24)
        }.onClick(() => {
          router.pushUrl({
            url: "pages/FirstPage"
          })
        }).padding(10)

      }

    }.width('100%')
    .height('100%')
  }
}

第二个页面

import router from '@ohos.router'

@Entry
@Component
struct FirstPage {
  @State message: string = '欢迎加入坚果派'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(() => {
          router.back()
        })
        Text("17752170152")
          .fontSize(50)
        Image($r("app.media.img")).width(200)
      }
      .width('100%')
    }
    .height('100%')
  }
}

编写完成之后。

9、编译构建生成跨平台应用

DevEco Studio可打包生成不同平台的应用包。

在主菜单栏,单击**Build > Build Hap(s)/APP(s) > Build APP(s)**。

编译后的ArkTS代码、资源和平台胶水代码已生成到Android和iOS应用工程中,后续安装、运行和调试请使用Android Studio和Xcode,

9.1、ios上运行

我们来看一下在ios上如何运行

显示隐藏文件快捷键:Command + Shift + . 在Finder打开你想要查看隐藏文件的文件夹,然后使用快捷键Command + Shift + .,即可查看当下文件夹中的隐藏文件。

!
用xcode打开

然后我们我们选择app这一级。

做如下的配置。

然后我们就可以运行啦

9.2、android上运行

我们只需要将真机连接之后运行如下命令

ace build  apk --debug  
 ace install
[1]:  NCO-AL00 (4HDVB22721000372) [Android]
[2]:  iPhone 14 Pro (A50BEA4C-3AAB-40BE-970A-606008F28FA0) [iOS Simulator]

运行效果


为了能让大家更好的学习鸿蒙 (OpenHarmony) 开发技术,这边特意整理了《鸿蒙 (OpenHarmony)开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙 (OpenHarmony)开发学习手册》

入门必看:https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)
  2. ……

HarmonyOS 概念:https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门?:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. 构建第一个JS应用
  4. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1387100.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

运动模型非线性扩展卡尔曼跟踪融合滤波算法(Matlab仿真)

卡尔曼滤波的原理和理论在CSDN已有很多文章,这里不再赘述,仅分享个人的理解和Matlab仿真代码。 1 单目标跟踪 匀速转弯(CTRV)运动模型下,摄像头输出目标状态camera_state [x, y, theta, v],雷达输出目标状…

windows的换行符与linux风格的换行符不同的问题

问题展示: 说明: 出现这个错误的原因是脚本文件包含了windows风格换行符(‘\r\n’),而在linux环境下,通常使用unix风格的换行符(‘\n’).这个问题通常在windows环境下编辑脚本文件然…

档案数字化加工是如何利用档案的

档案数字化加工是通过将实体档案转化为电子形式,利用数字化技术对档案进行处理和管理。这样做可以带来以下几个方面的利益: 1. 提高档案的可访问性:数字化档案可以轻松存储在电脑或云存储中,可以随时随地通过计算机或移动设备访问…

Zung氏抑郁自评量表SDS

抑郁症是常见的心理障碍,其症状表现为:心境低落、思维迟缓、意志活动减退、认知功能损害、躯体症状等。在生活中常有悲观消沉,灰心丧气,对所有事情都提不起兴趣,严重的还会出现肢体僵硬和耳鸣等症状。 部分人有明显的…

操作系统进程定义和PCB详解

进程的定义和PCB 什么是进程?进程就是一个运行起来(也就是说加载到内存)的一个程序。而程序的本质就是文件,当我们写完代码保存,它便形成了一个保存在磁盘上的二进制代码文件。由于冯诺伊曼体系,cpu只和存储…

RK3568笔记九: DRM显示摄像头

若该文为原创文章,转载请注明原文出处。 一、介绍 学习DRM的目的是想做类似NVR显示多路实时流,通过勇哥(Marc)的指导,大概流程是通过Zlmedia拉流,RK3568的MPP解码,DRM显示,可以使用HDMI或DIS屏幕&#xf…

数据结构学习 jz59 滑动窗口的最大值

关键词:排序 大顶堆 双端队列 题目: 望远镜中最高的海拔 方法一:维护一个辅助队列。 方法二:大顶堆。 我还在主站 239 写了找最小值的方法。 方法一:最优解 这个方法和jz30维护一个非严格递减的辅助栈是基本一样的…

15.鸿蒙HarmonyOS App(JAVA)进度条与圆形进度条

15.鸿蒙HarmonyOS App(JAVA)进度条与圆形进度条 progressBar2.setIndeterminate(true);//设置无限模式,运行查看动态效果 //创建并设置无限模式元素 ShapeElement element new ShapeElement(); element.setBounds(0,0,50,50); element.setRgbColor(new RgbColor(255,0,0)); …

jetson nano VNC远程桌面配置及使用(nomachine)

文章目录 jetson nano VNC远程桌面配置及使用1.Nomachine介绍2.在电脑端安装Nomachine3.在Jetson Nano端安装Nomachine4.电脑端连接及使用步骤5.修改分辨率6.NoMachine常见问题6.1 黑屏6.2 白屏 jetson nano VNC远程桌面配置及使用 本节适用于Jetson Nano没有单独显示器可以给…

数据库结构文档生成方法二(EZDML)

EZDML 下载链接:EZDML - 下载 我们常用的是数据建模有PowerDesigner,EZDML也是一款数据建模工具,而且功能很多,除了生成sql,还可以生成前端后端代码等等。 我们直接下载最新版后点击安装,打开后会默认打开示例&#…

活动 | Mint Blockchain 将于 2024 年 1 月 17 号启动 MintID 限量发行活动

MintID 是 Mint Blockchain 生态的超级权益卡,用于探索 NFT PASS 在未来各种应用场景下的可能性。MintID 将通过限时限量有价发售的方式对外释放,持有人将成为 Mint Blockchain 的核心权益用户。 MintID 总量:10,000 枚 铸造价格&#xff1a…

linux docker安装 rustdesk

这里写自定义目录标题 1:软件介绍:2:安装1. 服务器端2. 客户端 3:配置5:其他1:rustdesk 官方Docker Compose 1:软件介绍: 名称作用官网项目地址rustdesk实现多端互控https://rustdesk.com/inde…

【闯关练习】—— 1400分(构造)

🌏博客主页:PH_modest的博客主页 🚩当前专栏:cf闯关练习 💌其他专栏: 🔴每日一题 🟡 C跬步积累 🟢 C语言跬步积累 🌈座右铭:广积粮,缓…

谁知道try里面放return,finally还会执行吗?

在前面几篇文章中,我们已经了解了关于执行上下文、作用域、闭包之间的关系。 今天,我们则要说一说更为细节的部分:语句。 语句是任何编程语言的基础结构,与 JavaScript 对象一样,JavaScript 语句同样具有“看起来很像…

孤儿进程与僵尸进程以及僵尸进程的解决

孤儿进程: 定义: 父进程运行结束,但子进程还在运行(未运行结束),这样的子进程就称为孤儿进程( Orphan Process )。 过程: 每当出现一个孤儿进程的时候,内核就…

放空一下自我 free

文章目录 放空一下自我 free默认的效果使用易读的参数间隔显示内存状态查看meminfo文件更多信息 放空一下自我 free **free**这个命令在Linux系统监控的工具里面,算是使用的比较多的一个。 使用_man_查看可知,官方含义为: Display amount o…

Dockerfile: CMD与ENTRYPOINT区别

CMD和ENTRYPOINT的作用 CMD和ENTRYPOINT这两个命令,我接触到的是用在了Dockerfile中用于构建容器。 CMD:The main purpose of a CMD is to provide defaults for an executing container. CMD的主要用途是为正在执行的容器提供默认值。也就是指定这个容…

D课堂 | 为什么网站搭建好了却无法访问?(上)

在上一期D课堂中,D妹教大家如何用最简单的方法快速搭建一个网站,相信很多小伙伴已经跃跃欲试,尝试去搭建自己的网站。(点击这里可以快速复习) 然而,有不少人明明每个步骤都跟着做了,但最后在浏览…

企业销售获客难?分享一个精准筛查企业客户的技巧

作为企业销售经理,曾经一直让我们很头疼的问题之一就是获客困难。回想起以往,我们需要通过各种手段,手动查找电话名单、网络搜索到各种渠道,费尽心思的去筛查才能找到潜在客户。获客流程长还耗费很多的精力,拿到手的客…

【test】wsl2和win互ping

参考: https://zhuanlan.zhihu.com/p/365058237 https://blog.csdn.net/Cypher_X/article/details/123011200