ArkUI-X跨平台已至，何需其它！

2024-01-16 00:52
文章标签 跨平台 已至 arkui 何需

本文主要是介绍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跨平台已至，何需其它！的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/610788。

相关文章

C++ Log4cpp跨平台日志库的使用小结

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window
阅读更多...
基于Python+PyQt5打造一个跨平台Emoji表情管理神器

基于Python+PyQt5打造一个跨平台Emoji表情管理神器

《基于Python+PyQt5打造一个跨平台Emoji表情管理神器》在当今数字化社交时代,Emoji已成为全球通用的视觉语言,本文主要为大家详细介绍了如何使用Python和PyQt5开发一个功能全面的... 目录概述功能特性1. 全量Emoji集合2. 智能搜索系统3. 高效交互设计4. 现代化UI展示效果
阅读更多...
Python结合PyWebView库打造跨平台桌面应用

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验
阅读更多...
cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?

cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈？ cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte
阅读更多...
“掌握Linux网络编程艺术，构建跨平台的网络通信解决方案！“#Linux系统编程之网络编程

“掌握Linux网络编程艺术，构建跨平台的网络通信解决方案！“#Linux系统编程之网络编程

"掌握Linux网络编程艺术，构建跨平台的网络通信解决方案！"#Linux系统编程之网络 前言预备知识一、 网络编程概述1.1 网络编程概述图1.2 TCP/UDP对比（面试）1.3 端口号的作用 二、 字节序2.1 大端字节序（Big-Endian）2.2 小端字节序（Little-Endian）2.3 字节序的重要性2.4 字节序转换函数2.5 字节序示意图 三、 socket编程步骤四
阅读更多...
鸿蒙开发入门day06-ArkUI简介

鸿蒙开发入门day06-ArkUI简介

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，还请三连支持一波哇ヾ(＠^∇^＠)ノ） 目录 ArkUI简介 基本概念 两种开发范式 不同应用类型支持的开发范式 UI开发（ArkTS声明式开发范式）概述 特点 整体架构 开发布局 布局结构 布局元素的组成 布局位置 对子元素的约束 ArkUI简介 ArkUI（方舟UI框架）为应用
阅读更多...
Termius for Mac/Win：高效、安全的跨平台多协议远程管理软件

Termius for Mac/Win：高效、安全的跨平台多协议远程管理软件

Termius for Mac/Win是一款专为专业人士设计的跨平台多协议远程管理软件，以其强大的功能、简洁的界面和高效的操作体验，赢得了广泛的好评。这款软件不仅支持SSH、Telnet、SFTP等多种远程连接协议，还具备丰富的安全特性和便捷的管理功能，是远程连接和管理的理想选择。 主要特点： 多协议支持：Termius支持SSH、Telnet、SFTP、RDP、Mosh等多种远程连接协议，
阅读更多...
跨平台打印模板转化pdf源码--SAAS本地化及未来之窗行业应用跨平台架构

跨平台打印模板转化pdf源码--SAAS本地化及未来之窗行业应用跨平台架构

一、跨平台打印转pdf渲染 pdf渲染模式可以支持国产化系统，和手机系统，安卓，苹果系统，qq浏览器，火狐，谷歌刘安祺 二、代码 /*///cyberwin_offline_database_printtemp.js未来之窗打印模板解析技术 2024-09LeftMargin="0" TopMargin="0" RightMargin="0" BottomMargin="0"ReportP
阅读更多...
【C#跨平台开发详解】C#跨平台开发技术之.NET Core基础学习及快速入门

【C#跨平台开发详解】C#跨平台开发技术之.NET Core基础学习及快速入门

1. C#与.NET的发展历程 C#是由Microsoft开发的现代编程语言，最初伴随着.NET Framework发布。随着技术的进步，特别是针对跨平台开发的需求，Microsoft推出了.NET Core，这是一个开源且跨平台的框架，支持Windows、macOS和Linux。 2002年：C# 1.0 发布，仅限于Windows。2016年：.NET Core 1.0 发布，开启了C#跨
阅读更多...
是噱头还是低成本新宠？加州大学用视觉追踪实现跨平台的机器手全掌控？

是噱头还是低成本新宠？加州大学用视觉追踪实现跨平台的机器手全掌控？

导读： 在当今科技飞速发展的时代，机器人的应用越来越广泛。从工业生产到医疗保健，从物流运输到家庭服务，机器人正在逐渐改变我们的生活方式。而机器人的有效操作和控制，离不开高效的遥操作系统。今天，我们要介绍的是UC San Diego 的新研究，一种创新的跨平台视觉外骨骼系统ACE。©️【深蓝AI】编译 1. ACE系统的背景与概述 近年来，机器人研究者们通常利用真实世界的机器人数据，来训练
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2