方舟开发框架(ArkUI)概述

        

目录

1、基本概念

2、两种开发范式

3、开发框架的特性

4、UI开发(ArkTS声明式开发范式)概述 

4.1、特点

4.2、整体架构

4.3、开发流程


方舟开发框架(简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。

1、基本概念

  • UI:即用户界面。开发者可以将应用的用户界面设计为多个功能页面,每个页面进行单独的文件管理,并通过页面路由API完成页面间的调度管理如跳转、回退等操作,以实现应用内的功能解耦。
  • 组件:UI构建与显示的最小单位,如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。

2、两种开发范式

        针对不同的应用场景及技术背景,方舟开发框架提供了两种开发范式,分别是基于ArkTS的声明式开发范式(简称“声明式开发范式”)和兼容JS的类Web开发范式(简称“类Web开发范式”)。

  • 声明式开发范式:采用基于TypeScript声明式UI语法扩展而来的ArkTS语言,从组件、动画和状态管理三个维度提供UI绘制能力。
  • 类Web开发范式:采用经典的HML、CSS、JavaScript三段式开发方式,即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯,便于快速将已有的Web应用改造成方舟开发框架应用。

在开发一款新应用时,推荐采用声明式开发范式来构建UI,主要基于以下几点考虑:

  • 开发效率:声明式开发范式更接近自然语义的编程方式,开发者可以直观地描述UI,无需关心如何实现UI绘制和渲染,开发高效简洁。
  • 应用性能:如下图所示,两种开发范式的UI后端引擎和语言运行时是共用的,但是相比类Web开发范式,声明式开发范式无需JS框架进行页面DOM管理,渲染更新链路更为精简,占用内存更少,应用性能更佳。
  • 发展趋势:声明式开发范式后续会作为主推的开发范式持续演进,为开发者提供更丰富、更强大的能力。

方舟开发框架示意图

3、开发框架的特性

        根据所选用HarmonyOS应用模型(Stage模型、FA模型)和页面形态(应用或服务的普通页面、卡片)的不同,对应支持的UI开发范式也有所差异,详见下表。

表1 支持的UI开发范式

应用模型

页面形态

支持的UI开发范式

Stage模型(推荐)

应用或服务的页面

声明式开发范式(推荐)

  

卡片

声明式开发范式(推荐)

类Web开发范式

FA模型

应用或服务的页面

声明式开发范式

类Web开发范式

  

卡片

类Web开发范式

        目前官方主推Stage模型的声明式开发范式,因此后面关注该范式。

4、UI开发(ArkTS声明式开发范式)概述 

        基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架,提供了构建HarmonyOS应用UI所必需的能力,主要包括:

  • ArkTS

    ArkTS是UI开发语言,基于TypeScript(简称TS)语言扩展而来,是TS的超集。扩展能力包含各种装饰器、自定义组件、UI描述机制。状态数据管理作为基于ArkTS的声明式开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。ArkTS语言的基础知识请参考学习ArkTS语言。

  • 布局

    布局是UI的必要元素,它定义了组件在界面中的位置。ArkUI框架提供了多种布局方式,除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外,也提供了相对复杂的列表、宫格、轮播。

  • 组件

    组件是UI的必要元素,形成了在界面中的样子,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。系统内置组件包括按钮、单选框、进度条、文本等。开发者可以通过链式调用的方式设置系统内置组件的渲染效果。开发者可以将系统内置组件组合为自定义组件,通过这种方式将页面组件化为一个个独立的UI单元,实现页面不同单元的独立创建、开发和复用,具有更强的工程性。

  • 页面路由和组件导航

    应用可能包含多个页面,可通过页面路由实现页面间的跳转。一个页面内可能存在组件间的导航如典型的分栏,可通过导航组件实现组件间的导航。

  • 图形

    方舟开发框架提供了多种类型图片的显示能力和多种自定义绘制的能力,以满足开发者的自定义绘图需求,支持绘制形状、填充颜色、绘制文本、变形与裁剪、嵌入图片等。

  • 动画

    动画是UI的重要元素之一。优秀的动画设计能够极大地提升用户体验,框架提供了丰富的动画能力,除了组件内置动画效果外,还包括属性动画、显式动画、自定义转场动画以及动画API等,开发者可以通过封装的物理模型或者调用动画能力API来实现自定义动画轨迹。

  • 交互事件

    交互事件是UI和用户交互的必要元素。方舟开发框架提供了多种交互事件,除了触摸事件、鼠标事件、键盘按键事件、焦点事件等通用事件外,还包括基于通用事件进行进一步识别的手势事件。手势事件有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势,以及通过单一手势事件进行组合的组合手势事件。

4.1、特点
  • 开发效率高,开发体验好
    • 代码简洁:通过接近自然语义的方式描述UI,不必关心框架如何实现UI绘制和渲染。
    • 数据驱动UI变化:让开发者更专注自身业务逻辑的处理。当UI发生变化时,开发者无需编写在不同的UI之间进行切换的UI代码, 开发人员仅需要编写引起界面变化的数据,具体UI如何变化交给框架。
    • 开发体验好:界面也是代码,让开发者的编程体验得到提升。
  • 性能优越
    • 声明式UI前端和UI后端分层:UI后端采用C++语言构建,提供对应前端的基础组件、布局、动效、交互事件、组件状态管理和渲染管线。
    • 语言编译器和运行时的优化:统一字节码、高效FFI-Foreign Function Interface、AOT-Ahead Of Time、引擎极小化、类型优化等。
  • 生态容易快速推进

    能够借力主流语言生态快速推进,语言相对中立友好,有相应的标准组织可以逐步演进。

4.2、整体架构

  • 声明式UI前端

    提供了UI开发范式的基础语言规范,并提供内置的UI组件、布局和动画,提供了多种状态管理机制,为应用开发者提供一系列接口支持。

  • 语言运行时

    选用方舟语言运行时,提供了针对UI范式语法的解析能力、跨语言调用支持的能力和TS语言高性能运行环境。

  • 声明式UI后端引擎

    后端引擎提供了兼容不同开发范式的UI渲染管线,提供多种基础组件、布局计算、动效、交互事件,提供了状态管理和绘制能力。

  • 渲染引擎

    提供了高效的绘制能力,将渲染管线收集的渲染指令,绘制到屏幕的能力。

  • 平台适配层

    提供了对系统平台的抽象接口,具备接入不同系统的能力,如系统渲染管线、生命周期调度等。

4.3、开发流程

        使用UI开发框架开发应用时,主要涉及如下开发过程。开发者可以先通过第一个入门实例了解整个应用的UI开发过程。

任务

简介

相关指导

学习ArkTS

介绍了ArkTS的基本语法、状态管理和渲染控制的场景。

  • 基本语法
  • 状态管理
  • 渲染控制

开发布局

介绍了几种常用的布局方式以及如何提升布局性能。

  • 常用布局
  • 布局性能

添加组件

介绍了几种常用的内置组件、自定义组件以及通过API方式支持的界面元素。

  • 常用组件
  • 自定义组件
  • 气泡和菜单

设置页面路由和组件导航

介绍了如何设置页面路由以及组件间的导航。

  • 页面路由
  • 组件导航

显示图形

介绍了如何显示图片、绘制自定义几何图形以及使用画布绘制自定义图形。

  • 图片
  • 几何图形
  • 画布

使用动画

介绍了组件和页面使用动画的典型场景。

  • 页面内的动画
  • 页面间的动画

绑定事件

介绍了事件的基本概念和如何使用通用事件和手势事件。

  • 通用事件
  • 手势事件

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 通过SharpCompress.Archives.Rar解压RaR文件

/// <summary>/// 解压一个Rar文件/// </summary>/// <param name"RarFile">需要解压的Rar文件&#xff08;绝对路径&#xff09;</param>/// <param name"TargetDirectory">解压到的目录</param>/// <param name&…

基于SSM的学生成绩管理系统2.0

基于SSM的学生成绩管理系统2.0 一、系统介绍二、功能展示1.项目骨架2.成绩信息列表3.课程信息列表4.添加学生信息 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目名称&#xff1a;基于SSM的学生成绩管理系统2.0 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Jav…

2024年科技盛宴“上海智博会·上海软博会”招商工作接近尾声

2024年上海智博会和上海软博会即将于3月份在上海跨国采购会展中心盛大召开。作为全球科技和软件行业的盛会&#xff0c;这两大展会汇集了业界顶尖的企业、创新技术和前瞻思想&#xff0c;吸引了来自世界各地的专业人士和参展商。 今年的展会将一如既往地为大家呈现最前沿的科技…

博易大师智星系统外盘资管系统的功能介绍!

1. 市场行情数据接收和显示&#xff1a;软件需要接收实时的市场行情数据&#xff0c;并将其以图形或数字的形式显示出来&#xff0c;包括价格、成交量、成交额等信息。 2. 交易操作界面&#xff1a;软件需要提供一个交易操作界面&#xff0c;供用户进行交易操作&#xff0c;包括…

DML语言(重点)———update

格式&#xff1a;update 要修改的对象 set 原来的值新值 -- 修改学员名字,带了简介 代码案例&#xff1a; -- 修改学员名字,带了简介 UPDATE student SET name清宸 WHERE id 1; -- 不指定条件情况下&#xff0c;会改动所有表&#xff01; 代码案例…

linux:下载、网络请求、端口

一&#xff1a;ping命令 可以通过ping命令,检查指定的网络服务器是否是可联通状态 语法: ping [-c num] ip或主机名 1、选项&#xff1a;-c,检查的次数&#xff0c;不使用-c选项&#xff0c;将无限次数持续检查 2、参数&#xff1a;ip或主机名&#xff0c;被检查的服务器的…

修复“找不到服务器IP地址”错误

“找不到服务器IP地址”错误是Chrome浏览器用户的常见问题&#xff0c;导致404消息和无法访问网页 一、错误解释&#xff1a;找不到服务器 IP 地址 当您在浏览器的地址栏中输入域名时&#xff0c;如果输入的域名与相应的 Internet 协议地址&#xff08;IP 地址&#xff09;不…

文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《流量自适应方式下考虑热管道虚拟储能的电热能源系统优化调度》

这个标题探讨了在电热能源系统中&#xff0c;通过使用热管道作为一种虚拟储能手段&#xff0c;并结合流量自适应的方式&#xff0c;进行系统的优化调度。 流量自适应方式&#xff1a; 这可能指的是一种系统或算法&#xff0c;能够根据系统内部或外部的实时变化&#xff0c;自动…

python 通过opencv及face_recognition识别人脸

效果&#xff1a; 使用Python的cv2库和face_recognition库来进行人脸检测和比对的 0是代表一样 认为是同一人。 代码&#xff1a; pip install opencv-python pip install face_recognition# 导入cv2库&#xff0c;用于图像处理 import cv2 # 导入face_recognition库&#…

开源持续测试平台Linux MeterSphere本地部署与远程访问

文章目录 前言1. 安装MeterSphere2. 本地访问MeterSphere3. 安装 cpolar内网穿透软件4. 配置MeterSphere公网访问地址5. 公网远程访问MeterSphere6. 固定MeterSphere公网地址 前言 MeterSphere 是一站式开源持续测试平台, 涵盖测试跟踪、接口测试、UI 测试和性能测试等功能&am…

2023年国赛高教杯数学建模E题黄河水沙监测数据分析解题全过程文档及程序

2023年国赛高教杯数学建模 E题 黄河水沙监测数据分析 原题再现 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变化和人民生活的影响&#xff0c;以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾等方面都具有重要的理论指导…

Swagger快速入门

1、Swagger快速入门 1.1 swagger介绍 官网&#xff1a;https://swagger.io/ Swagger 是一个规范和完整的Web API框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。 功能主要包含以下几点: A. 使得前后端分离开发更加方便&#xff0c;有利于团队协作…

Jenkins的邮箱配置和插件下载

启动&#xff1a;java -jar jenkins.war 一定在jenkins.war的目录下 进入cmd命令 浏览器输入网址&#xff1a;http://localhost:8080/login?from%2F 账号&#xff1a;admin 密码&#xff1a;123456 安装插件&#xff1a; 插件更新后重启下 配置邮箱账号&#xff1a; 3…

到底是前端验证还是后端验证

背景 软件应用研发中&#xff0c; 前端验证还是后端验证这是意识与认知问题。鉴于某些入门同学还不清楚&#xff0c;我们再来看下&#xff1a; 一. 从软件行业来自国外 Q: 前端验证和后端验证都是对同一个数据的验证&#xff0c;有什么区别&#xff1f; A: 二者的目的不同&…

有趣的多线程:累计相加-CompletableFuture优化

不优雅的地方 对结果的获取需要额外引入CountDownLatch等待所有线程执行完毕 CompletableFuture Future接口天然可以通过回调获取结果&#xff0c;所以可以利用CompletableFuture实现并行&#xff0c;并调用CompletableFuture.join获取结果 private static void completabl…

WPF中数据绑定转换器Converter

使用场景&#xff1a;ViewModel中的数据如果跟View中的数据类型不匹配。 下面是以int类型调控是否可见为例子 步骤一&#xff1a;创建转换器类 在xaml中查看Converter的定义可以知道Converter是一个接口类型&#xff0c;因此转换器的类定义需要使用这个接口 internal class Vi…

Thinkphp开发的返佣商城分销商城理财商城源码

&#xff08;本站长在localhost安装测试&#xff0c;发现提示有错&#xff0c;具体问题没有时间查找了&#xff0c;或者php解密插件没有安装&#xff0c;有能力的朋友自行折腾。&#xff09; 程序基于 THINKPHP6VUE 全新开发&#xff0c;保障安全的同时大大提高代码执行效率。…

css mask 案例

文章目录 一、基本用法二、图案遮罩二、文字阴影效果三、日历探照灯效果 CSS的mask属性用于定义一个可重复使用的遮罩&#xff0c;可以将其应用到任何可视元素上。这个功能类似于Photoshop中的图层蒙版。通过mask属性&#xff0c;可以创建独特的效果&#xff0c;比如圆形、渐变…

迪文屏开发保姆级教程6----触摸实现界面切换

这篇文章要讲啥事呢&#xff1f; 本篇文章主要介绍了在DGBUS平台上触摸实现界面切换的方法。 文哥悄悄话&#xff1a; 官方开发指南PDF&#xff1a;&#xff08;不方便下载的私聊我发给你&#xff09; https://download.csdn.net/download/qq_21370051/88647174?spm1001.201…

【STM32单片机】俄罗斯方块游戏

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103C8T6单片机控制器&#xff0c;IIC OLED液晶、按键等。 主要功能&#xff1a; 系统运行后&#xff0c;OLED显示开机界面&#xff0c;按下K1键进入游戏。K1键控制翻转&#xff0c;K2控…