基于OpenHarmony/HarmonyOS操作系统的ArkUI框架深入学习——开篇1

时间:2022-10-19 11:58:21

一.基于OpenHarmony/HarmonyOS操作系统的ArkUI框架——Harmony原生开发

基于OpenHarmony/HarmonyOS操作系统的ArkUI框架深入学习——开篇1

开发需要的IDE:

HUAWEI DevEco Studio

1.1 什么是ArkUI框架?

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

ArkUI开发框架是方舟开发框架的简称,它是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架,它使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具,帮助开发者提升应用界面开发效率 30%,开发者只需要使用一套 TS / JS API,就能在多个 HarmonyOS / OpenHarmony 设备上提供既丰富又流畅的用户界面体验。

1.2 DevEcoIDE的安装与项目的创建

HarmonyOS官方文档地址,在文档地址里下载我们需要的IDE。

HarmonyOS应用开发官网 - 华为HarmonyOS打造全场景新服务

1.2.1 版本

DevEco Studio 3.0 Release:该版本适用HarmonyOS和OpenHarmony应用及服务开发,您可体验HarmonyOS 3.0 的开发能力

Command Line Tools for HarmonyOS:该版本适用于HarmonyOS开发,Command Line Tools for HarmonyOS是一系列开发工具的集合,可通过其中的sdkmgr工具查看、安装/更新和卸载多个HarmonyOS SDK包,支持通过自动化构建脚本调用。

Command Line Tools for OpenHarmony:该版本适用于OpenHarmony开发,Command Line Tools for OpenHarmony 是一系列开发工具的集合,可通过其中的sdkmgr工具查看、安装/更新和卸载多个OpenHarmony SDK包,支持通过自动化构建脚本调用。

1.2.2 系统要求

Windows操作系统:Windows10 64 位 内存:8GB 及以上 硬盘:100GB 及以上 分辨率:1280*800 像素及以上

macOS操作系统:macOS 10.15/11/12 内存:8GB 及以上 硬盘:100GB 及以上 分辨率:1280*800 像素及以上

1.2.3 下载IDE

选择:DevEco Studio 3.0

支持HarmonyOS 3.0的应用及服务开发,提供了代码智能编辑、低代码开发、界面调试双向预览、全新构建工具、模拟器等功能,同时支持OpenHarmony应用及服务开发。

随着时间的不断推移,后期版本会不断迭代,截至我目前现在是DevEco Studio 3.0版本,现在的这个IDE就已经同时支持了OpenHarmony和HarmonyOS的应用开发。

1.2.4 安装IDE

安装过程较为简单,自行百度。

安装完成之后,需要选择自己需要SDK进行下载:

基于OpenHarmony/HarmonyOS操作系统的ArkUI框架深入学习——开篇1

安装完之后,进入IDE之后如下图:

基于OpenHarmony/HarmonyOS操作系统的ArkUI框架深入学习——开篇1

二.三种开发方式分析比较

2.1 JS和ETS开发方式比较

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5idOCzOw-1663925667829)(https://gitee.com/shangjinzhu/personal-picture-bed/raw/master/image/view)]

引用回答:

虽然TypeScript是JavaScript的超集,但是TS和JS的开发方式仍然存在很大的差异。eTS是鸿蒙特有的响应式框架,除了性能、跨平台等优势以外,使用eTS框架能够在一个文件中实现界面的组织、样式和业务逻辑。因此,eTS更加符合直觉,实现所见即所得的效果。——董昱老师

2.2 基于js扩展的web开发范式

基于JS扩展的类Web开发范式的方舟开发框架,采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。

整体架构

使用基于JS扩展的类Web开发范式的方舟开发框架,包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。

基于OpenHarmony/HarmonyOS操作系统的ArkUI框架深入学习——开篇1

2.3 Java开发方式

Java的静态页面布局是layout文件夹的.xml文件里,同样跟刚才一样把页面分为三层,蓝色容器层、绿色卡片层、红色内容层。

基于OpenHarmony/HarmonyOS操作系统的ArkUI框架深入学习——开篇1

2.4 基于TS扩展的声明式开发范式

基于TS扩展的声明式开发范式的方舟开发框架是一套开发极简、高性能、跨设备应用的UI开发框架,支持开发者高效的构建跨设备应用UI界面。

基础能力

使用基于TS扩展的声明式开发范式的方舟开发框架,采用更接近自然语义的编程方式,让开发者可以直观地描述UI界面,不必关心框架如何实现UI绘制和渲染,实现极简高效开发。开发框架不仅从组件、动效和状态管理三个维度来提供UI能力,还提供了系统能力接口,实现系统能力的极简调用。

优点

基于OpenHarmony/HarmonyOS操作系统的ArkUI框架深入学习——开篇1

整体架构

基于OpenHarmony/HarmonyOS操作系统的ArkUI框架深入学习——开篇1

2.5 总结

ts是js的扩展,而ets开发又是基于TS的,所以ets跟js开发是有很大的相似度,要是熟悉js学习ets也是比较容易的。而Java开发方式又是和安卓开发方式很像,所以说,这对于开发者的兼容性非常好,不管你之前做的是web开发还是安卓开发,都可以很好的上手去做鸿蒙开发。