如有错漏，希望大佬们不吝赐教，谢谢
#jitoa

Devstudio

目录

（一个版本的）其他版本在https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3?catalogVersion=V3

JS

TypeScript

let/var

let 是在代码块内有效，var 是在全局范围内有效

基础类型

1. 布尔型boolean

2. 数字number

3. 字符串string

4. 数组

5. 元组

(一个数组，每个元素的类型都随意。

6. 枚举enum

7. unknown

8. void

9. undefined和null

10. 联合类型

符号

=== ：等同符

条件语句

允许测试一个变量等于多个值时的情况

函数

1. 定义

此处的myAdd是函数名。

（不定义返回类型的话所有返回类型都可以通过）

函数参数的默认值：

2. 可选参数

   可选参数可以有也可以没有

3. 剩余参数

   当实参个数不确定

4. 箭头函数

   ES6版本的TS提供了箭头函数
   

例子1：

setTimeout(() => {
console.log(“箭头函数执行了…”);
}, 1000);

例子2：

调用箭头函数：

类

constructor是构造方法，用于初始化Person里的name，age

getPersonInfo是方法。

继承

模块(export…)

一个类需要被引用时，要加上export导出。

用import导入，导入语句在最前面

（在同一个.ets下不用导入导出，直接用就行)

在不同page需要这样。

特别地：

如果子类为export default struct xxx ，

父类import时不用大括号，如

例子：

迭代器

for…of：遍历数组元素

for…in：遍历数组下标

ArkTs

ArkTs在TS的基础上拓展了声明式UI，状态管理等功能，让开发高性能应用更简洁自然

ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，扩展了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。TS是JavaScript（简称JS）的超集，ArkTS则是TS的超集。

UI：User Interface(用户界面)

声明式UI：https://juejin.cn/post/7212622837063811109

声明式开发范式：

基本概念

1. 装饰器
   

如图表示自定义组件

@Component是一种装饰器，装饰自定义结构体ListItemComponent，是可重用的UI单元，可以与其他组件组合

@State装饰的isChange变量的值改变时，会触发该变量对应的自定义组件，ListItemComponent的UI界面会自动刷新

2. UI描述

3. 内置组件

Row是水平方向布局的容器组件

Text是文本组件，用来展示一段文字

4. 属性方法

属性方法紧随组件，用 . 来连接

5. 事件方法

就是组件里的方法，[绑定事件，对事件的响应]

基础语法

组件

内置组件：系统的内置组件有

父组件、子组件：

当一个组件中使用另一个组件的内容时，这个组件就被称为父组件，被使用的称为子组件

基础组件

基础组件是界面搭建与显示的最小单位

1. ​ Image

   渲染展示图片,支持加载本地、网络图片

   

​

​ 形式：

PixelMap学习Image模块

常用属性：

https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101667360160710997?ha_linker=eyJ0cyI6MTY4ODI2Mzk2MTAzMSwiaWQiOiIzMmI1YTFiZWE3MmJhYmE0MmFiMmNlNGNjMzEwOTdjZiJ9

1. 图片大小：

   width,height

第一个默认的单位是vp，vp是屏幕密度相关像素

[推荐]第三个，Resourse是资源引用类型,用于设置组件属性的值。要在float.json文件下定义宽高。（该文件尝试后只能放在base-element下才能扫描到（app.判断））

资源文件如字符串，文件，音频统一放在resources目录下，便于使用和维护

2. Text

可以在resources目录下的string.json的文件中定义字符串资源

常用属性：

设置文本大小：

设置文本粗细：

Bolder比Bold粗

设置文本颜色：

文本对齐方式：

3. TextInput

输入单行文本

常用属性：

最大输入数

设置输入数据类型

4. Button

容器组件

1. Column

2. Row

3. List

   滚动类容器组件

创建的组件的属性在@Builder里改

4. Grid

网格布局

columnsTemplate和rowsTemplate的单位：fr，表示分割比例。不设置时默认1

下图为column，rows同理

columnsGap和rowsGap单位是vp，默认为1.

更多属性：设置滚动条状态的scollerBar，滚动条宽度的scollerBarWidth，滚动条颜色的scollerBarColor等

构建可滚动网格可以实现更多的内容，不需要设置行数而只需要设置列数。设置好高度后，多出来的网格会滚动展示

如图1311

用法：

1.

2. 

3. 

通过设置template设置行数和列数。

5. Tabs

是一种可以通过页签进行内容视图切换的容器组件。页签比如“我的”，“首页”。一个页签对应一个视图。

每个页签叫做tabBar

设置Tab{}.的属性就是设置TabBar的属性

注意：

布局模式：

barMode的fixed：表示所有TabBar的平均分配宽度

·

scrollable：TabBar实际布局宽度，当超过总长度，可以滑动

当总长度太多，但使用了Fixed时：

barWidth：设置页签宽度

barHeight：设置页签高度

自定义tabBar样式：

使用字符串给每个TabContent设置了tabBar属性。tabBar属性还支持使用@Builder装饰器修饰 的函数，所以可以用@Builder构造一个生成自定义tabBar样式的函数：

用法：

顶部导航栏：

填充内容用TabContent().TabBar

侧边导航栏：

自定义组件

简洁定义：可复用的 UI 单元，可组合其它组件。

定义：通过组合基础组件，封装得到的可重用、可组合的UI单元。抽象内置组件，提取结构相同和功能明确的UI单元，组合成自定义组件，并且对自定义组件进行合理组合

例子：

3种自定义组件：

然后再组合成完整的排行榜页面

做法：

1. 定义自定义组件

定义的方法：

@Component是组件化的标志

struct是组件的数据结构

2. 必须定义build函数，进行组件化描述(声明式UI描述)

形式：

build(){

//进行UI描述

}

管理组件状态

例子：某部分点开后呈现展开状态，组件高度改变

1. @State

   组件内状态管理

2. @Prop

从父组件单向同步状态

例子：

3. @Link和@Wtach

   与父组件双向同步状态和监听状态变化，使子组件之间能互相感知

例子：子组件如多个目录只能有一个被展开。利用每个子组件有一个index值，

@Link建立起父组件和子组件之间的双向同步关系

@Watch:

应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变，可以使用@Watch为状态变量设置回调函数。

当状态变量变化时，@Watch的回调方法将被调用。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等（===），遵循严格相等规范。当在严格相等为false的情况下，就会触发@Watch的回调。

watch括号内是回调函数的名字[ ]

当监听的属性改变时，回调函数将被执行。

常用装饰器

1. 上的@Component

2. 自定义组件 的 @Entry：

@Entry修饰的自定义组件是页面的默认入口，是页面的入口组件，加载页面时首先加载

一个页面有且仅能有一个@Entry，只有被@entry修饰的组件或其子组件才会在而面上显示

3. @State

   创建isChange变量，用@State修饰，成为了组件的状态数据。

点击事件触发 -> isChange变量改变 -> 装饰器发现状态数据改变 -> 自动进行UI刷新 -> Text组件进行判断决定字体颜色

4. @Link

   多个自定义组件之间数据变化的UI更新：@State和@Link结合

(建立绑定过程：

子组件初始化@Link修饰的变量：用$来引用进行初始化，使isRefreshData 与isSwitchDataSourse建立双向数据绑定(见@State解释)

5. @Builder

生命周期函数

自定义组件的生命周期(回调)函数：

生命周期：创建->销毁

系统提供了2个生命周期函数：

aboutToAppear()函数：

在build函数前执行，可以对UI需要展示的数据进行初始化/申请定时器资源等。后续在build中可以使用这些数据或资源进行UI展示。

aboutTodisappear()函数：

alboutTolDisa6ear在自定义组件实例被销毁时调用，可以释放不再使用的资源，避免资源泄露。比如定时器资源。

性质：

（1）：由于这些回调函数私有，系统会在特定的时闻下自动调用，回调函数不能被手动调用。

（2）：其他3个生命周期函数：对于页面入口组件的3个函数：

打开页面：onPageShow()

页面进入后台：onPageHide()

返回页面：onBackPress()

间距等细节

padding，margin同样适用.需指定top/left/……，不然没用

如已有justi……，则在此基础上向x。

对height的高度指定会盖过100%

渲染控制

定义：用于控制UI界面的显示逻辑

作用：更自由的绘制UI界面

条件渲染

循环渲染

ForEach迭代数组：为每个数组创建响应的组件，三个参数：

第一个：数组(提供循环渲染的数据源)

第二个：子组件的生成函数(为数据源中的每个数组项生成子组件)

函数的item对应组数的每一项内容

第三个：键值生成器(用于给数据项生成唯一且稳定的键值)

属性：各个部分上下左右间隔

column是左右间隔

状态管理

简介：

使组件动起来，根据用户的输入或数据变化呈现不同的效果。

通过管理组件的状态实现功能场景

从网络获取数据

web组件

1. 加载在线网站

   https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-web-0000001477981205-V3

{
“module” : {
“requestPermissions”:[
{
“name”: “ohos.permission.INTERNET”
}
]
}
}

@Entry
@Component
struct WebComponent {
controller: WebController = new WebController();
build() {
Column() {
Web({ src: ‘https://developer.harmonyos.com/’, controller: this.controller })
}
}
}

2. 加载本地网页

// xxx.ets
@Entry
@Component
struct SecondPage {
controller: WebController = new WebController();

 build() {
   Column() {
     Web({ src: $rawfile('index.html'), controller: this.controller })
   }
 }

}

// xxx.html
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
</head>
<body>
<img src=“pad.jpg”>
</body>
</html>

3. 网页缩放

![image.png](https://dl-harmonyos.51cto.com/images/202307/a666cc3942ab32ea6b00093d8d17f32d1ca494.png?x-oss-process=image/resize,w_660,h_46)


Web({ src:'www.example.com', controller:this.controller })
    .zoomAccess(true)
![image.png](https://dl-harmonyos.51cto.com/images/202307/73ac23124c0ed4186ef247aa526b5a56a3ec21.png?x-oss-process=image/resize,w_671,h_41)

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController();
  factor: number = 1.5;

  build() {
    Column() {
      Button('zoom')
        .onClick(() => {
          this.controller.zoom(this.factor);
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

注意：

4. 文本缩放

项目结构

开发实践

声明式UI

特征：

1. 声明式描述(只描述效果，不关心实现过程)

2. 状态驱动视图更新(不直接操作UI，通过操作状态数据间接改变UI内容)

例子：

想要页面什么样，就进行什么样的描述，过程由框架实现

2. 

做法(代码)：

ArkTs感知到状态变化 -> 进行视图更新

创建自定义组件

见‘组件’

属性与布局

属性配置：

ArkTS支持以点运算符的形式设置属性

布局：

用到容器组件：

形式：

，花括号语法来包括要组织的内容，相应的内容在其中按照要排列的顺序放置

常用容器组件：

给Row添加属性：

例子：

（封装了UI单元

渲染列表数据

（交互功能）

通过ForEach完成多个组件

属性动画

是动画效果之一，当组件的通用属性发生改变时产生的属性渐变效果。

其原理是，当组件的通用属性发生改变时，组件状态由初始状态逐渐变为结束状态的过程中，会创建多个连续的中间状态，逐帧播放后，就会形成属性渐变效果，从而形成动画。

创建：

设置：

（1）：播放速度

参数tempo：一般用0.5/1.0/1.5这样的

（2）：动画播放模式

Alternate会自然平滑很多，我也不知道怎么解释

（3）：动画延迟执行的时长

延迟多的就慢，像快快一样

UIAbility

（应用程序的入口）

定义：包含用户界面的应用组件，主要用于与用户进行交互

功能：主要是处理生命周期

创建页面

页面间数据跳转、参数传递

导入router路由模块

传入参数：

调用pushUrl方法时传入自定义参数params

获取参数：

调用router.getParams()方法获取页面传递的自定义参数

返回原页：

调用router.back()

生命周期状态

Create()：应用加载过程中，UIAbility实例创建完成触发，系统调用onCreate()回调，完成初始化(定义变量，资源加载等)

https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101667310940295021?ha_linker=eyJ0cyI6MTY4ODE5MDg4Mjc5NiwiaWQiOiIzMmI1YTFiZWE3MmJhYmE0MmFiMmNlNGNjMzEwOTdjZiJ9&

切换横屏

1. 

加上这段代码

//将应用设置为横屏
private setlandscape() {
  //将应用设置为横屏
  let promise = window.getLastWindow(this.context);
  promise.then((data) => {
    //切换成横屏
    let orientation = window.Orientation.LANDSCAPE;
    data.setPreferredOrientation(orientation, (err) => {
    });
  })
}

2. 在调用合格函数`·