当前位置: 首页 > news >正文

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

运行环境

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 runYour 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.……

相关文章:

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

运行环境 DevEco Studio:4.0Release OpenHarmony SDK API10 开发板:润和DAYU200 自从写了一篇ArkUI-X跨平台的文章之后,好多人都说对这个项目十分关注。 那么今天我们就来完整的梳理一下这个项目。 1、ArkUI-X 我们之前可能更多接触的…...

(2024,分数蒸馏抽样,Delta 降噪分数,LoRA)PALP:文本到图像模型的提示对齐个性化

PALP: Prompt Aligned Personalization of Text-to-Image Models 公和众和号:EDPJ(进 Q 交流群:922230617 或加 VX:CV_EDPJ 进 V 交流群) 目录 0. 摘要 4. 提示对齐方法 4.1 概述 4.2 个性化 4.3 提示对齐分数抽…...

近日遇到数据库及其他问题

一、查找备份表和原表不一样数据 select * from A where (select count(1) from A_BAK where A.IDA_BAK.ID) 0 二、在数据量比较大的表中新增有默认值的列速度较慢问题 使用 以下语句,在上亿数据的表中执行速度较慢 alter table TEST add col_a integer DEFA…...

【conda】conda 版本控制和环境迁移/安装conda加速工具mamba /conda常用指令/Anaconda配置

【conda】安装conda加速工具mamba /conda常用指令/Anaconda配置 0. conda 版本控制和环境迁移1. 安装conda加速工具mamba2. conda install version3. [Anaconda 镜像](https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/)使用帮助4. error deal 0. conda 版本控制和环境迁移…...

“/bin/bash“: stat /bin/bash: no such file or directory: unknown

简介:常规情况下,在进入容器时习惯使用 /bin/bash为结尾,如:docker exec -it test-sanic /bin/bash, 但是如果容器本身使用了精简版,只装了sh命令,未安装bash。这时就会抛出"/bin/bash&quo…...

基于Spring Boot+vue的云上新鲜水果超市商城系统

本云上水果超市是为了提高用户查阅信息的效率和管理人员管理信息的工作效率,可以快速存储大量数据,还有信息检索功能,这大大的满足了用户、员工信息和管理员这三者的需求。操作简单易懂,合理分析各个模块的功能,尽可能…...

vue-ESlint代码规范及修复

1. 介绍 ESLint:是一个代码检查工具,用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。 在创建项目时,我们使用的是 JavaScript Standard Style 代码风格的规则。 规范网址:https://standardjs.com/rules-zhcn.htm…...

Oracle数据库断电后不能打开的解决

数据库突然断电后,不能打开。或者偶尔能打开,但是很快就关闭。  原因可能很多。但是解决问题只有一种办法:看trace日志,alert错误日志 简单写下我的解决过程: 1,在alert日志中: 错误如下两种&#xff1a…...

论文复现: In-Loop Filter with Customized Weights For VVC Intra Coding

论文复现: In-Loop Filter with Customized Weights For VVC Intra Coding 这个好难好难。啊啊啊啊。核心:权重预测模块功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的…...

配置华为设备NQA UDP Jitter检测VoIP业务抖动

组网需求 如图1所示,总部和子公司之间需要跨越外部网络进行通信,DeviceA和DeviceD为总部和子公司的网络出口设备,DeviceB和DeviceC为外部网络提供商的边缘设备。 总部和子公司之间经常要通过VoIP进行电话会议,要求双向时延小于2…...

GitHub要求所有贡献代码的用户在2023年底前启用双因素认证

到2023年底,所有向github托管的存储库贡献代码的用户都必须启用一种或多种形式的2FA。 双重身份认证 所谓双重身份认证(Two-Factor Authentication),就是在账号密码以外还额外需要一种方式来确认用户身份。 GitHub正在大力推动双…...

Nginx——强化基础配置

1、牢记Context Context是Nginx中每条指令都会附带的信息,用来说明指令在哪个指令块中使用,可以将Context 理解为配置环境。 每个指令都拥有自己的配置环境,如果把配置环境记错了,或者在设计时未考虑配置环境的作用,…...

黑马苍穹外卖学习Day6

HttpClient 介绍 HttpClient 是 Apache 提供的一个开源的 Java HTTP 客户端库,用于发送 HTTP 请求和处理 HTTP 响应。它提供了一种更简便的方式来执行 HTTP 请求,并支持多种协议,如 HTTP、HTTPS、FTP 等。 使用 HttpClient 可以方便地与远程…...

【Java 设计模式】设计原则之里氏替换原则

文章目录 1. 定义2. 好处3. 应用4. 示例结语 在软件开发中,设计原则是创建灵活、可维护和可扩展软件的基础。 这些原则为我们提供了指导方针,帮助我们构建高质量、易理解的代码。 ✨单一职责原则(SRP) ✨开放/封闭原则&#xff08…...

一步步指南:从指定时长中提取需求的帧图片,高效剪辑视频

在现代多媒体时代,视频已经成生活中不可或缺的一部分。从视频中提取某一帧图片,或者对视频进行剪辑,都是常见的需求。下面一起来看云炫AI智剪如何从指定时长中提取需求的帧图片,如何高效地剪辑视频。 按指定时长提取视频某帧图片的…...

【打卡】牛客网:BM93 盛水最多的容器

题目: 考虑到盛水容器的特殊性。双指针从最两边开始遍历,遍历过程中舍弃最小的。 不知道原理。 模板的: class Solution { public:/*** 代码中的类名、方法名、参数名已经指定,请勿修改,直接返回方法规定的值即可*…...

Golang 文件操作

读取 一次性读取 data, err : os.ReadFile("filename.txt") if err ! nil {log.Fatal(err) } fmt.Println(string(data))按行读取 方式1:bufio.NewScanner file, err : os.Open("filename.txt") if err ! nil {panic(err) } defer file.Clo…...

C++I/O流——(3)文件输入/输出(第二节)

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 含泪播种的人一定能含笑收获&#xff…...

内网穿透[让你在家里也能榨干学校的服务器]Yep!

内网穿透 问题:什么是内网穿透,内网穿透的作用是什么? 前提!!!!你得拥有超级管理员的权限,比如root,不然后面的一切免提! 应用场景如下:比如你…...

构建基于RHEL9系列(CentOS9,AlmaLinux9,RockyLinux9等)的支持63个常见模块的PHP8.1.20的RPM包

本文适用:rhel9系列,或同类系统(CentOS9,AlmaLinux9,RockyLinux9等) 文档形成时期:2023年 因系统版本不同,构建部署应略有差异,但本文未做细分,对稍有经验者应不存在明显障碍。 因软件世界之复杂和个人能力…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...

反射获取方法和属性

Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...