一、组件基础
1.1 什么是ArkTS
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。
误区： 前端同学，原有的DOM/WebAPI在这里皆不存在 ，如：document.querySelector/window.location
ArtTS绝不是TS：
- TS在前端中虽然有类型约束，但是他会编译成js去运行
- ArtTS编译后直接映射字节码-编译过程带类型
ArkTS采用声明式UI的方法来绘制页面，设置属性，绑定事件
1.2 组件结构
UI组件结构
1.2.1 struct-自定义组件
自定义组件必须使用struct关键字来声明（注意不能有继承关系-组件名不能系统组件名重名）
语法： struct 组件名 {}
注：struct关键字声明的UI描述-必须被@Component或者@CustomDialog修饰
1.2.2 Component修饰符
Component装饰器只能修饰struct关键字声明的结构，被修饰后的struct具备组件的描述(渲染)能力
1.2.3 build函数
- 用于定义组件的UI描述，一个struct结构必须实现build函数
- build函数可以没有内容，如果有的话，必须有且只有一个容器组件(可以放置子组件的组件)（只有被entry装饰里面有限制）
- 常见容器组件-：Flex、Column、Row、List、Grid、Panel、Button
1.2.4 entry修饰符
entry将自定义组件定义为UI页面的入口，最多可以使用entry装饰一个自定义组件(在一个ets文件中)
entry修饰的组件，最终会被注册，具体文件位置：main/resources/base/profile/main_pages.json
a、自动注册-新建组件时，采用新建Page的方式
b、手动注册-新建一个ets文件，自己在main_pages.json中手动添加路径
注意：如果你手动删除了某一个带entry的组件，你需要手动去main_page中去删除该路径，否则编译会报错
1.2.5总结
- 一个UI描述必须使用struct来声明，不能继承
- struct必须被Component或者CustomDialog修饰
- struct必须实现build方法，build方法可以没有元素，但是有的话有且只有一个可容纳子组件的容器组件(entry修饰的组件)
- entry修饰符表示该组件是页面级组件，一个文件中只允许修饰一个struct组件
- 采用分拆组件的形式可以有效解解耦我们的业务
1.3 系统组件（ArkUI）
- 常用组件：
Text 文本组件-（只能放Span子组件）
Text() {
Span('$$')
.fontSize(12)
Span('2.5')
.fontSize(18)
}
Column 列组件，纵向排列，Flex布局主轴是Y （任意子组件）
Row 行组件，横向向排列，Flex布局主轴是X （任意子组件）
Flex 以弹性方式布局子组件的容器组件。(存在二次布局，官方推荐有性能要求，使用Column和Row代替) （任意子组件）
Button 按钮组件 （单子组件）
TextInput 输入框组件 （无子组件）
Image （无子组件）
Button (单个子组件)
List (限制ListItem子组件)
Scroll (限制单个子组件)
- 使用组件
使用组件采用 组件名()的语法
有构造参数采用 组件名(参数)的语法
组件里放置子组件采用组件名() { 子组件的语法 }的链式语法
组件设置属性采用组件名().width().height()的语法
组件又有属性又有子组件采用组件名(){ ... 子组件 }.width().height()的语法
在arkUI中，我们的内容如果超过了屏幕显示，则不会显示滚动条，需要使用Scroll来包裹
需要注意的是： 该组件滚动的前提是主轴方向大小小于内容大小。子组件不要设置高度，否则不能滚动
1.4 组件事件
监听原生组件的事件和设置属性的方式是一样的都是链式调用，值得注意的是，我们注册事件都要使用箭头函数的写法，Next版本会有对于匿名函数function的限制
function test() {} const test = () => {}
请注意：在注册事件中的逻辑务必使用箭头函数 () => {}，极不推荐 function() {}
a、因为function中this指向为undefind
b、Next下一代不再支持funtion匿名函数声明
c、箭头函数中的this指向当前struct实例，可以方便的调用方法和获取属性
public和private关键字
如果不写或者写public 表示该属性可被外界即父组件赋值,如果写private表示该属性只会被该组件的this获取
当我们事件处理逻辑比较复杂，写在UI描述中无法抽提的时候，我们可以在struct结构体中定义;当我们需要在组件中记录一些状态时，变量应该显示的在struct中声明;
struct EventCase {
@State account:string = ""
@State password:string = ""
getBtnState():boolean {
return this.account !== "" && this.password !== ""
}
}
说明：promptAction和AlertDailog都可以弹出提示 promptAction需要引入包，AlertDialog不需要引入就可以直接使用
1.5 组件状态
@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。
加上该@State修饰符后，当数据发生改变，造成了build的重新执行，来保证我们状态的变化。
State修饰的类型：
- Object、class、string、number、boolean、enum类型，以及这些类型的数组
- 类型必须被指定
- 不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null
css知识点：
layoutWeight(1)，表示占父容器剩余宽度的百分比
class是ArkTS主推的定义对象类型的形式，interface/type也可以用，但是有限制
class User {
name: string
age: number
address: {
province: string
city: string
area: string
}
}
State修饰符声明的数据，只能监听到第一层的数据变化，如果发现第二层变化-不会触发UI更新
@State
user: 类型 = {
a: {
b: '1323'
}
}
this.user.a = { ...this.user.a, b: '456' }
css知识点：
layoutWeight(1)，表示占父容器剩余宽度的百分比
TS知识点：整数和字符串互转
toString()：整数转字符串; parseInt(value):强转整数
结构赋值只支持单层赋值并引起UI更新，第二层不支持，所以使用延展属性...
- this.user.address = { ...this.user.address, province: value }
{...}：表示前端的浅拷贝，先将前端的属性赋值给一个对象，再改变其中一个值 - this.user.address.province = value
this.user = {...this.user}
总结：
修饰符：
@Entry(页面级组件)
@Component
struct Index {
@State // 响应式数据 数据变化 => UI更新
build() {
// 可以没有内容
// 被entry修饰的组件 如果只放一个组件- 这个组件应该是一个容器组件- 不能同时放两个
}
}
State修饰符声明的数据，只能监听到第一层的数据变化，如果发现第二层变化-不会触发UI更新
@State
user: 类型 = {
a: {
b: '1323'
}
}
this.user.a = { ...this.user.a, b: '456' }
@state count:number = 5; // number为TS的类型注解
timer:number = -1; // 声明一个timer的标记，初始值-1代表定时器不存在，setInterval返回的值大于0
this.timer = setInterval( () => {
}, 1000)
网友评论