鸿蒙开辟学习笔记2

一、class 类

类是用于 创建对象模版。同时类声明也会引入一个 新范例，可界说其 实例属性、方法 和 构造函数。

1. // 类名 首字母大写（规范）
2. class 类名 {
3.         // 1、实例属性（字段）
4.         // 2、构造函数
5.         // 3、方法
6. }

复制代码

1、属性（字段）

1. class Person {
2.         // 字段名: 类型 = 初始值
3.         name: string = 'jack'       
4.         // 可选字段可以不设置初始值
5.         food？: string
6. }
7. const p: Person = new Person()
8. console.log(p.name)
9. // 可选字段在使用时需要配合 可选链操作符，避免出错
10. // p.food?.length 表示：如果food存在，就取 length
11. console.log(p.food?.length)

复制代码

2、构造函数 constructor

差别实例，将来必要有差别的字段初始值，必要通过构造函数来实现。

1. /*
2. class 类{
3.         字段1:类型
4.         字段2:类型
5.         constructor(参数1...) {
6.                 this.字段A = 参数1
7.         }
8. }
9. const 实例1 = new 类(参数1...)
10. */
11. // 法1：构造函数接收一系列参数，所有参数都需要在 constructor 中列出来
12. class Food {
13.   name: string
14.   price: number
15.   constructor(name:string, price:number) {
16.     this.name = name
17.     this.price = price
18.   }
19. }
20. let  f1: Food = new Food('西红柿', 6)
21. console.log('f1 name：', f1.name)
22. console.log('f1 price：', f1.price)
24. // 法2：构造函数接收一个对象
25. // 接口
26. interface interfaceFood {
27.   name: string
28.   price: number
29.   desc: string
30. }
32. class Food2 {
33.   name: string
34.   price: number
35.   desc: string
36.   constructor(paramsObj: interfaceFood) {
37.     this.name = paramsObj.name
38.     this.price = paramsObj.price
39.     this.desc = paramsObj.desc
40.   }
41. }
42. let f2 = new Food2({name: '土豆', price: 5, desc: '酸辣土豆丝'})
43. console.log('name：',f2.name, 'price：', f2.price, 'desc：', f2.desc )

复制代码

3、界说方法

1. /*class 类名{
2.   方法名(参数...):返回值类型{
3.     逻辑...
4.     可以通过 this 获取实例对象
5.   }
6. }*/
7. class Person {
8.   name: string
9.   constructor(name: string) {
10.     this.name = name
11.   }
12.   sayHi(name):string {
13.     console.log(`你好，${name}，我是${this.name}`)
14.     return `你好，${name}，我是${this.name}`
15.   }
16. }
17. let p: Person = new Person('张三')
18. p.sayHi('李四')

复制代码

4、静态属性和方法

类可以添加属性、方法，后续访问必要通过 类 来完成，无法通过实例利用。

1. /*class 类 {
2.   static 字段: 类型
3.   // 通常当作工具方法使用
4.   static 方法() {}
5. }
6. 类.字段
7. 类.方法()*/
9. class Car {
10.   static version: string = '1.9.0'
11.   static getRandomNumber() {
12.     return Math.random()
13.   }
14. }

复制代码

5、继承 extends 和 super 关键字

类可以通过 继承 快速获取别的一个类的 字段 和 方法

1. /*class 父类 {
2.   // 字段
3.   // 方法
4.   // 构造函数
5.   方法(){}
6. }
7. class 子类 extends 父类 {
8.   // 自己的字段（属性）
9.   // 自己的方法
10.   // 可以重写父类方法
11.   constructor() {
12.     super()
13.   }
14.   方法() {
15.     super.方法()// 调用父类方法
16.   }
17. }*/
19. class Person {
20.   name: string
21.   constructor(name:string) {
22.     this.name = name
23.   }
24.   sayHi() {
25.     console.log(`你好，我叫${this.name}`)
26.   }
27. }
28. class Student extends Person{
29.   grade:string
30.   // 子类中有额外的属性时，需要重写自己的构造函数
31.   constructor(name:string, grade:string) {
32.     // 子类的构造函数中，可以通过 super 去访问父类的属性和方法
33.     // super() 父类构造函数、super.方法名()，super.属性名
34.     // 使用 super() 调用父类的构造函数时，要将父类所需要的参数，依次传递过去
35.     super(name)
36.     // 完成自己属性的初始化
37.     this.grade = grade
38.   }
39.   // 同名方法、属性的情况下，子类的优先级高于父类
40.   sayHi():void {
41.     super.sayHi()
42.     console.log(`我是学生，今年${this.grade}`)
43.   }
44. }
45. let s: Student = new Student('张三', '三年级')
46. s.sayHi()

复制代码

6、instanceof

instanceof 运算符可以用来检测某个对象是否是某个类的实例。

1. class Person {
3. }
4. class Student extends Person {
6. }
7. class Teacher extends Person {
9. }
10. let s: Student = new Student()
11. console.log('s是否是Student的实例', s instanceof Student)        // true
12. console.log('s是否是Person的实例', s instanceof Person)        // true
13. console.log('s是否是Teacher的实例', s instanceof Teacher)        // true

复制代码

7、修饰符

类的方法和属性可以通过修饰符限制访问。
修饰符包括：readonly、private、protected、public。省略不写默以为 public。

1. class Person {
2.   // public 在程序的任何可访问该类的地方都是可见的（默认）
3.   name: string
4.   // readonly 只读，不可修改
5.   readonly desc: string = '人类'
6.   // private 私有，只能在 Person 类里面访问
7.   private drink: string = '喝酒'
8.   // protected 保护，在Person和Student中，都可以访问，其他地方不能访问
9.   protected eat: string = '吃东西'
11.   constructor(name) {
12.     this.name = name
13.     console.log(this.drink)
14.   }
15. }
16. class Student extends Person {
17.   constructor(name) {
18.     super(name)
19.     console.log(super.eat)
20.   }
21. }

复制代码

二、剩余参数和展开运算符

1、剩余参数

可以将函数或方法中一个不定数量的参数表示为一个数组。

1. function sum(num1: number,num2: number,...argArr:number[]) {
2.   let total = num1 + num2
3.   for(let i of argArr) {
4.     total += i
5.   }
6.   console.log('total', total)
7. }
8. sum(1,2)
9. sum(1,2,3,4)
10. sum(1,2,3,4,5,6)

复制代码

2、展开运算符

用于数组的平铺合并。（ArkTs 中，展开运算符只能用在数组上。）

1. let arr1 = [1,2,3]
2. let arr2 = [4,5,6]
3. let arr3 = [...arr1, arr2]
4. console.log('arr3', arr3)

复制代码

三、接口

1、继承 extends

1. interface Animal {
2.   name: string
3.   age: number
4. }
5. interface Cat extends Animal {
6.   hair: string
7. }
8. let c1: Cat = {
9.   name: '布偶',
10.   age: 2,
11.   hair: '白色'
12. }

复制代码

2、接口实现

接口实现：界说一个接口，约束 类 =》 类必要按照接口的要求，实现类的主体

1. interface IDog {
2.   name: string
3.   age: number
4.   eat: () => void
5. }
6. class Dog implements IDog {
7.   name: string
8.   age: number
9.   constructor(name:string, age:number) {
10.     this.name = name
11.     this.age = age
12.   }
13.   eat: ()=> {
14.   }
15. }

复制代码

四、泛型

泛型可以让 函数 等，与多种 差别的范例 一起工作，灵活可复用。
通俗一点就是：范例是可变的。
1、泛型函数

1. // 泛型函数：Type 是实际调用时，传过来的类型参数
2. // 第一个 Type 是需要传递的参数，第二个Type是约束参数的类型，第三个Type是约束返回值的类型
3. // function 函数名<Type>(形参:Type): Type {
4. //   return 形参
5. // }
7. function f1<T>(arg:T): T {
8.   return arg
9. }
10. console.log('str',f1<string>('abc'))
11. // 会根据传参，进行类型推断，动态配置 T 类型参数的值
12. console.log('arr',f1([1,2,3]))
13. console.log('num',f1<number>(123))

复制代码

练习

1. // 练习1:定义函数，参数是数组（数组值的类型不定），返回数组的长度
2. function f2<T>(arg: T[]): number {
3.   return arg.length
4. }
5. console.log('num',f2<number>([2,3,4]))
6. console.log('str',f2(['2','3','4']))
8. // 练习1:定义函数，参数是数组（数组值的类型不定），返回数组的最后一项
9. function f3<T>(arg: T[]): T {
10.   return arg[arg.length-1]
11. }
12. console.log('num',f3<number>([2,3,4]))
13. console.log('str',f3(['a','b','c']))

复制代码

2、泛型约束

之前的范例参数，可以传递任何范例，没有限制。
如果盼望有限制 -》 泛型约束

1. /*
2. interface 接口 {
3. }
4. function 函数<Type extends 接口> {}
5. */
7. interface Ilength {
8.   length: number
9. }
11. function fn<T extends Ilength>(params: T) {
12.   console.log('',params.length);
13. }
15. fn<string>('123')

复制代码

3、多个泛型参数

1. function func<T,T2>(param1: T, param2: T2) {
2.   console.log('参数1',param1)
3.   console.log('参数2',param2)
4. }
6. func<string, number[]>('abc', [123,22])

复制代码

4、泛型接口

界说接口的时候，团结泛型界说，就是泛型接口。

1. /*interface 接口<Type> {
2.   // 内部使用 Type
3. }*/
4. interface IdFunc<Type> {
5.   id: (value:Type) => Type,
6.   ids: () => Type[]
7. }
9. let obj: IdFunc<number> = {
10.   id(value: number) {
11.     return value
12.   },
13.   ids() {
14.     return [1,2,3]
15.   }
16. }
18. let obj2:IdFunc<string> = {
19.   id(value:string) {
20.     return value
21.   },
22.   ids() {
23.     return ['1','2']
24.   }
25. }

复制代码

5、泛型类

界说类的时候，团结泛型界说，就是泛型类。

1. class Person<T> {
2.   id: T
3.   constructor(id:T) {
4.     this.id = id
5.   }
6.   getId() {
7.     return this.id
8.   }
9. }
10. // 使用
11. let p = new Person<number>(13)

复制代码

五、模块化语法

模块化：把一个大的步伐，拆分为多少的小模块，通过特定的语法，可以进行恣意组合。
1、默认导出和导入

默认导出：指一个模块，只能默认导出 一个 值 或 对象。利用时，可以通过 as 自界说导出名称。

1. // 导出
2. export default XXX
4. //导入
5. import XXX from '模块路径'
6. import XXX as YYY from '模块路径'

复制代码

2、按需导出和导入

按需导出：指一个模块，可以按照必要，导出多个特性。

1. // modules.ets 导出
2. let name: string = '张三'
3. let age: number = 18
4. let sayHello = () => {
5.   console.log('你好')
6. }
7. export {name, age, sayHello}
9. // index.ets导入
10. import {name, age as myAge, sayHello} from '../tools/modules'

复制代码

3、全部导入

将所有的按需导入，全部导入进来。

1. // modules.ets 导出
2. let name: string = '张三'
3. let age: number = 18
4. let sayHello = () => {
5.   console.log('你好')
6. }
7. export {name, age, sayHello}
9. // index.ets导入
10. import * as result from '../tools/modules'
11. console.log('结果是：', result.name, result.age)

复制代码

六、自界说组件

由框架直接提高的称为体系组件，由开辟者界说的称为自界说组件。
语法：

1. @Component
2. struct 组件名 {
3.   build() {
4.   }
5. }

复制代码

案例：

1. @Component
2. struct MyContent {
3.   @State count: number = 0
4.   build() {
5.     Row() {
6.       Text(this.count.toString()).fontSize(26)
7.       Button('按钮')
8.         .onClick(() => {
9.           this.count ++
10.         })
11.     }
12.       .width('100%')
13.       .justifyContent(FlexAlign.Center)
14.   }
15. }
17. @Entry
18. @Component
19. struct Index {
20.   build() {
21.     Column() {
22.         MyContent()
23.         MyContent()
24.         MyContent()
25.     }
26.   }
27. }

复制代码

1、通用属性和方法

自动移组件可以通过点语法，设置通用样式、通用变乱。

1. // header.ets
2. // 组件可以使用 @Preview 预览
3. // @Preview
4. @Component
5. export struct Header {
6.   build() {
7.     Row() {
8.       Text('头部')
9.       Button('按钮')
10.     }
11.       .width(200)
12.       .height(80)
13.       .backgroundColor(Color.Pink)
14.   }
15. }
17. // index.ets
18. import { Header } from '../components/Header'
20. @Entry
21. @Component
22. struct Index {
23.   build() {
24.     Column() {
25.       Header()
26.         .width(260)
27.         .height(100)
28.         .backgroundColor(Color.Gray)
29.         .onClick(() => {
30.           AlertDialog.show({
31.             message: '点击了Header组件'
32.           })
33.         })
35.     }
36.   }
37. }

复制代码

拓展：
组件可以作为一个模块，通过按需导入导出，大概默认导入导出利用。
2、成员变量和成员函数

• 成员变量要有赋值动作，值可以是普通数据，也可以是一个函数；
  可以在父组件利用子组件时传入，而且覆盖子组件成员变量的默认值。（类似于Vue中的prop）
  如果必要状态管理，可以加上 @State 修饰符
  
• 成员函数只能在子组件内部利用，外部无法传入覆盖。没有赋值动作。
  

1. @Component
2. struct MyPanel {
3.   // 成员变量 - 可以外部传入覆盖，若需要状态管理，可以使用 @State
4.   // 成员变量 - 数据
5.   title: string = '我的订单'
6.   extra: string = '全部订单'
7.   @State count: number = 0
8.   // 成员变量 - 函数
9.   getMore = () => {
10.     AlertDialog.show({
11.       message: '获取更多'
12.     })
13.   }
14.   // 成员函数 - 不可以外部传入覆盖
15.   getContent() {
16.     AlertDialog.show({
17.       message: '查看内容'
18.     })
19.   }
20.   build() {
21.     Column() {
22.       Row() {
23.         Text(this.title)
24.           .fontSize(20)
25.         Text(this.extra)
26.           .fontSize(20)
27.           .onClick(() => {
28.             this.getMore()
29.           })
30.       }
31.         .width('100%')
32.         .justifyContent(FlexAlign.SpaceBetween)
33.       Column() {
34.         Text(this.count.toString())
35.         Button('按钮')
36.           .onClick(() => {
37.             this.count ++
38.           })
39.         Text('内容')
40.           .fontSize(20)
41.           .onClick(() => {
42.             this.getContent()
43.           })
44.       }.padding(20)
45.     }
46.       .width('100%')
47.       .height(200)
48.       .padding(20)
49.       .margin({bottom: 10})
50.       .borderRadius(10)
51.       .backgroundColor(Color.White)
52.   }
53. }
55. @Entry
56. @Component
57. struct Index {
58.   build() {
59.     Column() {
60.       MyPanel({
61.         title: '我的订单',
62.         extra: '全部订单 >',
63.         count: 10,
64.         getMore: () => {
65.           AlertDialog.show({
66.             message: '查看全部订单'
67.           })
68.         }
69.       })
70.       MyPanel({
71.         title: '小米有品众筹',
72.         extra: '7款众筹中 >',
73.         count: 20,
74.         getMore: () => {
75.           AlertDialog.show({
76.             message: '查看7款众筹'
77.           })
78.         }
79.       })
80.     }
81.     .width('100%')
82.     .height('100%')
83.     .padding(20)
84.     .backgroundColor('#ccc')
85.   }
86. }

复制代码

3、@BuilderParam 传递 UI

利用 @BuilderParam 构建函数，可以让自界说组件 允许外部传递 UI。（类似于 vue 中的插槽）

2. @Component
3. struct MyComp {
4.   // 1、定义构建函数，接收外部传入的 ui，并设置默认值
5.   @BuilderParam customerBuilder: () => void = this.defaultBuilder
6.   @Builder defaultBuilder() {
7.     Text('默认显示内容')
8.   }
9.   build() {
10.     Column() {
11.       // 2、使用 @BuilderParam 装饰的成员函数，构建函数，构建结构
12.       this.customerBuilder()
13.     }
14.   }
15. }
17. @Entry
18. @Component
19. struct Index {
20.   build() {
21.     Column() {
22.       MyComp(){
23.       // 3、传入新的结构
24.         Button('传入的显示内容')
25.       }
26.     }
27.   }
28. }

复制代码

4、多个 @BuilderParam

子组件有多个 BuilderParam，必须通过参数的方式传入。

1. @Component
2. struct MyCard {
3.   @BuilderParam hBuilder: () => void = this.hDefaultBuilder
4.   @BuilderParam cBuilder: () => void = this.cDefaultBuilder
6.   @Builder hDefaultBuilder() {
7.     Text('默认标题部分')
8.   }
9.   @Builder cDefaultBuilder() {
10.     Text('默认内容部分')
12.   }
13.   build() {
14.     Column() {
15.       Row() {
16.         this.hBuilder()
17.       }
18.       .width('100%')
19.       .padding(10)
20.       .border({width:{bottom:1},color:'#999'})
21.       Row() {
22.         this.cBuilder()
23.       }
24.       .height(80)
25.       .width('100%')
26.       .padding(10)
27.     }
28.     .borderRadius(6)
29.     .backgroundColor(Color.White)
31.   }
32. }
34. @Entry
35. @Component
36. struct Index {
37.   @Builder pHBuilder() {
38.     Text('父组件传递的标题')
39.   }
41.   @Builder pCBuilder() {
42.     Text('父组件传递的内容')
43.   }
44.   build() {
45.     Column({space:10}) {
46.       MyCard({
47.         hBuilder: this.pHBuilder,
48.         cBuilder: this.pCBuilder
49.       })
50.       MyCard()
51.     }
52.     .width('100%')
53.     .height('100%')
54.     .padding(20)
55.     .backgroundColor('#ccc')
56.   }
57. }

复制代码

七、状态管理-@state增补

状态管理：当运行时的状态变量变化，带来 UI 的重新渲染，在 ArkUI 中统称为 状态管理机制。
变量必须被装饰器@state修饰才气称为状态变量。

• string、number、boolean 可以直接监督到变化
  
• 复杂范例 object、class，可观察 自身的赋值的变化，第一层属性修改可以被监督到，嵌套对象必要对整个对象进行重新赋值
  

1. interface Car {
2.   name: string
3. }
4. interface Person {
5.   name: string
6.   car: Car
7. }
9. @Entry
10. @Component
11. struct Index {
12.   @State message:string = '你好'
13.   @State p: Person = {
14.     name: '张三',
15.     car: {
16.       name: '奥迪'
17.     }
18.   }
20.   build() {
21.     Column({space:10}) {
22.       Text(this.message)
23.       Button('修改message')
24.         .onClick(() => {
25.           this.message = '修改了message'
26.         })
28.       Text(JSON.stringify(this.p))
29.       Button('修改 obj 的name')
30.         .onClick(() => {
31.           this.p.name = '李四'
32.         })
34.       Button('修改 obj.car 的name')
35.         .onClick(() => {
36.           // 直接修改嵌套对象的属性，状态不会被检测到，页面ui不会更新
37.           // this.p.car.name = '保时捷'
38.           // 嵌套对象重新赋值，可以进行状态检测
39.           this.p.car = {
40.             name: '保时捷'
41.           }
42.           console.log(this.p.car.name)
43.         })
44.     }
45.     .width('100%')
46.     .height('100%')
47.     .padding(20)
48.     .backgroundColor('#ccc')
49.   }
50. }

复制代码

八、@Prop 父向子单向传值

@Prop装饰的变量可以和父组件创建单向的同步关系。
@Prop装饰的变量时可变的，但是变化不会同步回其父组件，子组件若要更新父组件的数据，可通过成员变量，从父组件传递一个方法给子组件。

1. @Component
2. struct Son {
3.   @Prop sCar:string = ''
4.   changeCar = (newCar:string) => {}
5.   build() {
6.     Column() {
7.       Text(`子组件--${this.sCar}`)
8.       Button('换车')
9.         .onClick(() => {
10.           this.changeCar('宝马')
11.         })
12.     }
13.       .width(200)
14.       .height(100)
15.       .backgroundColor(Color.Pink)
16.   }
17. }
19. @Entry
20. @Component
21. struct Index {
22.   @State car:string = '奔驰'
23.   build() {
24.     Column({space:10}) {
25.       Text(`父组件--${this.car}`)
26.       Button('换车').onClick(() => {
27.         this.car = this.car === '奔驰'? '保时捷' : '奔驰'
28.       })
29.       Son({
30.         sCar: this.car,
31.         changeCar: (newCar:string) => {
32.           this.car = newCar
33.         }
34.       })
35.     }
36.     .padding(50)
37.     .backgroundColor('#ccc')
38.   }
39. }

复制代码

九、@Link 双向同步

子组件通过 @Link 修饰的变量，在子组件内部修改，回同步到父组件中。

1. @Component
2. struct sonComp {
3.   @Link count:number
4.   @Link person: Person
5.   build() {
6.     Column() {
7.       Text('子组件').fontSize(30)
8.       Text(this.count.toString()).fontSize(28)
9.       Text(JSON.stringify(this.person)).fontSize(28)
10.       Button('修改数据').fontSize(24).margin({top:10})
11.         .onClick(() => {
12.           this.count --
13.           this.person.name = 'ls'
14.         })
15.     }
16.     .width(300)
17.     .height(200)
18.     .justifyContent(FlexAlign.Center)
19.     .margin({top: 60})
20.     .borderRadius(10)
21.     .backgroundColor('#acc4a0')
22.   }
23. }
25. interface Person {
26.   name: string
27.   age: number
28. }
29. @Entry
30. @Component
31. struct Index {
32.   @State count:number = 0
33.   @State person:Person = {
34.     name: 'zs',
35.     age: 18
36.   }
37.   build() {
38.     Column() {
39.       Text('父组件').fontSize(30)
40.       Text(this.count.toString()).fontSize(28)
41.       Text(JSON.stringify(this.person)).fontSize(28)
43.       Button('修改数据').fontSize(28)
44.         .onClick(() => {
45.           this.count ++
46.           this.person.name = 'ww'
47.         })
48.       sonComp({
49.         count: this.count,
50.         person: this.person
51.       })
53.     }
54.     .width('100%')
55.     .height('100%')
56.     .padding({top: 60})
57.     .backgroundColor('#ddd')
58.   }
59. }

复制代码

十、@Provide 和 @Consume 祖孙级组件传值

将数据传递给后代，和后代的数据进行双向数据绑定。
步调：
1、将父组件的状态属性利用@Provide修饰
2、后代组件将必要的属性通过@Consume修饰

2. interface Person {
3.   name: string
4.   age: number
5. }
6. @Entry
7. @Component
8. struct RootComp {
9.   @Provide count:number = 20
10.   @Provide person:Person = {
11.     name: 'aaa',
12.     age: 18
13.   }
14.   build() {
15.     Column() {
16.       Text('根组件').fontSize(30)
17.       Text(this.count.toString()).fontSize(28)
18.       Text(JSON.stringify(this.person)).fontSize(30)
19.       Button('修改数据').fontSize(28).onClick(() => {
20.         this.count ++
21.         this.person.name = 'bbb'
22.       })
23.       parentComp()
24.     }
25.     .width('100%')
26.     .height('100%')
27.     .padding({top: 60})
28.     .backgroundColor('#ddd')
29.   }
30. }
32. @Component
33. struct parentComp {
34.   build() {
35.     Column() {
36.       Text('父组件').fontSize(30)
37.       sonComp()
38.     }
39.     .width('100%')
40.     .height(500)
41.     .backgroundColor('#999')
42.     // sonComp()
43.   }
44. }
46. @Component
47. struct sonComp {
48.   @Consume count:number
49.   @Consume person:Person
50.   build() {
51.     Column() {
52.       Text('子组件').fontSize(30)
53.       Text(this.count.toString()).fontSize(30)
54.       Text(JSON.stringify(this.person)).fontSize(30)
55.       Button('修改数据').fontSize(28).onClick(() => {
56.         this.count --
57.         this.person.name = 'ccc'
58.       })
59.     }
60.     .width(300)
61.     .height(200)
62.     .justifyContent(FlexAlign.Center)
63.     .margin({top: 60})
64.     .borderRadius(10)
65.     .backgroundColor('#acc4a0')
66.   }
67. }

复制代码

十一、@Observed 和 @ObjectLink 嵌套对象数组属性变化

阐明：装饰器仅能观察到 第一层 的变化，对于多层嵌套的环境，好比数组对象等，他们的第二层属性变化是无法观察到的，这就引出了 @Observed 和 @ObjectLink 装饰器。
作用：用于在涉及嵌套对象或数组的场景中进行双向数据同步。
属性更新的逻辑：当 @Observed 装饰过的数据，属性改变时，就会监听到遍历依赖它的 @ObjectLink 包装类，通知数据更新
注意：@ObjectLink 修饰符不能用在 Entry 修饰的组件中，可以将 Entry 中对应部分，拆分为一个子组件。

1. interface IPerson {
2.   name: string
3.   age: number
4. }
5. @Observed
6. class Person {
7.   name: string
8.   age: number
10.   constructor(obj: IPerson) {
11.     this.name = obj.name
12.     this.age = obj.age
13.   }
14. }
16. @Entry
17. @Component
18. struct RootComp {
19.   @State persons: Person[] = [
20.     new Person({ name: '张三', age: 18 }),
21.     new Person({ name: '李四', age: 18 }),
22.     new Person({ name: '王五', age: 18 })
23.   ]
24.   build() {
25.     Column() {
26.       ForEach(this.persons, (item: Person, index: number) => {
27.         itemComp({
28.           item: item,
29.           addAge: () => {
30.             item.age ++
31.             // this.persons.splice(index, 1, item)
32.           }
33.         })
34.       })
35.     }
36.     .width('100%')
37.     .height('100%')
38.     .padding({top: 30,left: 10, right: 10})
39.     .backgroundColor('#ddd')
40.   }
41. }
43. @Component
44. struct itemComp {
45.   // 属性更新的逻辑：当 @Observed 装饰过的数据，属性改变时，
46.   // 就会监听到遍历依赖它的 @ObjectLink 包装类，通知数据更新
47.   // 注意：entry 组件无法直接使用 @ObjectLink ，需要包一层
48.   @ObjectLink item: Person
49.   addAge = () => {}
50.   build() {
51.     Column() {
52.       Row(){
53.         Row() {
54.           Text(`姓名：${this.item.name}`).fontSize(20)
55.           Text(`年龄：${this.item.age}`).fontSize(20)
56.         }
57.         Button('修改数据').fontSize(18)
58.           .onClick(() => {
59.             // this.addAge()
60.             this.item.age ++
61.           })
62.       }
63.       .width('100%')
64.       .height(100)
65.       .padding({left: 10, right: 10})
66.       .justifyContent(FlexAlign.SpaceBetween)
67.       .margin({bottom: 10})
68.       .borderRadius(10)
69.       .backgroundColor('#eee')
70.     }
71.   }
72. }

复制代码

十二、新建页面、路由跳转

1、新建页面

• 直接新建 page 页面（不必要手动设置页面，可直接利用）
  
• 新建 ArkTs File，然后去src/main/resources/base/profile/main_pages.json 中手动设置 页面路径
  
  
  注：页面必要用@Entry修饰。
  

2、页面跳转和退却

• router.pushUrl()：利用此方法跳转的页面，可以进行退却操作。
  

1. router.pushUrl({
2.    url: "pages/Index"
3. })

复制代码

• router.replaceUrl()：利用此方法跳转的页面，不能进行退却操作。（貌似利用 replace 会把当前页面烧毁，然后绘制新的页面）
  

1. router.replaceUrl({
2.   url: "pages/Index"
3. })

复制代码

• router.back()
  ：退却
  

1. router.back()

复制代码

3、页面栈

页面栈是用来存储步伐运行时页面的一种 数据结构，遵照先辈先出的原则。
页面栈的最大容量为 32 个页面。

• 获取页面栈长度router.getLength()
  
• 清空页面栈router.clear()
  

4、路由模式

路由提供了两种差别的跳转模式：

• Standard：无论之前是否添加过，一直添加到页面栈（默认常用）
  
• Single：如果目标页面已经存在，会将已有的最近同 url 页面移到栈顶（看环境利用）
  在跳转方法的第二个参数里设置路由模式
  

1. router.pushUrl({
2.   url: "pages/Index"
3. }, router.RouterMode.Single)
5. router.pushUrl({
6.   url: "pages/Index"
7. }, router.RouterMode.Standard)

复制代码

5、路由传参

• 页面 A 将参数以对象的形式，通过 params 属性传递
  

1. router.pushUrl({
2.   url: 'pages/Details',
3.   params: {
4.     msg: '测试信息',
5.     name: this.name
6.   }
7. })

复制代码

• 页面 B 在页面显示的声明周期内里接收并剖析参数
  

1. aboutToAppear() {
2.     // as 为类型断言，这里要把获取到的路由参数转为具体的类型，否则无法通过点语法获取值
3.     let info = router.getParams() as Info
4.     console.log(info.name)
5.   }

复制代码

十二、生命周期

页面嵌套组件时，生命周期钩子执行顺序为：
父 aboutToAppear -》子 aboutToAppear -》父 onPageShow -》父 aboutToDisappear -》子 aboutToDisappear
十三、Stage 模型

1）

AppScope/app.json5：设置应用信息，对应的图片放在 AppScope/resources/base/media 目录下。
AppScope/resources/base/element/string.json：设置设置-》应用-》app 的描述信息
好像json5中设置的信息是在对应目录下的 string.json 中，对应的资源在对应 media 目录中。

2）

src/main/resources/base/element/string.json：设置变量的key和value，在 module.json5 中通过"$string:module_desc"（$string是指 string.json 文件， 背面是指name为module_desc对应的value值）取值设置对应信息。
src/main/module.json5：abilities 设置显示信息，包括在桌面的图标和名称等。对应的图片等资源放在src/main/resources/base/media目录下。

3）UIAbility

好像就是手机上运行的 app 任务，单 UIAbility 就是一个 app 只能运行 1 个任务，多 UIAbility 就是1个 app 可以运行多个任务，好比 微信和微信小步伐

1. 同模块新建其他 ability

• 从模块 entry 中新建完 Ability 后，生成的 Ability 会放置在 ets 目录下
  
• 同时会在 entry 模块的 module.json5 的 abilities 数组中，新增这个任务的设置默认信息（可以设置图标和名字）
  
• 生成的 ets 下的 TwoAbility1.ts 中的 windowStage.loadContent() 可以修改启动页面
  
• 可以通过 module.json5 中修改 ability 的 exported、skills 设置，绝对默认显示哪个 ability
  
  
  
  
  
  
  

2.差别模块新建其他 ability

3. 同模块 Ability 拉起

从一个 Ability 中唤起另一个 Ability（同模块）
1、准备 want 作为 UIAbility 的启动参数
2、利用上下文对象 context，调用 startAbility 传入 want 启动

1. import Want from '@ohos.app.ability.Want'
2. import common from '@ohos.app.ability.common'
3. @Entry
4. @Component
5. struct Index {
6.   // 从一个 Ability 中唤起另一个 Ability（同模块）
7.   // 1、准备 want 作为 UIAbility 的启动参数
8.   // 2、利用上下文对象 context，调用 startAbility 传入 want 启动
11.   // 获取上下文对象
12.   context = getContext(this) as common.UIAbilityContext
13.   build() {
14.     Column() {
15.       Text('entryability----Index').fontSize(30).fontWeight(FontWeight.Bold)
17.       Button('唤起功能').onClick(() => {
18.         // 1、准备 want （参数信息）
19.         let wantInfo: Want = {
20.           deviceId: '', //  空表示本设备
21.           bundleName: 'com.example.myapplication', // AppScope/app.json5 中的 bundleName
22.           moduleName: 'entry', // 模块名
23.           abilityName: 'TwoAbility1', // src/main/module.json5 中的对应的 abilitie name
24.           parameters: {
25.             info: '来自 entryability'
26.           }
27.         }
28.         // 2、利用 context startAbility 调起 UIAbility
29.         this.context.startAbility(wantInfo)
30.       })
31.     }
32.   }
33. }

复制代码

4. 差别模块拉起

跟 3. 同模块 Ability 拉起 方法一样，只是必要修改 wantInfo 中的 moduleName、abilityName

1. Button('唤起不同模块的 abilitie 功能').onClick(() => {
2.   // 1、准备 want （参数信息）
3.   let wantInfo: Want = {
4.     deviceId: '', //  空表示本设备
5.     bundleName: 'com.example.myapplication', // AppScope/app.json5 中的 bundleName
6.     moduleName: 'TestModule', // 模块名
7.     abilityName: 'TestModuleAbility', // src/main/module.json5 中的对应的 abilitie name
8.     parameters: {
9.       info: '来自 TestModuleAbility'
10.     }
11.   }
12.   // 2、利用 context startAbility 调起 UIAbility
13.   this.context.startAbility(wantInfo)
14. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。