一、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 的调试工具,如断点调试等。
十、一些常见问题与解决思路
- 语法错误提示不明确时,检查类型定义、装饰器使用是否正确等。
- 页面布局错乱时,检查容器组件的嵌套关系和属性设置。
- 数据请求失败时,检查网络权限、请求地址、参数等。
- 模拟器运行和真机运行不一致时,真机上进行更多测试和适配调整。
十一、ArkUI 的基本组成
- 装饰器:用于装饰类、结构、方法以及变量,并赋予其特殊的含义。例如,
@component
表示自定义组件,@entry
表示该自定义组件为入口组件,@state
表示组件中的状态变量,状态变量变化会触发 UI 刷新。 - UI 描述:以声明式的方式描述 UI 的结构,例如 build()方法中的代码块。
- 自定义组件:可复用的 UI 单元,可组合其他组件。
- 系统组件:ArkUI 框架中默认内置的基础和容器组件,可直接被开发者调用。
- 事件:组件可以通过链式调用设置多个事件的响应逻辑。
- 属性:组件可以通过链式调用配置多项属性。
十二、结构布局
组件按照布局的要求依次排列,构成应用的页面。在声明式 UI 中,所有的页面都是由自定义组件构成。
-
布局元素的组成:
- 组件布局边界(虚线部分):组件通过 margin 属性设置外边距时,组件布局边界就是组件区域加上 margin 的大小。
- 组件区域(蓝区方块):通过 width、height 属性设置组件区域的大小。
- 组件内容区(黄色方块):大小为组件区域大小减去组件的 border 值,会作为组件内容(或子组件)进行大小测算时的布局测算限制。
- 组件内容(绿色方块):组件内容本身占用的大小,比如文本内容占用的大小。
- 布局举例:增加三行底色,间距为 20,属于典型的线性布局。
十三、常用组件介绍
- 按钮(button)
- 单选框(radio)
- 切换按钮(toggle)
- 进度条(progress)
- 文本显示(text)
- 文本输入(textinput/textarea):通常用于响应用户的输入操作。
- 显示图片(image)