HarmonyOS学习路之方舟开发框架—方舟开发框架(ArkUI)概述

这篇具有很好参考价值的文章主要介绍了HarmonyOS学习路之方舟开发框架—方舟开发框架(ArkUI)概述。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

基本概念

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

两种开发范式

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

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

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

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

图1 方舟开发框架示意图

HarmonyOS学习路之方舟开发框架—方舟开发框架(ArkUI)概述,HarmonyOS方舟(ArkUI)框架开发,harmonyos,学习,华为,方舟开发框架,组件,布局,UI

 

不同应用类型支持的开发范式

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

表1 支持的UI开发范式

应用模型

页面形态

支持的UI开发范式

Stage模型(推荐)

应用或服务的页面

声明式开发范式(推荐)

  

卡片

声明式开发范式(推荐)

类Web开发范式文章来源地址https://www.toymoban.com/news/detail-571124.html

FA模型

应用或服务的页面

声明式开发范式

类Web开发范式

  

卡片

类Web开发范式

到了这里,关于HarmonyOS学习路之方舟开发框架—方舟开发框架(ArkUI)概述的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 四)

    当创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量

    2024年02月17日
    浏览(53)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 六)

    AppStorage是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储。 和LocalStorage不同的是,LocalStorage是页面级的,通常应用于页面内的数据共享。而对于AppStorage,是应用级的全局状态共享。 AppStorage是在应用启动

    2024年02月20日
    浏览(54)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 二)

    @Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。 @Prop装饰的变量和父组件建立单向的同步关系: @Prop变量允许在本地修改,但修改后的变化不会同步回父组件。 当父组件中的数据源更改时,与之相关的@Prop装饰的变

    2024年02月14日
    浏览(48)
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Blank组件

    鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Blank组件 一、操作环境 操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+ 二、Blank组件 空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。 子组件 无 接口

    2024年02月19日
    浏览(52)
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavRouter组件

    鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavRouter组件 一、操作环境 操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+ 二、NavRouter组件 导航组件,默认提供点击响应处理,不需要开发者自定义点击事件逻辑。 子组件 必须包含两个子组件,其中第二个子组件必须为

    2024年02月21日
    浏览(41)
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件

     鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件 一、操作环境 操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+ 二、NavDestination组件 作为NavRouter组件的子组件,用于显示导航内容区。 子组件 可以包含子组件。 接口 NavDestination() 属性 仅支持backgroundColo

    2024年02月20日
    浏览(43)
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之TextInput输入框组件

    鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之TextInput输入框组件 一、操作环境 操作系统:  Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、TextInput TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController}) 参数: 参数名 参数类型 必填 参数描述 placeholder Resou

    2024年02月04日
    浏览(45)
  • HarmonyOS学习路之开发篇—Java UI框架(动画开发)

    动画是组件的基础特性之一,精心设计的动画使UI变化更直观,有助于改进应用程序的外观并改善用户体验。Java UI框架提供了帧动画、数值动画和属性动画,并提供了将多个动画同时操作的动画集合。 帧动画是利用视觉暂留现象,将一系列静止的图片按序播放,给用户产生动

    2024年02月09日
    浏览(50)
  • HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

    TableLayout使用表格的方式划分子组件。 TableLayout的共有XML属性继承自:Component TableLayout的自有XML属性见下表: 属性名称 中文描述 取值 取值说明 使用案例 alignment_type 对齐方式 align_edges 表示TableLayout内的组件按边界对齐。 ohos:alignment_type=\\\"align_edges\\\" align_contents 表示TableLayout内的

    2024年02月09日
    浏览(39)
  • HarmonyOS学习路之开发篇—Java UI框架(PositionLayout&&AdaptiveBoxLayout)

    在PositionLayout中,子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角;当向下或向右移动时,坐标值变大;允许组件之间互相重叠。 PositionLayout示意图 PositionLayout以坐标的形式控制组件的显示位置,允许组件相互重叠。 在layout目录下的XML文件中创建PositionLayout并添

    2024年02月09日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包