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

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

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

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

ArkUI-X

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

关键特征

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

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

技术架构

配置IDE开发环境

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

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

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

关于使用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 SDK OpenHarmony的SDK包。
ArkUI-X SDK ArkUI-X的SDK包。
Android SDK Android的SDK包。

表2 macOS平台环境要求

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

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

OpenHarmony SDK

  1. File > Settings > SDK (macOS为DevEco Studio > Preferences > SDK )下,点击Location右侧的Edit,为SDK选择存储路径。
  2. 在弹出的SDK Setup页面选择存储路径,一直点击Next ,直到完成SDK的安装后,点击Finish

安装ArkUI-X SDK

  1. File > Settings > ArkUI-X (macOS为DevEco Studio > Preferences > ArkUI-X )下,点击Location右侧的Edit,为SDK选择存储路径。
  2. 在弹出的SDK Setup页面选择存储路径,一直点击Next ,直到完成SDK的安装后,点击Finish

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

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

  • Windows环境变量设置方法: 在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中,新建系统变量。变量名为ANDROID_HOME,变量值为Android SDK安装目录。
  • 环境变量配置完成后,关闭并重启DevEco Studio。

  • macOS环境变量设置方法:

    1. 打开终端工具,执行以下命令,打开.bash_profile文件。

      bash 复制代码
      vi ~/.bash_profile
    2. 单击字母"i",进入Insert模式。

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

      bash 复制代码
      export ANDROID_HOME=/Users/xxx/Library/Android/sdk
    4. 编辑完成后,单击Esc 键,退出编辑模式,然后输入":wq",单击Enter键保存。

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

      bash 复制代码
      source ~/.bash_profile
    6. 环境变量配置完成后,关闭并重启DevEco Studio。

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]

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

[Windows]

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

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

开发环境检查

sql 复制代码
ace check

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

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

ace config

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

语法:

arduino 复制代码
ace config [arguments]
参数 说明
--android-sdk Android SDK路径。
--android-studio-path Android Studio安装路径(可选参数)。
--arkui-x-sdk ArkUI-X SDK路径。
--build-dir 编译输出的路径。
--deveco-studio-path DevEco Studio安装路径(可选参数)。
--harmonyos-sdk HarmonyOS SDK路径。
--java-sdk JDK路径。
--nodejs-dir Node.js 路径。
--ohpm-dir Ohpm路径。
--openharmony-sdk OpenHarmony SDK路径。

命令行创建应用

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

bash 复制代码
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.

应用运行

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

IDE创建应用

应用介绍

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

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

导入应用模板

通过Import Samples导入helloworld工程。

切换到OpenHarmony

点击next

然后项目就创建完成啦。

目录结构

  • 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:应用级编译构建任务脚本。

编写代码

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

typescript 复制代码
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%')
  }
}

第二个页面

typescript 复制代码
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%')
  }
}

编写完成之后。

编译构建生成跨平台应用

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

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

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

ios上运行

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

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

用xcode打开

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

做如下的配置。

然后我们就可以运行啦

android上运行

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

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

运行效果

参考链接

gitee.com/arkui-x/cli...

ost.51cto.com/posts/26132

gitee.com/arkui-x/doc...

gitee.com/arkui-x/doc...

总结

我们通过了解ArkUI-X这一个项目,以及开发环境搭建,并将示例正确的运行到ios,android,以及openharmony和harmonyos设备上。总体流程比较顺利,也没有遇到什么问题,体验还是蛮好的。

相关推荐
Json_1817901448042 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51272 小时前
LinuxC语言
java·服务器·前端