【Harmony OS 4.0】从零开始，快速上手

2019年8月份Harmony OS 1.0，
2020年9月份Harmony OS 2.0
2022年7月份Harmony OS 3.0
2023年3月份Harmony OS 4.0，不兼容 android app
  1. 快速上手

1.1 下载并安装 DevEco Studio

1.2 创建项目并初始化

   

• 项目 build init 时报错：request to http://registry.cnpmjs.org/pnpm failed, reason: getaddrinfo ENOTFOUND registry.cnpmjs.org
  
• 运行 npm install -g cnpm --registry=https://registry.npm.taobao.org，仍报错：request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired. 显示证书过期。利用的是老版本的淘宝镜像，淘宝不在维护.
  
• 设置淘宝最新的镜像源. 运行 npm install -g cnpm --registry=https://registry.npmmirror.com. 乐成
  

  1.3 创建模仿器

   

• 创建模仿器前需要先申请到场模仿器Beta活动.
  
• 若提示该账号没有权限，请先点击“Submit the application form”完成权限申请.
  

  1.4 相识项目目录：工程级目录 / 模块级目录

   

• 通过修改下面俩个文件路径设置模仿器打开的主页面
  1.1 src/main/ets/entryability/entryability.ts ⇒ windowStage.loadContent(‘test_pages/test2’)
  1.2 resources/base/profile/main_pages.json ⇒ { “src”: [‘test_pages/test2’] }，配置router路径
  

  1.5 DevEco Studio 配置 TypeScript

   

• 安装 Nodejs，配置 Nodejs 的环境变量
  
• 安装 typescript，npm install -g typescript，tsc -v 查看版本号
  
• 编译 .ts 文件的命令：tsc 文件名
  编译 .js 文件的命令：node 文件名
  

  2. TypeScript 快速入门

2.1 掌握 ts 常用根本范例

1. // 1. boolean 类型
2. let isOff = true
3. let isOn = false
5. // 2. 数字类型
6. let a: Number/number = 2
8. // 3. 字符串类型
9. let aStr：string = "hello"
11. // 4. 俩种数组类型
12. let arr1：number[] = [1, 3, 5]
13. let arr2: Array<string> = ["hello", "world"]
15. // 4.1 回顾splice用法，改变原数组，返回修改后的数组
16. let arr3 = [1, 3, 5, 7]
17. arr3.splice(2, 0, 3) // 把值3添加到下标2的地方
18. console.log(arr3) // [1, 3, 3, 5, 7]
19. arr3.splice(4, 1) // 删除下标4的值
20. console.log(arr3) // [1, 3, 3, 5]
22. // 5. 定义一个元组类型  ==>  允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
23. let arr4: [string, number]
24. arr4 = ['hello', 100]
25. arr4 = [100, 'hello'] // error demo
26. arr4 = ['hello', 100, 200] // error demo
28. // 6. 定义枚举 enum  ==>  是对javascript标准数据类型的一个补充，可以为一组数值赋予友好的名字。
29. enum Color { red, green, blue }
30. let c: Color = Color.green
32. // 7. 定义未知类型 any/Unknown  ==>  不清楚类型的变量，不希望类型检查器对这些值进行检查，直接通过编译阶段的检查。
33. let noSure: unknown/any
34. noSure = 4 // 这里4可以是任意值
36. // 8. viod  ==>  函数没有返回值
37. function myfunc(): void {
38.         // 这里不能有return
39. }
41. // 9. Null  ==> 空值，没有给它分配内存，内存中没有变量；
42. //    undefined  ==> 未定义的变量，有这个变量，但是没有定义
44. // 10. 联合类型
45. let a: string | number
46. a = 'hello'
47. a = 100

复制代码

2.2 掌握条件语句

1. // 1. if
2. // 2. if...else
3. // 3. if...else if...else
4. // 4. switch...case，用来做多条件的等于判断
5. let gender: string = 'mail'
6. switch (gender) {
7.         case 'mail': {
8.                 console.log('男')
9.                 break; // 满足条件就终止判断
10.         }
11.         case 'femail': {
12.                 console.log('女')
13.                 break;
14.         }
15.         default: { // 上面所有case条件都不满足，就会进入default
16.                 console.log('不能确定性别')
17.                 break;
18.         }
19. }

复制代码

2.3 掌握循环语句

1. // 1.
2. let i: numebr;
3. for(i = 1;i <= 10;i++) {
4.         console.log(i)
5. }
7. // 2. 只能针对集合或者是列表
8. let j: any
9. // let j: unkonwn
10. let nums: Array<number> = [12, 23, 56, 32]
11. for (j in nums) {
12.         console.log(nums[j])
13. }

复制代码

2.4 掌握函数

1. // 1. 有名函数
2. function add(x: number, y: number): void{}
3. add(10, 20)
5. // 2. 匿名函数
6. let add_Func = function(x: number, y: number): number{
7.         return x + y
8. }
9. add_Func(10, 20)
11. // 3. 可选参数的函数
12. function fn(x: number, name?: string) :void {}
13. fn(10)
15. // 4. 剩余参数 ==> 个数不限的可选参数
16. function fn(x: number, ...other: Array<any>) :void {}
17. fn(10, 'hello', 30)
19. // 5. 箭头函数  ==>  定义匿名函数的简写语法
20. let fn = (x: number, y: number) => {}

复制代码

2.5 掌握类对象 ==> public(公共的，在任何地方都一用)，private(私有的，只能在类内里用), protected(在一个包内里可以用)

   2.5.1 在 ArkTs 中，private 长处是类对象外的代码无法访问到，不允许别人在类外面随意改动它
2.5.2 在 ArkTs 中，private 必须当地初始化。

1. // 1. 定义一个Person类
2. class Person {
3.         // 私有属性
4.         private name: string
5.         private age: number
6.         // 定义构造函数
7.         constructor(name: string, age: number){
8.                 this.name = name
9.                 this.age = age
10.         }
11.         // 公共成员函数
12.         public getPersonInfo() :string {
13.                 return         `我的名字是${this.name},年龄是${this.age}`
14.         }
15. }
16. let p = new Person('张三'， 18)
17. p.getPersonInfo()
19. // 2. 继承 extends
20. // 定义一个Employee类继承Person
21. class Employee extends Person {
22.         private department: string;
23.         constructor(name: string, age: number, department: string){
24.                 // 调用父类的构造函数
25.                 super(name, age)
26.                 this.department = department
27.         }
28.         public getEmployeeInfo() :string {
29.                 return this.getPersonInfo() + `，我的工作部门是${this.department}`
30.         }
31. }
32. let emp = new Employee('王五', 26, '行政部')
33. emp.getEmployeeInfo()
34. emp.getPersonInfo()

复制代码

2.6 掌握可迭代对象 ==> 当一个对象实现了 Symbol.iterator 属性时，它是可迭代的。一些内置的范比方 Array, Map, Set, String, Int32Array, Uint32Array 等都具有可迭代性。（可以通过for…of循环遍历的对象）

迭代器都是可迭代对象
可迭代对象是迭代器的一个子集

1. // 1. for..of 语句，针对可迭代对象才能使用，i 代表其中元素，不指下标。
2. let str: string = 'sdfs'
3. for(let i of str) {
4.         console.log(i) // s d f s
5. }
7. // 2. map类型，每个元素都是由俩个组成：key，value
8. let map1 = new Map<string, number>()
9. map1.set('a', 111)
10. map1.set('b', 222)
11. map1.set('c', 333)
12. for(let j of map1) {
13.         console.log(j) // ['a', 111] ['b', 222] ['c', 333]
14.         console.log(j[1]) // 111 222 333
15. }

复制代码

2.7 模块 ==> 前端模块化

3. ArkTs/ArkUI

   

• 继承 TS 的全部特性，是 TS 的超集。
  
• ArkUI 是一套构建分布式应用界面的声明式UI开发框架，只能利用表达式。组件中不需要renturn。
  
• 装饰器：
  3.1 @Entry：标识这是个入口组件，且表示是一个独立page页面，通过router举行跳转。
  3.2 @Component：自界说组件，可举行页面渲染。
  3.3 struct TextExample{}：界说名为TextExample的结构体，代表这个组件
  3.4 build() {}：界说build方法构建UI，雷同ReactNative中的render方法，生成节点树实例。
  
• 自界说组件：
  
• 容器组件均支持子组件配置，可以实现相对复杂的多级嵌套。
  Column, Row, Flex, Stack, Grid, List 等组件都是容器组件
  
• 假如组件支持子组件配置，则需在尾随闭包 “{…}” 中为组件添加子组件的UI形貌
  
• UI形貌：
  
• 系统组件：由ArkUI直接提供的组件。
  
• 自界说组件：由开发者界说的组件。
  
• 属性方法：
  
• 事件方法：
  
• 
  
• 
  
• 
  

  3.1 配置组件的事件方法

   事件方法以 “.” 链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行。

1. // 1. 使用箭头函数配置组件的事件方法
2. Button('Click me')
3.         .onClick(() => {})
5. // 2. 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数题中的this指向当前组件
6. Button('add counter')
7.         .onClick(function(){}.bind(this))
9. // 3. 使用组件的成员函数配置组件的事件方法，⚠️组件的成员函数只能在事件方法上面定义
10. myClickHandler(): void {}
11. Button('add counter')
12.         .onClick(this.myClickHandler.bind(this))

复制代码

3.2 范例界说

3.2.1 Resource 资源引用范例

1. // @Builder 自定义构建函数时，用 :Resource 表示资源引用类型
2. @Builder function CreateIcon (icon: Resource): void {
3.   Column() {
4.     Image(icon).width(28).height(28).objectFit(ImageFit.Contain).margin(10)
5.   }
6. }

复制代码

3.2.2 Length 长度范例，用于形貌尺寸单元

1. @Prop widthValue: Length = 0

复制代码

3.2.3 ResourceStr 字符串范例，用于形貌字符串入参可以利用的范例
3.2.4 Padding 内边距范例，用于形貌组件不同方向的内边距
3.2.5 Margin
4. 容器组件

4.1 Column

   

• 是沿垂直方向布局容器
  
• 支持很多通用属性，如alignItems，justifyContent，width，height，border等
  

1. // 常用属性
2. Column({space: 5}){} // 创建一个column容器组件，设置子元素间的垂直间距为5，纵向布局元素垂直方向间距为5.
3. .alignItems(HorizontalAlign.Start)
4. .justifyContent(FlexAlign.Center)

复制代码

4.2 Row

   

• 是沿程度方向布局容器
  
• 支持很多通用属性，如alignItems，justifyContent，width，height，border等
  

1. // 常用属性
2. Row({space: 5}){} // 横向布局元素间距
3. .alignItems(VerticalAlign.Center)
4. .justifyContent(FlexAlign.Start)

复制代码

4.3 List

   

• onReachEnd 事件：列表到底末端位置时触发。
  List边沿结果为弹簧结果时，划动经过末端位置时触发一次，回弹回末端位置时再触发一次。
  

  5. 基础组件

5.1 Text

   

• Text 组件是可以显示一段文本的组件。
  

1. // 常用属性：
2. .textAlign(TextAlign.Center)
3. .fontSize(14)
4. .fontColor()
5. .textOverflow({overflow: TextOverflow.Ellipsis}) // 设置文本溢出方式为省略号
6. .maxLines(1) // 设置最大行数为1
7. .border({width: 1})
8. .lineHeight(15) // 设置行高为20
9. .padding(10)

复制代码

5.2 Image

1. // 引入项目当地 resources/base/media 路径下的图片Image($r('app.media.ic_default'))// @Builder 自定义构建函数时，用 :Resource 表示资源引用类型
2. @Builder function CreateIcon (icon: Resource): void {
3.   Column() {
4.     Image(icon).width(28).height(28).objectFit(ImageFit.Contain).margin(10)
5.   }
6. }

复制代码

5.3 ScrollBar

   

• 滚动条组件ScrollBar，用于配合可滚动组件利用，如List、Grid、Scroll
  

  6. @Component 自界说组件

   

• @Component 装饰的UI单元，可以组合多个系统组件实现UI的复用。
  
• 由开发者界说的称为自界说组件
  
• 具有以下特点
  3.1 可组合：允许开发者组合利用系统组件，及其属性和方法。
  3.2 可重用：可以被其他组件重用，并作为不同的实例在不同的父组件或容器中利用。
  3.3 数据驱动UI更新，通过状态变量的改变，来驱动UI的刷新。
  

  6.1 自界说组件通用样式

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

复制代码

6.2 实现并引用自界说组件

[code]// 自定义子组件
@Component
struct MyHelloComponent {
  @State username: string = '