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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

class_5:在c++中一个类包含另一个类的对象叫做组合

#include <iostream> using namespace std;class Wheel{ public://成员数据string brand; //品牌int year; //年限//真正的成员函数void printWheelInfo(); //声明成员函数 };void Wheel::printWheelInfo() {cout<<"我的轮胎品牌是&#xff1a;"<…

MySQL之多表查询

1.创建student和score表 CREATE TABLE student ( id INT(10) NOT NULL UNIQUE PRIMARY KEY , name VARCHAR(20) NOT NULL , sex VARCHAR(4) , birth YEAR, department VARCHAR(20) , address VARCHAR(50) ); 创建score表。SQL代码如下&#xff1a; CREATE TABLE sc…

数据库多表查询练习题

二、多表查询 1. 创建 student 和 score 表 CREATE TABLE student ( id INT ( 10 ) NOT NULL UNIQUE PRIMARY KEY , name VARCHAR ( 20 ) NOT NULL , sex VARCHAR ( 4 ) , birth YEAR , department VARCHAR ( 20 ) , address VARCHAR ( 50 ) ); 创建 s…

02章【JAVA编程基础】

变量与标识符 变量 数学名词&#xff1a;变数或变量&#xff0c;是指没有固定的值&#xff0c;可以改变的数。变量以非数字的符号来表达&#xff0c;一般用拉丁字母。变量是常数的相反。变量的用处在于能一般化描述指令的方式。计算机解释&#xff1a;变量就是系统为程序分配…

IOS自动化测试元素定位

一、元素属性介绍 1、元素属性 2、查看各定位方式执行效率 二、iOS常用定位方法 1、accessibility_id 2、class_name 3、Xpath 4、ios_class_chain(类型链) 5、ios_predicate(谓词) 一个页面最基本组成单元是元素&#xff0c;想要定位一个元素&#xff0c;我们需…

德语B2 SampleAcademy

德语B2 SampleAcademy 一, Zweigliedrige Konnektion1, entweder... oder2, nicht nur... sondern auch3,sowohl... als auch4,einerseits... andererseits5, zwar...aber6, weder...noch7,je...desto/umso 一, Zweigliedrige Konnektion discontinuous conjunctions 1,…

基础面试题整理4

1.mybatis的#{}和${}区别 #{}是预编译处理&#xff0c;${}是字符串替换#{}可以防止SQL注入&#xff0c;提高安全性 2.mybatis隔离级别 读未提交 READ UNCOMMITED&#xff1a;读到了其他事务中未提交的数据&#xff0c;造成"脏读","不可重复读","幻读&…

Vue-19、Vue监测数据的原理_对象

1、数据代理 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>vue监测数据改变的的原理</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue2/dist…

翻译: Streamlit从入门到精通 部署一个机器学习应用程序 四

Streamlit从入门到精通 系列&#xff1a; 翻译: Streamlit从入门到精通 基础控件 一翻译: Streamlit从入门到精通 显示图表Graphs 地图Map 主题Themes 二翻译: Streamlit从入门到精通 构建一个机器学习应用程序 三 1. 5. 如何部署一个Streamlit应用 部署是将应用程序从开发…

如何用ArcGIS制作城市用地适应性评价

01概述 “城市用地适宜性评价是城市总体规划的一项重要前期工作&#xff0c;它首先对工程地质、社会经济和生态环境等要素进行单项用地适宜性评价&#xff0c;然后用地图叠加技术根据每个因子所占权重生成综合的用地适宜性评价结果&#xff0c;俗称“千层饼模式”。 做用地适…

C#,字符串匹配(模式搜索)AC(Aho Corasick)算法的源代码

Aho-Corasick算法简称AC算法&#xff0c;也称为AC自动机(Aho-Corasick)算法&#xff0c;1975年产生于贝尔实验室&#xff08;The Bell Labs&#xff09;&#xff0c;是一种用于解决多模式字符串匹配的经典算法之一。 the Bell Lab 本文的运行效果&#xff1a; AC算法以模式树…

阳光抑郁症测试

大部分人对抑郁症的理解&#xff0c;就是每天无精打采&#xff0c;死气沉沉&#xff0c;可实际上&#xff0c;还有一种阳光抑郁症&#xff0c;完全不是这个样子。这种抑郁症的人&#xff0c;做事情非常有活力&#xff0c;魅力十足&#xff0c;给人感觉十分有自信&#xff0c;但…

MATLAB读取图片并转换为二进制数据格式

文章目录 前言一、MATLAB 文件读取方法1、文本文件读取2、二进制文件读取3、 图像文件读取4、其他文件读取 二、常用的图像处理标准图片链接三、MATLAB读取图片并转换为二进制数据格式1、matlab 源码2、运行结果 前言 本文记录使用 MATLAB 读取图片并转换为二进制数据格式的方…

国科大软件安全原理期末复习笔记

1 软件安全总论 1.软件的三大特性&#xff1a;复杂性、互连性、可扩展性&#xff1b; 2.基本概念&#xff1a;缺陷、漏洞、风险 缺陷&#xff08;bug&#xff09;&#xff1a;软件在设计和实现上的错误&#xff1b;漏洞&#xff08;vulnerability&#xff09;&#xff1a;漏洞…

专访美国Foley Hoag律师事务所合伙人:2024量子计算颠覆制药业

人物介绍&#xff1a;美国Foley Hoag 律师事务所的合伙人Erik Huestis&#xff0c;兼任该事务所技术行业小组的联席主席&#xff0c;近期于采访中深入探讨了在未来一年&#xff0c;生命科学和生物技术行业将如何运用量子计算技术的相关问题。 ​编辑丨慕一 编译/排版丨琳梦 卉…

OPT(erlang)打造一套缓存系统(一)

缓存的设计 这个简易缓存存储的是键/值对&#xff0c;其中键与键之间不得重复&#xff0c;并且每个键只能映射到一个值。这个设计背后的核心思想是为写人缓存的每一个值都分配一个独立的存储进程再将对应的键映射至该进程。你可能会对这种为每个值分配一个进程的设计感到惊讶&…

深度学习代码学习(一文真正看懂卷积层的代码定义)

一维卷积: 将n行3列升维到n行6列。&#xff08;原因&#xff1a;卷积核为6个&#xff09; *表示点乘 Linear线性层&#xff1a; &#xff08;通过矩阵计算改变输入输出特征向量的维度&#xff09; Pytorch nn.Linear的基本用法与原理详解-CSDN博客 pytorch初学笔记&#…

云服务器部署Stable Diffusion Webui从0到1总结:反复重启+循环debug

文章目录 在学校服务器部署Stable Diffusion Webui&#xff08;一&#xff09;准备工作&#xff08;二&#xff09;环境配置&#xff08;三&#xff09;git拉取项目到本地&#xff08;四&#xff09;运行项目 遇到的问题&#xff1a;&#xff08;一&#xff09;使用git clone时…

【C++干货铺】会旋转的二叉树——AVLTree

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 前言 AVL树 AVL树的概念 AVL树结点的定义 AVL树的插入 寻找插入结点的位置 修改平衡因子 AVL树的旋转 右单旋 左单旋 先右旋再左旋 先左旋再右旋 AVL树…

Bazel

简介&#xff1a; Bazel 是 google 研发的一款开源构建和测试工具,也是一种简单、易读的构建工具。 Bazel 支持多种编程语言的项目&#xff0c;并针对多个平台构建输出。 高级构建语言&#xff1a;Bazel 使用一种抽象的、人类可读的语言在高语义级别上描述项目的构建属性。与其…