ArkTs初学笔记

一、ArkTs简介与环境搭建

ArkTs是什么

• 是华为自研的开发语言，基于TS扩展而来。
• 为鸿蒙系统匹配的ArkUI框架扩展了声明式UI、状态管理等能力，用于跨端应用开发。

开发环境搭建

• 安装DevEco Studio。
• 配置鸿蒙SDK等相关工具和环境变量。

二、基础语法

1. 数据类型

• 基本类型：
  • 布尔类型（true 或 false）。
  • 数字（所有数字都是浮点数，支持多种进制 。
  • 字符串（单引号和双引号都行）。
• 复合类型：
  • 数组（两种定义方式：元素类型后加() 或使用数组泛型）。
  • 元组（已知元素类型和数量的数组，元素类型可不同）。
  • 联合（变量可以存储不同数据类型 。
  • 枚举（限定变量只能在一组数据范围内选择值）。
  • unknown （用于标记编程阶段不清楚类型的变量）。
  • null 和 undefined。

2. 条件语句

• if - else 语句。
• switch 语句。

3. 循环语句

• for 循环。
• for...of 循环（用于迭代数组等可迭代对象）。

4. 函数

• 定义函数格式： function 函数名(参数列表) : 返回类型 {函数体}
• 无返回值的函数
• 有返回值的函数
• 箭头函数

三、装饰器
常见装饰器：

@component 与 @entry

• 用 @component 装饰类、结构、方法和变量。
• 一个页面有且仅能有一个 @entry ，被它修饰的组件或其子组件才会在页面上显示。

@state 装饰器（组件内状态）
用于定义组件内部可以更改的状态数据。

@styles 装饰器（定义组件重用样式）
定义可复用的样式规则。

@extend 装饰器（定义扩展组件样式）
扩展已有的样式等。

四、组件

基础组件
如 text（文本）、button（按钮）、image（图像） 等。

通用属性
如尺寸（width、height）、位置（通过各种定位属性）、颜色（backgroundColor 等）、字体（fontSize、fontColor 等） 。

容器组件
如 column（列容器）、row（行容器）、stack（堆叠容器） 等。

五、页面布局

1. 布局方式

• 使用容器组件进行嵌套布局。
• 灵活设置组件在布局中的对齐方式（justifyContent 等）、间隔（space 等）。

2. 事件交互

• 为组件添加点击（onClick 等）、触摸等事件处理函数。

六、路由与页面跳转

1. 路由模块

• 导入路由模块 。
• 配置路由规则（在项目配置文件中）。

2. 页面跳转方法

• 跳转到指定面 router.push(url) 。
• 从当前页面返回 router.back() 等。

七、数据请求（以网络请求为例）

1. 导入模块

• 导入 http 模块。

2. 发送请求

• 配置请求头、请求参数等。
• 发送 get 、post 等请求。

3. 处理响应

• 处理不同状态码的响应。
• 解析响应数据。

八、状态管理

1. 组件内状态

• 通过 @state 装饰器定义。

九、项目构建与调试

1. 构建项目

• 选择构建模式（调试、发布等）。
• 构建过程中处理资源、代码编译等。

2. 调试技巧

• 使用 DevEco Studio 的调试工具，如断点调试等。

十、一些常见问题与解决思路

1. 语法错误提示不明确时，检查类型定义、装饰器使用是否正确等。
2. 页面布局错乱时，检查容器组件的嵌套关系和属性设置。
3. 数据请求失败时，检查网络权限、请求地址、参数等。
4. 模拟器运行和真机运行不一致时，真机上进行更多测试和适配调整。

十一、ArkUI 的基本组成

1. 装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。例如，@component表示自定义组件，@entry表示该自定义组件为入口组件，@state表示组件中的状态变量，状态变量变化会触发 UI 刷新。
2. UI 描述：以声明式的方式描述 UI 的结构，例如 build()方法中的代码块。
3. 自定义组件：可复用的 UI 单元，可组合其他组件。
4. 系统组件：ArkUI 框架中默认内置的基础和容器组件，可直接被开发者调用。
5. 事件：组件可以通过链式调用设置多个事件的响应逻辑。
6. 属性：组件可以通过链式调用配置多项属性。

十二、结构布局

组件按照布局的要求依次排列，构成应用的页面。在声明式 UI 中，所有的页面都是由自定义组件构成。

1. 布局元素的组成：

   • 组件布局边界（虚线部分）：组件通过 margin 属性设置外边距时，组件布局边界就是组件区域加上 margin 的大小。
   • 组件区域（蓝区方块）：通过 width、height 属性设置组件区域的大小。
   • 组件内容区（黄色方块）：大小为组件区域大小减去组件的 border 值，会作为组件内容（或子组件）进行大小测算时的布局测算限制。
   • 组件内容（绿色方块）：组件内容本身占用的大小，比如文本内容占用的大小。
   • 布局举例：增加三行底色，间距为 20，属于典型的线性布局。

十三、常用组件介绍

1. 按钮（button）
2. 单选框（radio）
3. 切换按钮（toggle）
4. 进度条（progress）
5. 文本显示（text）
6. 文本输入（textinput/textarea）：通常用于响应用户的输入操作。
7. 显示图片（image）