HarmonyOS应用开发之ArkTS语言学习记录

1、ArkTS介绍

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript(简称TS)基本语法风格的基础上,对TS的动态类型特性施加更严格的约束,引入静态类型。同时,提供了声明式UI、状态管理等相应的能力,让开发者可以以更简洁、更自然的方式开发高性能应用。具体介绍可查看官方文档:ArkTS 语言 | 华为开发者联盟

2、初识ArkTS语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力。

当前,ArkTS在TS的基础上主要扩展了如下能力:

  • 基本语法:ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力,再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
  • 状态管理:ArkTS提供了多维度的状态管理机制。在UI开发框架中,与UI相关联的数据可以在组件内使用,也可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,还可以在应用全局范围内传递或跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
  • 渲染控制:ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。

3、基础语法概述

在初步了解了ArkTS语言之后,我们以一个具体的示例来说明ArkTS的基本组成。如下图所示,当点击按钮时,文本内容从“Hello World”变为“Hello ArkUI”。

图1 示例效果图

本示例中,ArkTS的基本组成如下所示。

图2 ArkTS的基本组成

  • 装饰器: 用于装饰类、结构、方法以及变量,并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器,@Component表示自定义组件,@Entry表示该自定义组件为入口组件,@State表示组件中的状态变量,状态变量变化会触发UI刷新。
  • UI描述:以声明式的方式来描述UI的结构,例如build()方法中的代码块。
  • 自定义组件:可复用的UI单元,可组合其他组件,如上述被@Component装饰的struct Hello。
  • 系统组件:ArkUI框架中默认内置的基础和容器组件,可直接被开发者调用,比如示例中的Column、Text、Divider、Button。
  • 属性方法:组件可以通过链式调用配置多项属性,如fontSize()、width()、height()、backgroundColor()等。
  • 事件方法:组件可以通过链式调用设置多个事件的响应逻辑,如跟随在Button后面的onClick()。

除此之外,ArkTS扩展了多种语法范式来使开发更加便捷:

  • @Builder/@BuilderParam:特殊的封装UI描述的方法,细粒度的封装和复用UI描述。
  • @Extend/@Style:扩展内置组件和封装属性样式,更灵活地组合内置组件。
  • stateStyles:多态样式,可以依据组件的内部状态的不同,设置不同样式。

4、声明式UI描述

ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑。

  • 创建组件:根据组件构造方法的不同,创建组件包含有参数和无参数两种方式。
  • 配置属性:属性方法以“.”链式调用的方式配置系统组件的样式和其他属性,建议每个属性方法单独写一行。
  • 配置事件:事件方法以“.”链式调用的方式配置系统组件支持的事件,建议每个事件方法单独写一行。
  • 使用lambda表达式配置组件的事件方法。
  • 使用匿名函数表达式配置组件的事件方法,要求使用bind,以确保函数体中的this指向当前组件。
  • 使用组件的成员函数配置组件的事件方法。
  • 配置子组件:如果组件支持子组件配置,则需在尾随闭包"{...}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。(容器组件即支持嵌套子组件)

5、自定义组件

在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

自定义组件具有以下特点:

  • 可组合:允许开发者组合使用系统组件、及其属性和方法。
  • 可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
  • 数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。

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

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

相关文章

Qt/C++音视频开发63-设置视频旋转角度/支持0-90-180-270度旋转/自定义旋转角度

一、前言 设置旋转角度,相对来说是一个比较小众的需求,如果视频本身带了旋转角度,则解码播放的时候本身就会旋转到对应的角度显示,比如手机上拍摄的视频一般是旋转了90度的,如果该视频文件放到电脑上打开,…

lv14 IO模型:阻塞和非阻塞 7

1 五种IO模型------读写外设数据的方式 阻塞: 不能操作就睡觉 非阻塞:不能操作就返回错误(通过轮询即才能实现阻塞的情况 ) 多路复用:委托中介监控 信号驱动:让内核如果能操作时发信号,在信号处理函数中操作 异步IO&a…

npm报错error:03000086:digital envelope routines::initialization error

可能是因为node版本过高,与现在的项目不符合 这是降低node版本的命令,然后重新运行 npm install npm8.1.2 -g

LUT预设.cube格式PR/达芬奇/FCP/剪映等视频电影调色预设LUTs

对于将标准镜头转换为让人想起高端电影的视觉冲击场景至关重要。这些LUT经过专业设计,以模仿电影行业中的电影质量、深度和情感,使其成为电影制作人、摄像师和内容创作者的理想选择,希望为你的作品带来专业的电影色彩。 电影LUT的类别&#…

三种解密 HTTPS 流量的方法介绍

Web 安全是一项系统工程,任何细微疏忽都可能导致整个安全堡垒土崩瓦解。拿 HTTPS 来说,它的「内容加密、数据完整性、身份认证」三大安全保证,也会受到非法根证书、服务端配置错误、SSL 库漏洞、私钥被盗等等风险的影响。很多同学认为只要访问…

服务器监控软件夜莺使用(二)

文章目录 一、采集器安装1. Categraf简介2. Categraf部署3. 测试服务器部署4. 系统监控插件5. 显卡监控插件6. 服务监控插件 二、监控仪表盘1. 机器列表2. 系统监控3. 服务监控 三、告警配置1. 邮件通知2. 告警规则3. 告警自愈 一、采集器安装 1. Categraf简介 Categraf 需要…

swaggerUI不好用,试试这个openapiUI?

1.背景 由于长期使用 swaggerUI 工具,它的轻量风格个人觉得还是不错的,但是它的整体使用体验确实不好,用过的可能都有体会,这里就不一一列举了(由于语言表达能力有限,手动🐶保命,毕…

http 客户端 Feign【微服务】

文章目录 1. 基于 Feign 的远程调用2. Feign 自定义配置3. Feign 性能优化4. Feign 的最佳实践4.1 继承4.2 抽取 1. 基于 Feign 的远程调用 Feign 是一个声明式的 http 客户端,它可以帮助我们优雅地发送 http 请求。 在学习 Feign 之前先来看一下我们以前利用 Res…

kubernetes volume 数据存储详解

写在前面:如有问题,以你为准, 目前24年应届生,各位大佬轻喷,部分资料与图片来自网络 内容较长,页面右上角目录方便跳转 概述 容器的生命周期可能很短,会被频繁的创建和销毁 保存在容器中的…

人类的失误、错误与机器的失误、错误

人类的失误和错误是指人类在认知、判断、决策和行动过程中出现的错误或差错。这些错误可能是由于认知偏差、信息不完全、判断错误、行为失控等原因造成的。人类的失误和错误是不可避免的,而且在很多领域都有广泛的存在,包括工作、学习、社交、交通等方面…

【Java集合篇】HashMap的put方法是如何实现的?

HashMap的put方法是如何实现的 ✔️典型解析✔️ 拓展知识仓✔️HashMap put方法的优缺点有哪些✔️如何避免HashMap put方法的哈希冲突✔️如何避免HashMap put方法的哈希重 ✔️源码解读✔️putVal 方法主要实现如下,为了更好的帮助大家阅读,提升效率&…

C++力扣题目--94,144,145二叉树非递归(迭代)遍历

为什么可以用迭代法(非递归的方式)来实现二叉树的前后中序遍历呢? 我们在栈与队列:匹配问题都是栈的强项 (opens new window)中提到了,递归的实现就是:每一次递归调用都会把函数的局部变量、参数值和返回地…

04、Kafka ------ 各个功能的作用解释(Cluster、集群、Broker、位移主题、复制因子、领导者副本、主题)

目录 启动命令:CMAK的用法★ 在CMAK中添加 Cluster★ 在CMAK中查看指定集群★ 在CMAK中查看 Broker★ 位移主题★ 复制因子★ 领导者副本和追随者副本★ 查看主题 启动命令: 1、启动 zookeeper 服务器端 小黑窗输入命令: zkServer 2、启动 …

1.1map

unordered_map和map的使用几乎是一致的&#xff0c;只是头文件和定义不同 #include<iostream> #include<map>//使用map需要的头文件 #include<unordered_map>//使用unordered_map需要的头文件 #include<set>//使用set需要的头文件 #include<uno…

【C#】网址不进行UrlEncode编码会存在一些问题

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是2024年第3篇文章&#xff0c;此篇文章是C#知识点实践序列文章&#xff0c;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言数据丢失效果请求端代码接口端代码…

2024--Django平台开发-Django知识点(四)

1.知识回顾 创建项目&#xff1a;新项目、别人项目、新版版、老版本 项目目录&#xff08;v1.0版本&#xff09; 路由系统 常见路由编写加粗样式 /index/ 函数 /index/<str:v1> 函数 re_path(ryy/(\d{4})-(\d{2})-(\d{2})/, views.yy), re_path(ryy/(?…

1.6PTA集练7-5~7-24、7-1、7-2,堆的操作,部落冲突(二分查找)

7-5 大師と仙人との奇遇 分数 20 #include<iostream> #include<queue> using namespace std; int n; long long ans0,num; priority_queue<long long,vector<long long>,greater<long long>>q;//记录之前买的,用小顶堆&#xff0c;最上面就是最…

用开源大语言模型开发的智能对话机器人初版原型验证

用开源大语言模型开发的智能对话机器人初版原型验证 0. 背景1. 初版检证效果展示2. 验证效果总结3. 20240108 更新 0. 背景 同事要想做一个智能对话机器人&#xff0c;特别的需求有有些几点&#xff0c; 通过预置提示词&#xff08;包括确认事项&#xff09;&#xff0c;让大…

【习题】应用程序框架

判断题 1. 一个应用只能有一个UIAbility。错误(False) 正确(True)错误(False) 2. 创建的Empty Ability模板工程&#xff0c;初始会生成一个UIAbility文件。正确(True) 正确(True)错误(False) 3. 每调用一次router.pushUrl()方法&#xff0c;页面路由栈数量均会加1。错误(Fal…

环信IM Demo登录方式如何修改为自己项目的?

在环信即时通讯云IM 官网下载Demo&#xff0c;本地运行只有手机验证码的方式登录&#xff1f;怎么更改为自己项目的Appkey和用户去进行登录呢&#xff1f; &#x1f447;&#x1f447;&#x1f447;本文以Web端为例&#xff0c;教大家如何更改代码来实现 1、 VUE2 Demo vue2…