小学姐教你HarmonyOS开发-02-ArkTS语言基础

2024-06-12 18:52

本文主要是介绍小学姐教你HarmonyOS开发-02-ArkTS语言基础,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

简单介绍基于TypeScript扩展的ArkTS语言。
ArkTS是鸿蒙生态的应用开发语言,由ArkUI框架提供,以声明式开发范式来开发界面,让开发者可以更简洁、更自然的方式开发高性能应用。

源课程:d2school(第2学堂)

什么是ArkTS?

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

ArkTS、TS和JS的关系

TypeScript(简称TS)是JavaScript(简称JS)的超集,ArkTS则是TS的超集。

关系图

初步了解TS常用的基础类型

已经了解的同学可跳过

  • 布尔值:TS中可以使用 boolean 来表示这个变量是布尔值,可以赋值为true或者false。
let show: boolean = false; 
  • 数字:TS中的所有数字都是浮点数,这些浮点数的类型是 number
let num1: number = 2024; 
let num2: number = 0b11111101000; // 二进制 2024 
let num3: number = 0o3750; // 八进制 2024 
let num4: number = 0x7e8; // 十六进制 2024 
  • 字符串:TS里使用 string 表示文本数据类型,可以使用双引号或单引号表示字符串。
let name: string = "Jacky"; name = 'Mick'; 
  • 数组:TS有两种方式可以定义数组。

第一种,可以在元素类型后面接上 [],表示由此类型元素组成的一个数组。

let list: number[] = [1, 2, 3]; 
第二种方式是使用数组泛型,Array<元素类型>。
let list: Array<number> = [1, 2, 3]; 
  • 元祖:元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为 stringnumber 类型的元组。
let x: [string, number]; x = ['hello', 10]; // OK 
x = [10, 'hello']; // Error 
  • Unknown:标记暂时未知类型的变量,直接通过编译阶段的检查。
let value: unknown = 4;
value= 'maybe a string instead';
value= false; 
  • Void:当一个函数没有返回值时,你通常会见到其返回值类型是 void
function test(): void { console.log('1'); } 
  • 联合类型:表示取值可以为多种类型中的一种。
let value: string | number;value= 'hello'; value= 1; 
  • 为函数定义类型

为了确保输入输出的准确性,我们可以函数添加类型。
实现可选参数的功能只需在参数名旁使用 ?

function add(x: number, y: number, z?: number): number { return x + y; 
} 

ArkTS声明式开发范式

装饰器

用来装饰类、结构体、方法以及变量,赋予其特殊的含义。

  • @Entry:表示这是个入口组件
  • @Component:表示这是个自定义组件;
  • @State:表示组件中的状态变量,此状态变化会引起UI变更。

自定义组件

可复用的UI单元,可组合其它组件,如上图中被 @Component 装饰的 struct Hello

UI描述

声明式的方式来描述 UI 的结构,如上图中 build() 方法内部的代码块。

内置组件

框架中默认内置的基础和布局组件,可直接被开发者调用,比如上图中的 RowColumnText

属性方法

用于组件属性的配置,统一通过属性方法进行设置,如上图中的 fontSize()fontWeight()width()height() 等,可通过链式调用的方式设置多项属性。

事件方法

用于添加组件对事件的响应逻辑,统一通过事件方法进行设置,如上图中跟随在 Text 后面的 onClick()

ArkTS基础知识

渲染控制语法🎞️ (本小节带视频)

  • 条件渲染:ifelse ifelse
@Entry
@Component
struct Index {@State count: number = 2build() {Row() {Column() {Button(`count:${this.count}`).fontSize('30').onClick(() => {this.count--})if (this.count === 0) {Text('Hello').fontSize(50)} else if (this.count === 1) {Text('Hello World').fontSize(50)} else {Text('Hello ArkTs').fontSize(50)}}.width('100%')}.height('100%')}
}
  • 效果-1

HMOS-ls02-1-ArkTS语言基础-1

  • 循环渲染:ForEach

@Entry
@Component
struct list {@State listData: Array<string> = ['苹果', '西瓜', '草莓']build() {Row() {Column() {ForEach(this.listData,(item: string, index: number) => {Text(`${index + 1}、${item}`).fontSize(40)},(item: string) => item //可选)}.width('100%')}.height('100%')}
}
  • 效果-2

HMOS-ls02-1-ArkTS语言

这篇关于小学姐教你HarmonyOS开发-02-ArkTS语言基础的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1055048

相关文章

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上,除了众多新品的发布,还有一个消息也点燃了所有鸿蒙用户的期待,那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上,华为宣布鸿蒙 HarmonyOS 5.1 将于 7

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据

Go语言中泄漏缓冲区的问题解决

《Go语言中泄漏缓冲区的问题解决》缓冲区是一种常见的数据结构,常被用于在不同的并发单元之间传递数据,然而,若缓冲区使用不当,就可能引发泄漏缓冲区问题,本文就来介绍一下问题的解决,感兴趣的可以了解一下... 目录引言泄漏缓冲区的基本概念代码示例:泄漏缓冲区的产生项目场景:Web 服务器中的请求缓冲场景描述代码

Go语言如何判断两张图片的相似度

《Go语言如何判断两张图片的相似度》这篇文章主要为大家详细介绍了Go语言如何中实现判断两张图片的相似度的两种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 在介绍技术细节前,我们先来看看图片对比在哪些场景下可以用得到:图片去重:自动删除重复图片,为存储空间"瘦身"。想象你是一个

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件

Go语言中Recover机制的使用

《Go语言中Recover机制的使用》Go语言的recover机制通过defer函数捕获panic,实现异常恢复与程序稳定性,具有一定的参考价值,感兴趣的可以了解一下... 目录引言Recover 的基本概念基本代码示例简单的 Recover 示例嵌套函数中的 Recover项目场景中的应用Web 服务器中

安装centos8设置基础软件仓库时出错的解决方案

《安装centos8设置基础软件仓库时出错的解决方案》:本文主要介绍安装centos8设置基础软件仓库时出错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录安装Centos8设置基础软件仓库时出错版本 8版本 8.2.200android4版本 javas

基于Python开发一个有趣的工作时长计算器

《基于Python开发一个有趣的工作时长计算器》随着远程办公和弹性工作制的兴起,个人及团队对于工作时长的准确统计需求日益增长,本文将使用Python和PyQt5打造一个工作时长计算器,感兴趣的小伙伴可... 目录概述功能介绍界面展示php软件使用步骤说明代码详解1.窗口初始化与布局2.工作时长计算核心逻辑3