鸿蒙ArkTS快速入门

1. 开发环境

DevEco Studio支持Windows系统和macOS系统

常用插件：

CodeGlance Pro 快速预览
Lingma - Alibaba Cloud Al Coding Assistant 通义灵码
Translation 英汉互译
HarmonyOS Component Center 生态插件

2. 基础语法

常见基础数据类型

① string 字符串：描述信息 ② number 数字：计算 ③ boolean 布尔：判断（真、假）
2.

常量 const PI: number = 3.14

变量 let title: string = '奥利奥水果捞'

函数/（可选参数，参数默认值）

复制代码

function sayHi(params?: string) {
  console.log('打招呼语', params || 'hello')

  // undefined
  console.log('打招呼语', params)
}

sayHi('你好')
sayHi()

箭头函数

复制代码

let buy = (price: number, weight: number = 1) => {
  let result: number = price * weight
  return result
}

let apple: number = buy(2)
console.log('苹果', apple)

接口

方法

类

对象

javascript 复制代码

//  定义接口
interface Person {
  name: string
  age: number
  weight: number
}
//类 构造方法
class Person {
  constructor (name: string, age?: number) {
    this.name = name;
    this.age = age;
  }
  name: string
  age?: number
  weight?: number
}

//  基于接口，定义对象
let ym: Person =  {
  name: '杨幂',
  age: 18,
  weight: 90
}
//约定方法
let ym: Person = {
  dance: () => {
    console.log('杨幂说', '我来跳个舞')
  },
  sing: (song: string) => {
    console.log('张扬说', '我来唱首', song)
  }
}


// 对象名.方法名（参数）
ym.dance()
ym.sing('勇气')

复制代码

##### 联合类型（arkts不允许any或未指定的类型）

```
let judge: number | string = 100

judge = 'A+'
judge = '优秀'
```

复制代码

##### 枚举类型

```javascript
// 1. 定义枚举 （定义常量列表）
enum ThemeColor {
  Red = '#ff0f29',
  Orange = '#ff7100',
  Green = '#30b30e'
}

// 2. 给变量设定枚举类型
let color: ThemeColor = ThemeColor.Orange
console.log('color', color)
```

```

```

复制代码

##### 数据处理：

1. 拼接字符串和变量：`+`

2. 拼接字符串和变量： `${ 变量 }`

复制代码

##### 类型转换

* 字符串转数字 Number()：将字符串类型数据转换为数字型，转换失败返回NaN（字符串中包含非数字） parseInt()：去掉小数部分将字符串类型转为数字型，转换失败返回NaN parseFloat()：保留小数部分将字符串类型转为数字型，转换失败返回NaN

* 数字转字符串 toString() toFixed()：四舍五入转字符串，可设置保留几位小数

复制代码

##### 状态管理：

状态变量：被状态装饰器装饰的变量，状态变量值的改变会引起UI的渲染更新。（较大章节，后续补充）

复制代码

##### 点击事件：onClick( (参数) =\> {} )

*

  ##### 运算符号

  * 算数运算

    | 运算符 |    描述     |
    |-----|-----------|
    | +   | 加，求和      |
    | -   | 减，求差      |
    | \*  | 乘，求积      |
    | /   | 除，求商      |
    | %   | 取余（是否被整除） |

  * 赋值运算符

    | 运算符 |  描述  |
    |-----|------|
    | +=  | 加法赋值 |
    | -=  | 减法赋值 |
    | \*= | 乘法赋值 |
    | /=  | 除法赋值 |
    | %=  | 取余赋值 |

  * 一元运算符：

  * 常见一元运算符：++和-- 后置写法：先赋值再自增/自减 前置写法：先自增/自减再赋值

  * 比较运算符：

    | 运算符 |   描述   |
    |-----|--------|
    | \>  | 判断大于   |
    | \>= | 判断大于等于 |
    | \<  | 判断小于   |
    | \<= | 判断小于等于 |
    | ==  | 判断相等   |
    | !=  | 判断不相等  |

  * 逻辑运算符 作用：扩充判断条件

    | 运算符  |   描述   |
    |------|--------|
    | \&\& | 与，都真才真 |
    | \|\| | 或，一真则真 |
    | !    | 非，取反   |

  * 逻辑中断： \&\&：都真才真 \|\|：一真则真

复制代码

##### 分支-循环语句

* If 分支

* Switch 分支

* 条件表达式 条件表达式又叫三元运算或三元表达式

  ```javascript
  let res: number = num1 > num2 ? num1 : num2
  ```

* While 语句

* For 语句

* 退出循环  

  作用：满足指定条件退出循环的方式 break：终止循环 continue： 退出当前一次循环的执行，继续执行下一次循环

* 遍历数组for...of 语法: for (let item of 数组名) {} for ... of : 在 ... 之中 进行循环 item: 声明的一个变量, 用来在循环的时候接收每一个数组元素

复制代码

##### ForEach语法（仅用于视图渲染）

ForEach基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为[List组件](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V2/ts-container-list-0000001580185770-V2 "List组件").语法: ForEach(arr, (item, index) =\> {})

复制代码

##### 条件渲染

条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。

```
if (this.isGet) {
  // 抽奖页面-遮罩层
  Column({space: 50}) {…}
} else {
  // 点击抽卡按钮后显示的遮罩层
  Column({space: 30}) {…}
    // 遮罩层交互
    .opacity(this.maskOpacity)
    .zIndex(this.maskZIndex)
}
```

3. UI组件和样式

常用系统组件

组件	描述
Text	显示文本
Image	显示图片
Column	列，内容垂直排列
Row	行，内容水平排列
Button	按钮

通用属性

属性	描述
width	宽度
height	高度
backgroundColor	背景色

颜色渐变：线性渐变属性：linearGradient() 径向渐变属性：radialGradient()

阴影：作用：为组件添加阴影效果，属性：shadow()

多态样式：属性：stateStyles()

参数	描述
normal	组件无状态时的样式（默认状态）
pressed	组件按下状态的样式
disabled	组件禁用状态的样式
focused	组件获焦状态的样式
clicked	组件点击状态的样式

动画 animation

图形变换：translate

平移：translate()
缩放：scale()
旋转：rotate()

尺寸单位：

px：物理像素
vp ：虚拟像素

文本属性：

字体大小、颜色、样式、粗细、行高、对齐方式、首行缩进、最大行数等

图片显式

image

javascript 复制代码

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 本地图片
      Image($r('app.media.cat'))
        .width(200)

      // 网络图片
      Image('https://www.itheima.com/images/logo.png')
        .width(200)
    }
  }
}

布局

复制代码

  ###### 属性：

  * 内边距 padding

  * 外边距 margin

  * 边框属性、圆角

  * 背景属性：背景色、背景图、背景图尺寸、 背景图位置

复制代码

  ###### 线性布局

  * 线性容器 Row 和 Column 构建。Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。主轴方向排列，默认纵轴居中。

  * space 属性设置主轴方向上子元素的间距，简单实现等间距效果。

  * 主轴对齐方式属性：justifyContent()参数：枚举FlexAlign

    |      属性      |                      描述                       |
    |--------------|-----------------------------------------------|
    | Start        | 首端对齐                                          |
    | Center       | 居中对齐                                          |
    | End          | 尾部对齐                                          |
    | Spacebetween | 两端对齐子元素之间间距相等                                 |
    | SpaceAround  | 子元素两侧间距相等第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半 |
    | SpaceEvenly  | 相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样       |

  * 交叉轴对齐方式 属性：alignItems()： 交叉轴在水平方向：HorizontalAlign → Column 交叉轴在垂直方向：VerticalAlign→ Row

  * 单个子元素交叉轴对齐方式 属性：alignSelf() 参数：枚举ItemAlign

复制代码

  ###### 弹性布局：

  弹性容器组件： Flex()
  * 在弹性布局中，容器的子元素可以按照任意方向排列（默认水平排列）。通过设置参数 direction，可以决定主轴的方向，从而控制子元素的排列方向 参数：direction 值：枚举 FlexDirection

  * wrap 属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex 是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

  * 主轴对齐方式 参数：justifyContent 值：枚举 FlexAlign

  * 交叉轴对齐方式 参数：alignItems 值：枚举 ItemAlign

复制代码

  ###### 层叠布局

  层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。 对齐方式 参数：alignContent 取值：枚举 Alignment

复制代码

  ###### 列表 List

  * 列表是一种复杂的容器，当列表项达到一定数量，超过List容器组件大小时，可以自动提供滚动功能。

  * 设置主轴方向 属性：listDirection() 参数：枚举 Axis Vertical：垂直方向，默认值 Horizontal：水平方向

  * 列对齐方式 属性：alignListItem() 参数：枚举 ListItemAlign Start：首部对齐（默认） Center：居中对齐 End：尾部对齐 滚动条状态 属性：scrollBar()等

复制代码

  ##### 定位

  * 绝对定位 属性：position() 参数：{x: 水平偏移量, y: 垂直偏移量} 偏移量取值 数字，单位是vp 百分比，参照父组件尺寸计算结果

  * 相对定位 属性：offset() 参数：{x: 水平偏移量, y: 垂直偏移量} 偏移量取值 数字，单位是vp 百分比，参照父组件尺寸计算结果

  * Z 序控制 定位后的组件，默认后定义的组件在最上面显示，可以通过 zIndex 属性调整显示层级 属性：zIndex(数字) 特点：取值为整数数字，取值越大，显示层级越高