ArkTS学习笔记 原创

安之__
发布于 2023-7-21 19:58
浏览
3收藏

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

Devstudio

目录

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

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

JS

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

TypeScript

let/var

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

基础类型

  1. 布尔型boolean

ArkTS学习笔记-鸿蒙开发者社区

  1. 数字number

ArkTS学习笔记-鸿蒙开发者社区

  1. 字符串string

ArkTS学习笔记-鸿蒙开发者社区

  1. 数组

ArkTS学习笔记-鸿蒙开发者社区

  1. 元组

ArkTS学习笔记-鸿蒙开发者社区

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

  1. 枚举enum

ArkTS学习笔记-鸿蒙开发者社区
ArkTS学习笔记-鸿蒙开发者社区
7. unknown

ArkTS学习笔记-鸿蒙开发者社区

  1. void

ArkTS学习笔记-鸿蒙开发者社区

  1. undefined和null

ArkTS学习笔记-鸿蒙开发者社区

  1. 联合类型

ArkTS学习笔记-鸿蒙开发者社区

符号

=== :等同符

ArkTS学习笔记-鸿蒙开发者社区

条件语句

ArkTS学习笔记-鸿蒙开发者社区

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

函数

  1. 定义

ArkTS学习笔记-鸿蒙开发者社区

此处的myAdd是函数名。

ArkTS学习笔记-鸿蒙开发者社区
(不定义返回类型的话所有返回类型都可以通过)

函数参数的默认值:

ArkTS学习笔记-鸿蒙开发者社区

  1. 可选参数

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

ArkTS学习笔记-鸿蒙开发者社区

  1. 剩余参数

    当实参个数不确定

ArkTS学习笔记-鸿蒙开发者社区

  1. 箭头函数

    ES6版本的TS提供了箭头函数
    ArkTS学习笔记-鸿蒙开发者社区

例子1:

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

例子2:

ArkTS学习笔记-鸿蒙开发者社区

调用箭头函数:
ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区
constructor是构造方法,用于初始化Person里的name,age

getPersonInfo是方法。

继承

ArkTS学习笔记-鸿蒙开发者社区

模块(export…)

ArkTS学习笔记-鸿蒙开发者社区

一个类需要被引用时,要加上export导出。
ArkTS学习笔记-鸿蒙开发者社区

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

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

在不同page需要这样。

特别地:

如果子类为export default struct xxx ,

父类import时不用大括号,如ArkTS学习笔记-鸿蒙开发者社区

例子:ArkTS学习笔记-鸿蒙开发者社区

迭代器

ArkTS学习笔记-鸿蒙开发者社区
for…of:遍历数组元素

for…in:遍历数组下标

ArkTS学习笔记-鸿蒙开发者社区

ArkTs

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

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

UI:User Interface(用户界面)

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

声明式开发范式:

ArkTS学习笔记-鸿蒙开发者社区

基本概念

  1. 装饰器
    ArkTS学习笔记-鸿蒙开发者社区

如图表示自定义组件

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

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

  1. UI描述

ArkTS学习笔记-鸿蒙开发者社区

  1. 内置组件

ArkTS学习笔记-鸿蒙开发者社区

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

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

  1. 属性方法

ArkTS学习笔记-鸿蒙开发者社区

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

  1. 事件方法

ArkTS学习笔记-鸿蒙开发者社区
就是组件里的方法,[绑定事件,对事件的响应]

基础语法

组件

内置组件:系统的内置组件有ArkTS学习笔记-鸿蒙开发者社区

父组件、子组件:

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

基础组件

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

ArkTS学习笔记-鸿蒙开发者社区

  1. ​ Image

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

    ArkTS学习笔记-鸿蒙开发者社区

​ 形式:ArkTS学习笔记-鸿蒙开发者社区

PixelMap学习Image模块

常用属性:

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

  1. 图片大小:

    width,height

ArkTS学习笔记-鸿蒙开发者社区

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

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

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

  1. Text

ArkTS学习笔记-鸿蒙开发者社区

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

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

常用属性:

设置文本大小:ArkTS学习笔记-鸿蒙开发者社区

设置文本粗细:ArkTS学习笔记-鸿蒙开发者社区

Bolder比Bold粗

设置文本颜色:ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

文本对齐方式:

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

  1. TextInput

输入单行文本

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

常用属性:

最大输入数

设置输入数据类型

  1. Button

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

容器组件

ArkTS学习笔记-鸿蒙开发者社区

  1. Column

  2. Row

  3. List

    滚动类容器组件

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

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

ArkTS学习笔记-鸿蒙开发者社区

  1. Grid

网格布局 ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

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

下图为column,rows同理

ArkTS学习笔记-鸿蒙开发者社区

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

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

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

ArkTS学习笔记-鸿蒙开发者社区

如图ArkTS学习笔记-鸿蒙开发者社区1311

用法:

1.ArkTS学习笔记-鸿蒙开发者社区

  1. ArkTS学习笔记-鸿蒙开发者社区

  2. ArkTS学习笔记-鸿蒙开发者社区

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

  1. Tabs

ArkTS学习笔记-鸿蒙开发者社区

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

每个页签叫做tabBar

ArkTS学习笔记-鸿蒙开发者社区

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

ArkTS学习笔记-鸿蒙开发者社区

注意:ArkTS学习笔记-鸿蒙开发者社区

布局模式:

ArkTS学习笔记-鸿蒙开发者社区

barMode的fixed:表示所有TabBar的平均分配宽度ArkTS学习笔记-鸿蒙开发者社区

·

scrollable:TabBar实际布局宽度,当超过总长度,可以滑动ArkTS学习笔记-鸿蒙开发者社区

当总长度太多,但使用了Fixed时:ArkTS学习笔记-鸿蒙开发者社区

barWidth:设置页签宽度

barHeight:设置页签高度ArkTS学习笔记-鸿蒙开发者社区

自定义tabBar样式:
ArkTS学习笔记-鸿蒙开发者社区

使用字符串给每个TabContent设置了tabBar属性。tabBar属性还支持使用@Builder装饰器修饰 的函数,所以可以用@Builder构造一个生成自定义tabBar样式的函数:
ArkTS学习笔记-鸿蒙开发者社区

用法:ArkTS学习笔记-鸿蒙开发者社区

顶部导航栏:

ArkTS学习笔记-鸿蒙开发者社区

填充内容用TabContent().TabBar

ArkTS学习笔记-鸿蒙开发者社区

侧边导航栏:ArkTS学习笔记-鸿蒙开发者社区

自定义组件

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

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

例子:

3种自定义组件:

ArkTS学习笔记-鸿蒙开发者社区

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

做法:

  1. 定义自定义组件ArkTS学习笔记-鸿蒙开发者社区

定义的方法:

ArkTS学习笔记-鸿蒙开发者社区

@Component是组件化的标志

struct是组件的数据结构

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

ArkTS学习笔记-鸿蒙开发者社区

形式:

build(){

//进行UI描述

}

管理组件状态

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

ArkTS学习笔记-鸿蒙开发者社区

  1. @State

    组件内状态管理

ArkTS学习笔记-鸿蒙开发者社区

  1. @Prop

从父组件单向同步状态

例子:

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

  1. @Link和@Wtach

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

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

ArkTS学习笔记-鸿蒙开发者社区

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

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

@Watch:

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

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

ArkTS学习笔记-鸿蒙开发者社区

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

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

常用装饰器

  1. 上的@Component

  2. 自定义组件 的 @Entry:

ArkTS学习笔记-鸿蒙开发者社区

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

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

  1. @State

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

ArkTS学习笔记-鸿蒙开发者社区

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

  1. @Link

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

ArkTS学习笔记-鸿蒙开发者社区

(建立绑定过程:

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

ArkTS学习笔记-鸿蒙开发者社区

  1. @Builder

ArkTS学习笔记-鸿蒙开发者社区
ArkTS学习笔记-鸿蒙开发者社区

生命周期函数

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

生命周期:创建->销毁

系统提供了2个生命周期函数:ArkTS学习笔记-鸿蒙开发者社区

aboutToAppear()函数:

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

aboutTodisappear()函数:

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

性质:

(1):由于这些回调函数私有,系统会在特定的时闻下自动调用,回调函数不能被手动调用。

ArkTS学习笔记-鸿蒙开发者社区

(2):其他3个生命周期函数:对于页面入口组件的3个函数:

打开页面:onPageShow()

页面进入后台:onPageHide()

返回页面:onBackPress()

间距等细节

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

如已有justi……,则在此基础上向x。ArkTS学习笔记-鸿蒙开发者社区

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

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

渲染控制

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

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

条件渲染

ArkTS学习笔记-鸿蒙开发者社区

循环渲染

ArkTS学习笔记-鸿蒙开发者社区

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

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

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

ArkTS学习笔记-鸿蒙开发者社区函数的item对应组数的每一项内容

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

ArkTS学习笔记-鸿蒙开发者社区

属性:各个部分上下左右间隔ArkTS学习笔记-鸿蒙开发者社区

column是左右间隔

状态管理

简介:

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

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

从网络获取数据

web组件

  1. 加载在线网站

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

ArkTS学习笔记-鸿蒙开发者社区

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

ArkTS学习笔记-鸿蒙开发者社区

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

  1. 加载本地网页

ArkTS学习笔记-鸿蒙开发者社区

// 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 })
    }
  }
}

注意:ArkTS学习笔记-鸿蒙开发者社区

  1. 文本缩放

项目结构

ArkTS学习笔记-鸿蒙开发者社区

开发实践

声明式UI

特征:

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

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

例子:

ArkTS学习笔记-鸿蒙开发者社区

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

  1. ArkTS学习笔记-鸿蒙开发者社区

做法(代码):

ArkTS学习笔记-鸿蒙开发者社区

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

创建自定义组件

见‘组件’

属性与布局

属性配置:

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

ArkTS学习笔记-鸿蒙开发者社区

布局:

ArkTS学习笔记-鸿蒙开发者社区

用到容器组件:

ArkTS学习笔记-鸿蒙开发者社区

形式:

ArkTS学习笔记-鸿蒙开发者社区,花括号语法来包括要组织的内容,相应的内容在其中按照要排列的顺序放置

常用容器组件:

ArkTS学习笔记-鸿蒙开发者社区

给Row添加属性:

ArkTS学习笔记-鸿蒙开发者社区

ArkTS学习笔记-鸿蒙开发者社区

例子:

ArkTS学习笔记-鸿蒙开发者社区

(封装了UI单元

渲染列表数据

(交互功能)

ArkTS学习笔记-鸿蒙开发者社区

通过ForEach完成多个组件

属性动画

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

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

创建:
ArkTS学习笔记-鸿蒙开发者社区

设置:

ArkTS学习笔记-鸿蒙开发者社区

(1):播放速度

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

(2):动画播放模式

ArkTS学习笔记-鸿蒙开发者社区

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

(3):动画延迟执行的时长

ArkTS学习笔记-鸿蒙开发者社区

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

UIAbility

(应用程序的入口)

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

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

ArkTS学习笔记-鸿蒙开发者社区

创建页面

ArkTS学习笔记-鸿蒙开发者社区

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

导入router路由模块

ArkTS学习笔记-鸿蒙开发者社区

传入参数:

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

ArkTS学习笔记-鸿蒙开发者社区

获取参数:

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

ArkTS学习笔记-鸿蒙开发者社区

返回原页:

调用router.back() ArkTS学习笔记-鸿蒙开发者社区

生命周期状态

ArkTS学习笔记-鸿蒙开发者社区

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

ArkTS学习笔记-鸿蒙开发者社区

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

ArkTS学习笔记-鸿蒙开发者社区

切换横屏

  1. ArkTS学习笔记-鸿蒙开发者社区

加上这段代码

//将应用设置为横屏
private setlandscape() {
  //将应用设置为横屏
  let promise = window.getLastWindow(this.context);
  promise.then((data) => {
    //切换成横屏
    let orientation = window.Orientation.LANDSCAPE;
    data.setPreferredOrientation(orientation, (err) => {
    });
  })
}
  1. ArkTS学习笔记-鸿蒙开发者社区调用合格函数`·

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2024-1-13 13:57:09修改
3
收藏 3
回复
举报
1条回复
按时间正序
/
按时间倒序
安苒anran0
安苒anran0

赞一个

回复
2023-8-5 11:09:59
回复
    相关推荐