0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

跨Android、iOS、鸿蒙多平台框架ArkUI-X

王程 来源:jf_75796907 作者:jf_75796907 2024-01-31 14:52 次阅读

ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具,帮助您提升移动应用界面开发效率30%。您只需使用一套ArkTS API,就能在AndroidiOS鸿蒙多个平台上提供生动而流畅的用户界面体验。

一、配套关系

表1 版本软件和平台配套关系

目标平台 项目编译使用OS SDK版本 备注
OpenHarmony 4.0 (API Version 10) Beta2
Android Android 8+ (API level 26+) NA
iOS iOS 10+ NA

二、SDK获取

表2 获取SDK路径列表

SDK版本 版本信息 下载站点 SHA256校验码
ArkUI-X SDK包(macOS) 1.0.0 Canary1 站点 SHA256校验码
ArkUI-X SDK包(macOS-M1) 1.0.0 Canary1 站点 SHA256校验码
ArkUI-X SDK包(Windows) 1.0.0 Canary1 站点 SHA256校验码
ArkUI-X SDK包(Linux 1.0.0 Canary1 站点 SHA256校验码

三、Samples

表3 Samples列表

项目名称 简介
HelloWorld HellWorld应用工程示例,支持Android、iOS和OpenHarmony应用构建。
Shopping 仿购物应用工程示例,支持Android、iOS和OpenHarmony应用构建。
HealthyDiet 健康饮食应用工程示例,支持Android、iOS和OpenHarmony应用构建。
Native NAPI应用工程示例,支持Android、iOS和OpenHarmony应用构建。
Library 平台库应用工程示例,支持Android、iOS和OpenHarmony应用构建。

四、开发工具

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

五、环境准备

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

配置Node.js环境

运行ACE Tools和OpenHarmony SDK需Node.js环境支持,建议下载14.19.1 - 16.19.1版本。可命令行运行 node -v 查看本地Node.js版本,如不存在或版本不符合要求,请自行下载安装稳定版本:Node.js下载地址,并配置到环境变量。

配置Java环境

Android和OpenHarmony/HarmonyOS应用打包需Java环境支持,建议下载JDK11.0.2以上版本,下载请点击此处。推荐环境变量配置如下:

[macOS]

// 配置环境变量
export JAVA_HOME=/path-to-java-sdk
export PATH=$JAVA_HOME/bin:$PATH

[Windows]

// 配置环境变量  
set JAVA_HOME=/path-to-java-sdk  
set PATH=%PATH%;%JAVA_HOME%/bin

配置ohpm环境

OHPM CLI(OpenHarmony Package Manager Command-line Interface)是OpenHarmony应用工程的三方库的包管理工具,可通过DevEco Studio > File > Settings > Build, Execution, Deployment > Ohpm 查看ohpm home的安装路径,并配置到环境变量中。

配置ArkUI-X SDK环境

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

[macOS]

// 配置环境变量  
export ARKUIX_SDK_HOME=/path-to-arkui-x-sdk

[Windows]

// 配置环境变量  
set ARKUIX_SDK_HOME=/path-to-arkui-x-sdk

六、命令安装

安装ace命令

修改npm源,前往用户目录,在.npmrc文件中添加如下内容:

@ohos:registry=https://repo.harmonyos.com/npm/  
registry=https://repo.huaweicloud.com/repository/npm/

全局安装ACE命令

cd arkui-x/toolchains/ace_tools    // 根据ArkUI-X SDK下载路径,进入ACE Tools实际所在目录。  
npm install  
npm install . -g

七、开发环境检查

ace check

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

注:开发环境检查主要针对Android/iOS/OpenHarmony/HarmonyOS IDE以及对应SDK的默认安装和下载路径进行检查。如果提示结果与实际不符,请您通过ace config命令指定实际的IDE安装和SDK下载路径。

八、创建应用

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

ace create project  
? Please enter the project name: demo  
? Please enter the bundle name (com.example.demo):com.example.demo  
? Please enter the system (1: OpenHarmony, 2: HarmonyOS): 1  
? Please enter the project type (1: Application, 2: Library): 1  
? Please enter the template (1: Empty Ability, 2: Native C++): 1   //选择创建Empty Ability或者Native C++项目

执行 `ace create project` 命令,接着输入工程名 demo。

九、应用运行

安装运行到Android设备

cd demo  
ace run apk

安装运行到iOS设备

cd demo  
ace run app

安装运行到OpenHarmony设备

cd demo  
ace run hap

上述命令会完成应用构建打包,并安装到目标平台设备运行。

wKgZomW57faAOjuhAADmC_RvzVs622.png

审核编辑 黄宇


声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • Android
    +关注

    关注

    12

    文章

    3889

    浏览量

    126209
  • ui
    ui
    +关注

    关注

    0

    文章

    201

    浏览量

    21266
  • 鸿蒙
    +关注

    关注

    55

    文章

    2257

    浏览量

    42345
收藏 人收藏

    评论

    相关推荐

    鸿蒙开发学习:初探【ArkUI-X

    **简单来说,ArkTS + ArkUI-X 对标的框架为 flutter,一次代码,编译为 native 全平台运行**
    的头像 发表于 05-13 15:58 620次阅读
    <b class='flag-5'>鸿蒙</b>开发学习:初探【<b class='flag-5'>ArkUI-X</b>】

    鸿蒙ArkUI-X平台开发:【命令行工具(ACE Tools)】

    ACE Tools是一套为ArkUI-X项目平台应用开发者提供的命令行工具,支持在Windows/Ubuntu/macOS平台运行,用于构建OpenHarmony/HarmonyOS
    的头像 发表于 05-21 17:39 753次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b>开发:【命令行工具(ACE Tools)】

    鸿蒙ArkUI-X平台开发:【SDK目录结构介绍】

    本文档配套ArkUI-X,将OpenHarmony ArkUI开发框架扩展到不同的OS平台,比如Android
    的头像 发表于 05-20 16:28 570次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b>开发:【SDK目录结构介绍】

    鸿蒙ArkUI-X平台开发:【bility开发说明(Android平台)】

    本文介绍将ArkUI框架扩展到Android平台所需要的必要的类及其使用说明,开发者基于OpenHarmony,可复用大部分的应用代码(生命周期等)并可以部署到
    的头像 发表于 05-21 10:54 583次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b>开发:【bility开发说明(<b class='flag-5'>Android</b><b class='flag-5'>平台</b>)】

    鸿蒙ArkUI-X语言调用说明:【平台桥接开发指南(Android)】

    平台桥接用于客户端(ArkUI)和平台AndroidiOS)之间传递消息,即用于ArkUI
    的头像 发表于 05-25 16:26 288次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b>语言调用说明:【<b class='flag-5'>平台</b>桥接开发指南(<b class='flag-5'>Android</b>)】

    鸿蒙开发ArkUI-X基础知识:【ArkUI平台设计总体说明】

    本文档描述ArkUI开发框架平台运行能力相关的总体技术方案。
    的头像 发表于 05-24 15:41 950次阅读
    <b class='flag-5'>鸿蒙</b>开发<b class='flag-5'>ArkUI-X</b>基础知识:【<b class='flag-5'>ArkUI</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b>设计总体说明】

    ArkUI-X开发指南:【SDK配置和构建说明】

    ArkUI-X SDK是ArkUI-X开源项目的编译产物,可将ArkUI-X SDK集成到现有AndroidiOS应用工程中,使开发者基于
    的头像 发表于 05-25 16:48 2017次阅读
    <b class='flag-5'>ArkUI-X</b>开发指南:【SDK配置和构建说明】

    资讯速递 | ArkUI-X 预览版已正式开源!

    较高。使用ArkUI-X平台项目后,复杂单品详情页代码一次编写支持运行到AndroidiOS和HarmonyOS(OpenHarmony
    发表于 08-11 16:10

    资讯速递 | ArkUI-X 预览版已正式开源!

    OpenHarmony项目群技术指导委员会(以下简称“TSC”)-平台应用开发框架TSG所孵化项目 —— ArkUI-X,近期已正式开源 ,开发者基于一套主代码,就可以将在OpenH
    的头像 发表于 08-22 22:19 652次阅读
    资讯速递 | <b class='flag-5'>ArkUI-X</b> 预览版已正式开源!

    鸿蒙平台框架:【ArkUi-X】创建工程

    鸿蒙推出了鸿ArkUi-X 框架所以就写个文章分享一下
    的头像 发表于 05-13 17:48 418次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>框架</b>:【<b class='flag-5'>ArkUi-X</b>】创建工程

    鸿蒙ArkUI-X平台技术:【开发初体验】

    在DevEco Studio中导入ArkUI-X Sample,快速创建平台工程。
    的头像 发表于 05-17 15:54 277次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b>技术:【开发初体验】

    鸿蒙ArkUI-X平台开发:【 应用工程结构说明】

    本文档配套ArkUI-X,将OpenHarmony ArkUI开发框架扩展到不同的OS平台,比如Android
    的头像 发表于 05-19 21:05 228次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b>开发:【 应用工程结构说明】

    鸿蒙ArkUI-X语言调用说明:【平台桥接(@arkui-x.bridge)】

    平台桥接用于客户端(ArkUI)和平台AndroidiOS)之间传递消息,即用于ArkUI
    的头像 发表于 05-21 15:09 265次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b>语言调用说明:【<b class='flag-5'>平台</b>桥接(@<b class='flag-5'>arkui-x</b>.bridge)】

    鸿蒙ArkUI-X语言调用说明:平台差异化【Androidios动态化】

    ArkUI-X支持动态化,使用者可以根据自己需要动态发布平台内容,从而使平台部分和宿主应用进行解耦。
    的头像 发表于 05-23 14:38 354次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b>语言调用说明:<b class='flag-5'>平台</b>差异化【<b class='flag-5'>Android</b>、<b class='flag-5'>ios</b>动态化】

    鸿蒙ArkUI-X框架开发:【开发准备】

    本文档适用于ArkUI-X框架开发的初学者。通过环境搭建、代码下载、代码编译、API扩展和使用,快速了解平台项目开发流程。
    的头像 发表于 05-23 21:02 209次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>框架</b>开发:【开发准备】