HarmonyOS4.0应用开发--2.鸿蒙应用开发语言

已于 2024-04-21 23:10:31 修改
阅读量1.3k 收藏 31
点赞数 14
文章标签： harmonyos 开发语言 华为
于 2024-04-21 19:28:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42638946/article/details/138040294
版权

下面的内容来自尚硅谷，版权属于尚硅谷，这里只做参考。尚硅谷课程链接：https://www.bilibili.com/video/BV1Ti4y1s79B?p=5

2.1 概述

HarmonyOS 应用的主要开发语言是 ArkTS，它由 TypeScript（简称TS）扩展而来，在继承TypeScript语法的基础上进行了一系列优化，使开发者能够以更简洁、更自然的方式开发应用。值得注意的是，TypeScript 本身也是由另一门语言 JavaScript 扩展而来。因此三者的关系如下图所示
在这里插入图片描述

2.2 TypeScript 快速入门

2.2.1 运行环境说明

2.2.1.1 线上Playground

TypeScript提供了一个线上的 Playground 供练习使用，地址为https://www.typescriptlang.org/zh/play。
在这里插入图片描述

2.2.1.2 本地运行环境

除去线上的运行环境，我们也可以在本地搭建一个 TS 的运行环境。

  1. 安装 VSCode 编辑器
    VSCode是一款轻量级、开源且功能丰富的集成开发环境（IDE），支持多种编程语言，具有强大的插件系统。下载地址为：https://code.visualstudio.com/
  2. 安装Code Runner 插件
    Code Runner是一款在VSCode中使用的插件，它提供了简便的代码执行功能，支持多种编程语言，使开发者能够快速运行和调试代码片段。
    在这里插入图片描述
  3. 安装ts-node
    ts-node是一个 TypeScript 的运行环境，它允许我们直接运行 TypeScript 代码。ts-node的安装和运行依赖于Node.js环境，因此在安装ts-node之前，我们需要准备好Node.js环境。
    准备Node.js环境需要完成以下两步操作
    （1）安装Node.js
    由于前边在部署DevEco Studio时，已经下载并安装了Node.js，因此这一步可以略过。
    （2）配置环境变量
    为了方便在终端执行Node.js相关的命令，我们需要将Node.js的安装目录加入到Path环境变量下，具体操作如下
    首先在DevEco Studio的设置界面查看Node.js的安装目录
    在这里插入图片描述
    然后打开环境变量配置面板，按下Win+R，唤起运行窗口，之后运行命令sysdm.cpl
    在这里插入图片描述
    之后点击高级选项卡，并点击环境变量
    在这里插入图片描述
    然后在系统变量中选中Path，并点击编辑
    在这里插入图片描述
    之后点击新建，并填入Node.js的安装目录，完成后点击确定。
    在这里插入图片描述
    在配置完Node.js环境后，便可在终端执行以下命令来安装ts-node了。
npm install -g ts-node

注：完成后需要重新启动VSCode，另其重新加载环境变量和相关依赖。

  1. 编写程序并运行
    在完成上述环境的准备后，就可以编写Typescript程序并运行了，具体操作如下
    首先在合适的位置创建一个工程目录，例如D:\workspace\hello-ts，然后使用VSCode打开目录
    在这里插入图片描述
    之后创建Typescript文件，点击New File
    在这里插入图片描述
    注意，文件的后缀为.ts
    在这里插入图片描述
    之后就可以编写Typescript代码并运行了
    在这里插入图片描述

2.2.2 声明

2.2.2.1 变量生命

在这里插入图片描述

2.2.2.2 常量声明

let用于声明变量，而const用于声明常量，两者的区别是变量在赋值后可以修改，而常量在赋值后便不能再修改。

const b:number = 200;

2.2.2.3 类型推断

如果一个变量或常量的声明包含了初始值，TS 便可以根据初始值进行类型推断，此时我们就可以不显式指定其类型，例如

let c = 60;
console.log(typeof c); //number

2.2.3 常用数据类型

2.2.3.1 number

number表示数字，包括整数和浮点数，例如： 100、-33 、2.5、-3.9

let a :number = 100
let b :number = -33
let c :number = 2.5
let d :number = -3.9

2.2.3.2 string

string表示字符串，例如： 你好、hello

let a:string = '你好'
let b:string = "hello"

2.2.3.3 boolean

boolean表示布尔值，可选值为：true、false

let isOpen:boolean = true
let isDone:boolean = false

2.2.3.4 数组

数组类型定义由两部分组成，元素类型[]，例如number[]表示数字数组，string[]表示字符串数组，数组类型的变量可由数组字面量——[item1,item2,item3]进行初始化。

let a: number[] = []
let b: string[] = ['你好', 'hello']

2.2.3.5 对象

在TS中，对象（object）是一种一系列由属性名称和属性值组成的数据结构，例如姓名:‘张三’, 年龄:10, 性别:‘男’。对象类型的声明需要包含所有属性的名称及类型，例如{name: string, age: number, gender: string}，对象类型的变量可以通过对象字面量——{name:‘张三’, age:10, gender:‘男’}进行初始化。

let person: {name:string, age:number, gender:string} = {name:'张三', age:10, gender:'男'};

2.2.4 函数

2.2.4.1 函数声明语法

声明函数的基础语法如下
在这里插入图片描述

2.2.4.2 参数详解

2.2.4.2.1 特殊语法
  • 可选参数
    可选参数通过参数名后的 ? 进行标识，如以下案例中的 gender? 参数。
function getPersonInfo(name: string, age: number, gender?: string): string {
    if (gender === undefined) {
        gender = '未知'
    }
    return `name:${name},age:${age},gender:${gender}`;
}

let p1 = getPersonInfo('zhagnsan', 10, '男')
let p2 = getPersonInfo('lisi', 15);
console.log(p1);
console.log(p2);

注：调用函数时，未传递可选参数，则该参数的值为undefined。

  • 默认参数
    可在函数的参数列表为参数指定默认值，如以下案例中的gender: string='未知’参数。
function getPersonInfo(name: string, age: number, gender: string='未知'): string {
    return `name:${name},age:${age},gender:${gender}`;
}

let p1 = getPersonInfo('zhagnsan', 10, '男')
let p2 = getPersonInfo('lisi', 15);
console.log(p1);
console.log(p2);
2.2.4.2.2 特殊类型
  • 联合类型
    一个函数可能用于处理不同类型的值，这种情况可以使用联合类型，例如以下案例中的message: number | string
function printNumberOrString(message: number | string) {
  console.log(message)
}

printNumberOrString('a')
printNumberOrString(1)
  • 任意类型
    若函数需要处理任意类型的值，则可以使用any类型，例如以下案例中的message: any
function print(message:any) {
  console.log(message)
}

print('a')
print(1)
print(true)

2.2.4.3 返回值详解

2.2.4.3.1 特殊类型

若函数没有返回值，则可以使用void作为返回值类型，其含义为空。

function test(): void {
    console.log('hello');
}
2.2.4.3.2 类型推断

函数的返回值类型可根据函数内容推断出来，因此可以省略不写。

function test() {
    console.log('hello');
}

function sum(a: number, b: number) {
    return a + b;
}

2.2.4.4 函数声明特殊用法

  • 匿名函数
    匿名函数的语法结构简洁，特别适用于简单且仅需一次性使用的场景。
let numbers: number[] = [1, 2, 3, 4, 5]
numbers.forEach(function (number) {
    console.log(number);
})

注意：匿名函数能够根据上下文推断出参数类型，因此参数类型可以省略。

  • 箭头函数
    匿名函数的语法还可以进一步的简化，只保留参数列表和函数体两个核心部分，两者用=>符号连接。
let numbers: number[] = [1, 2, 3, 4, 5]
numbers.forEach((num) => { console.log(num) })

2.2.5 类（class）

2.2.5.1 概述

类（class）是面向对象编程语言中的一个重要概念。
面向对象编程（Object-Oriented Programming，简称OOP）是一种编程范式，其核心理念在于将程序中的数据与操作数据的方法有机地组织成对象，从而使程序结构更加模块化和易于理解。通过对象之间的协同合作，实现更为复杂的程序功能。
类（class）是对象的蓝图或模板，它定义了对象的属性（数据）和行为（方法）。通过类可以创建多个具有相似结构和行为的对象。例如定义一个 Person 类，其对象可以有 张三、李四 等等。

2.2.5.2 语法说明

2.2.5.2.1 类的定义

定义类的语法如下图所示
在这里插入图片描述
代码如下：

class Person {
    id: number;
    name: string;
    age: number = 18;

    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }

    introduce(): string {
        return `hello,I am ${this.name},and I am ${this.age} years old`
    }
}
2.2.5.2.2 对象创建
  • 语法
    创建对象的关键字为new，具体语法如下
let person = new Person(1,'zhangsan');
  • 对象属性的访问
console.log(person.name); //读
person.name = 'lisi'; //写
console.log(person.name);
  • 对象方法的调用
    对象创建后，便可通过对象调用类中声明的方法，如下
let intro = person.introduce();
console.log(intro);
2.2.5.2.3 静态成员

Typescript 中的类中可以包含静态成员（静态属性和静态方法），静态成员隶属于类本身，而不属于某个对象实例。静态成员通用用于定义一些常量，或者工具方法。

  • 声明静态成员
    定义静态成员需要使用 static 关键字。
class Constants{
    static count:number=1;
}

class Utils{
    static toLowerCase(str:string){
        return str.toLowerCase();
    }
}

console.log(Constants.count);
console.log(Utils.toLowerCase('Hello World'));
  • 使用静态成员
    静态成员无需通过对象实例访问，直接通过类本身访问即可。
console.log(Constants.count);
console.log(Utils.toLowerCase('Hello World'));

2.2.5.3 继承

继承是面向对象编程中的重要机制，允许一个类（子类或派生类）继承另一个类（父类或基类）的属性和方法。子类可以直接使用父类的特性，并根据需要添加新的特性或覆盖现有的特性。这种机制赋予面向对象程序良好的扩展性。
下面通过一个例子演示继承的特性

class Student extends Person {
    classNumber: string;
    constructor(id: number, name: string, classNumber: string) {
        super(id, name);
        this.classNumber = classNumber;
    }

    introduce(): string {
        return super.introduce()+`, and I am a student`;
    }
}

let student = new Student(1,'xiaoming','三年二班');
console.log(student.introduce());

注意：

  • 类的继承需要使用关键字extends
  • 子类构造器中需使用super()调用父类构造器对继承自父类的属性进行初始化。
  • 在子类中可以使用this关键字访问继承自父类的属性和方法。
  • 在子类中可以使用super关键字访问父类定义的方法。

2.2.5.4 访问修饰符

访问修饰符（Access Modifiers）用于控制类成员（属性、方法等）的可访问性。TypeScript提供了三种访问修饰符，分别是private、protected和public。

class Person {
    private id: number;
    protected name: string;
    public age: number;

    constructor(id: number, name: string, age: number) {
        this.id = id;
        this.name = name;
        this.age = age;
    }
}

class Student extends Person {
    
}

说明：

  • private 修饰的属性或方法是私有的，只能在声明它的类中的被访问。
  • protected 修饰的属性或方法是受保护的，只能在声明它的类和其子类中被访问。
  • public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的。

2.2.6 接口（interface）

2.2.6.1 概述

接口（interface）是面向对象编程中的另一个重要概念。接口通常会作为一种契约或规范让类（class）去遵守，确保类实现某些特定的行为或功能。

2.2.6.2 语法说明

  • 接口定义
    接口使用 interface 关键字定义，通常情况下，接口中只会包含属性和方法的声明，而不包含具体的实现细节，具体的细节由其实现类完成。
interface Person {
    id: number;
    name: string;
    age: number;
  
    introduce(): void;
}
  • 接口实现
    接口的实现需要用到 implements 关键字，实现类中，需要包含接口属性的赋值逻辑，以及接口方法的实现逻辑。
class Student implements Person {
    id: number;
    name: string;
    age: number;

    constructor(id: number, name: string, age: number) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    introduce(): void {
        console.log('Hello,I am a student');
    }
}

2.2.6.3 多态

多态是面相对象编程中的一个重要概念，它可以使同一类型的对象具有不同的行为。下面我们通过一个具体的案例来体会多态这一概念
首先，再创建一个 Person 接口的实现类 Teacher，如下

class Teacher implements Person {
    id: number;
    name: string;
    age: number;

    constructor(id: number, name: string, age: number) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    introduce(): void {
        console.log('Hello,I am a teacher');
    }
}

然后分别创建一个 Student 对象和一个 Teacher 对象，注意两个对象的类型均可以设置Person，如下

let p1: Person = new Student(1, 'zhangsan', 17);
let p2: Person = new Teacher(2, 'lisi', 35);

最后分别调用 p1 和 p2 的 introduce() 方法，你会发现，同样是 Person 类型的两个对象，调用同一个 introduce() 方法时，表现出了不同的行为，这就是多态。

p1.introduce();//Hello,I am a student
p2.introduce();//Hello,I am a teacher

2.2.6.4 接口的作用

在传统的面向对象编程的场景中，接口主要用于设计和组织代码，使代码更加容易扩展和维护。下面举例说明。
假如现在需要实现一个订单支付系统，按照面向对象编程的习惯，首先需要定义一个订单类（Order），如下

class Order {
    totalAmount: number;

    constructor(totalAmount: number) {
        this.totalAmount = totalAmount;
    }

    pay() {
        console.log(`AliPay:${this.totalAmount}`);
    }
}

很容易预想到，这个系统将来可能需要支持其他的支付方式，为了方便代码支持新的支付方式，我们可以对代码进行如下改造。
首先定义一个支付策略的接口，接口中声明一个 pay 方法，用来规范实现类必须实现支付逻辑。

interface PaymentStrategy {
    pay(amount: number): void;
}

然后在订单类中增加一个 PaymentStrategy 的属性，并且在订单类中的 pay 方法中调用 PaymentStrategy 的 pay 方法，如下

class Order {
    totalAmount: number;
    paymentStrategy: PaymentStrategy;

    constructor(totalAmount: number, paymentStrategy: PaymentStrategy) {
        this.totalAmount = totalAmount;
        this.paymentStrategy = paymentStrategy;
    }

    pay() {
        this.paymentStrategy.pay(this.totalAmount);
    }
}

这样改造完之后，就可以很容易的在不改变现有代码的情况下，支持新的支付方式了。
比如现在需要支持 AliPay，那我们就可以创建 AliPay 这个类（class）并实现（implement）PaymentStrategy 这个接口，如下

class AliPay implements PaymentStrategy {
    pay(amount: number): void {
        console.log(`AliPay:${amount}`);
    }
}

这样一来，之后创建的订单就可以使用 AliPay 这个支付方式了。

let order = new Order(1000,new AliPay());
order.pay();

2.2.6.5 TS中的接口的特殊性

TypeScript 中的接口是一个非常灵活的概念，除了用作类的规范之外，也常用于直接描述对象的类型，例如，现有一个变量的定义如下

let person: {name:string, age:number, gender:string} = {name:'张三', age:10, gender:'男'};

可以看到变量的值为一个一般对象，变量的类型为 {name:string, age:number, gender:string}，此时就可以声明一个接口来描述该对象的类型，如下

interface Person {
    name: string;
    age: number;
    gender: string;
}

let person: Person = {name:'张三', age:10, gender:'男'};

2.2.7 枚举

2.2.7.1 概述

枚举（Enumeration）是编程语言中常见的一种数据类型，其主要功能是定义一组有限的选项，例如，方向（上、下、左、右）或季节（春、夏、秋、冬）等概念都可以使用枚举类型定义。

2.2.7.2 语法说明

  • 枚举定义
    枚举的定义需使用 enum 关键字，如下
enum Season {
    SPRING,
    SUMMER,
    AUTUMN,
    WINTER
}
  • 枚举使用
    枚举的使用记住两个原则即可
    ○ 枚举值的访问
    像访问对象属性一样访问枚举值，例如 Season.SPRING
    ○ 枚举值的类型
    枚举值的类型为 enum 的名称，例如 Season.SPRING 和 Season.SUMMER 等值的类型都是 Season
let spring:Season = Season.SPRING;
  • 使用场景
    现需要编写一个函数 move，其功能是根据输入的方向（上、下、左、右）进行移动，此时就可以先使用枚举定义好所有可能的输入选项，如下
enum Direction {
    UP,
    BOTTOM,
    LEFT,
    RIGHT
}

move函数的实现如下

function move(direction: Direction) {
    if(direction===Direction.UP){
        console.log('向上移动');
    }else if(direction===Direction.BOTTOM){
        console.log('向下移动');
    }else if(direction===Direction.LEFT){
        console.log('向左移动');
    }else{
        console.log('向右移动');
    }
}

move(Direction.UP);

2.2.7.3 赋值

在TypeScript 中，枚举实际上是一个对象，而每个枚举值都是该对象的一个属性，并且每个属性都有具体的值，属性值只支持两种类型——数字或字符串。
默认情况下，每个属性的值都是数字，并且从 0 开始递增，例如上述案例中的 Direction 枚举中，Direction.UP 的值为0，Direction.BOTTOM 的值为1，依次类推，具体如下

console.log(Direction.UP) //0
console.log(Direction.BOTTOM) //1
console.log(Direction.LEFT) //2
console.log(Direction.RIGHT) //3

除了使用默认的数字作为属性的值，我们还能手动为每个属性赋值，例如

enum Direction {
    UP = 1,
    BOTTOM = 2,
    LEFT = 3,
    RIGHT = 4
}

console.log(Direction.UP) //1
console.log(Direction.BOTTOM) //2
console.log(Direction.LEFT) //3
console.log(Direction.RIGHT) //4

再例如

enum Direction {
    UP = 'up',
    BOTTOM = 'bottom',
    LEFT = 'left',
    RIGHT = 'right'
}

console.log(Direction.UP) //up
console.log(Direction.BOTTOM) //bottom
console.log(Direction.LEFT) //left
console.log(Direction.RIGHT) //right

通过为枚举属性赋值，可以赋予枚举属性一些更有意义的信息，例如以下枚举

enum Color {
    Red = 0xFF0000,
    Green = 0x00FF00,
    Blue = 0x0000FF
}

enum FontSize {
    Small = 12,
    Medium = 16,
    Large = 20,
    ExtraLarge = 24
}

2.2.8 模块化

2.2.8.1 概述

模块化是指将复杂的程序拆解为多个独立的文件单元，每个文件被称为一个模块。在 TypeScript 中，默认情况下，每个模块都拥有自己的作用域，这意味着在一个模块中声明的任何内容（如变量、函数、类等）在该模块外部是不可见的。为了在一个模块中使用其他模块的内容，必须对这些内容进行导入、导出。
在这里插入图片描述

2.2.8.2 语法说明

  • 导出
    导出须使用 export 关键字，语法如下
export function hello() {
    console.log('hello module A');
}

export const str = 'hello world';

const num = 1;
  • 导入
import { hello, str } from './moduleA';

hello();
console.log(str);

2.2.8.3 避免命名冲突

若多个模块中具有命名相同的变量、函数等内容，将这些内容导入到同一模块下就会出现命名冲突。例如，在上述案例的基础上，又增加了一个 moduleC，内容如下

export function hello() {
    console.log('hello module C');
}

export const str = 'module C';

moduleB 同时引入 moduleA 和 moduleC 的内容，如下，显然就会出命名冲突

import { hello, str } from "./moduleA";
import { hello, str } from "./moduleC";

hello() //?
console.log(str); //？

有多种方式可以用来解决命名冲突，下面逐一介绍

  • 导入重命名
    语法如下：
import { hello as helloFromA, str as strFromA } from "./moduleA";
import { hello as helloFromC, str as strFromC } from "./moduleC";

helloFromA();
console.log(strFromA);

helloFromC();
console.log(strFromC);
  • 创建模块对象
    上述导入重命名的方式能够很好的解决命名冲突的问题，但是当冲突内容较多时，这种写法会比较冗长。除了导入重命名外，还可以将某个模块的内容统一导入到一个模块对象上，这样就能简洁有效的解决命名冲突的问题了，具体语法如下
import * as A from "./moduleA";
import * as C from "./moduleC";

A.hello();
console.log(A.str);

C.hello();
console.log(C.str);

2.2.8.4 默认导入导出

除了上述导入导出的语法之外，还有一种语法，叫做默认导入导出，这种语法相对简洁一些。

  • 默认导出
    默认导出允许一个模块指定一个（最多一个）默认的导出项，语法如下
export default function hello(){
    console.log('moduleA');
}
  • 默认导入

由于每个模块最多有一个默认导出，因此默认导入无需关注导入项的原始名称，并且无需使用{}。

import helloFromA from "./moduleA";

由于默认导入时无需关注导入项的名称，所以默认导出支持匿名内容，比如匿名函数，语法如下

export default function () {
    console.log('moduleB');
}

2.3 ArkTS 快速入门

ArkTS 在继承了Typescript语法的基础上，主要扩展了声明式UI开发相关的能力。

2.3.1 声明式UI

声明式UI是一种编写用户界面的范式。下面通过一个具体案例来学习这种开发范式，假如现在要实现如下界面
在这里插入图片描述

2.3.1.1 定义界面状态

按照声明式UI的开发范式，首先需要分析和定义页面的各种状态，并声明相应的状态变量用于表示不同的状态。
当前案例中，界面共有两个状态，分别是开灯和关灯状态，所以我们可以使用一个boolean类型的变量来表示这两个状态，true表示开灯，false表示关灯。如下：

@State isOn: boolean = false;

说明：@State用于声明该变量为状态变量。

2.3.1.2 描述界面显示效果

在分析完界面状态后，我们需要准确的描述界面在不同状态下的显示效果。
在当前案例中，具体逻辑如下图所示
在这里插入图片描述

2.3.1.3 改变状态

在明确了界面在不同状态下的显示效果后，我们只需修改状态变量的值，就能触发界面的更新。
在当前案例中，若我们将isOn的值改为true，那么界面上就会显示开灯的图片，否则就会显示关灯的图片。
为了实现点击按钮开/关灯的效果，我们可以为按钮绑定点击事件：

  • 当用户点击开灯按钮时，我们就将isOn的值改为true。
  • 当用于点击关灯按钮时，我们就将isOn的值改为false。
    在这里插入图片描述

2.3.1.4 总结

以上就是声明式UI开发范式的大致流程，下面为大家总结一下声明式UI的核心思想

  • 声明式描述
    开发者只需描述在界面在不同状态下要呈现的最终效果，而无需关注界面变化的具体过程。
    在这里插入图片描述
  • 状态数据驱动界面更新
    开发者只需修改状态变量的值，界面就会自动更新。
    在这里插入图片描述

2.3.2 组件化

在鸿蒙开发中，组件是构成界面的最小单元，我们所看到的界面，都是由众多组件组合而成的，所以编写界面其实就是组合组件的过程，ArkTS提供了很多的内置组件，例如：Text、Button、Image等等；并且ArkTS还支持自定义组件，让开发者可根据具体需求自定义组件中的内容。
在这里插入图片描述

2.3.3 入门案例

2.3.3.1 案例效果

案例的最终效果如下图所示
在这里插入图片描述

2.3.3.2 完整代码

@Entry
@Component
struct LightPage {
  @State isOn: boolean = false;

  build() {
    Column({ space: 20 }) {
      if (this.isOn) {
        Image('pages/helloworld/light/solution/images/img_light.png')
          .height(300)
          .width(300)
          .borderRadius(20)
      } else {
        Image('pages/helloworld/light/solution/images/img_dark.png')
          .height(300)
          .width(300)
          .borderRadius(20)
      }
      Row({ space: 50 }) {
        Button('关灯')
          .onClick(() => {
            this.isOn = false
          })
        Button('开灯')
          .onClick(() => {
            this.isOn = true;
          })
      }
    }
    .height('100%')
      .width('100%')
      .justifyContent(FlexAlign.Center)
  }
}

2.3.4 语法说明

2.3.4.1 声明组件

下面通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法，案例的最终效果如下
在这里插入图片描述
声明组件的完整语法如下图所示
在这里插入图片描述
各部分语法说明如下

  • 组件参数
    如果组件的定义包含参数，可在组件名称后面的()中配置相应参数。各组件支持的参数，可查看 API 文档，查看方式如下
    ○ 首先将鼠标在相应组件悬停
    在这里插入图片描述
    ○ 点击Show in API Reference，就会弹出 API 文档
    在这里插入图片描述
  • 子组件
    如果组件支持子组件配置，可在 () 后的 {} 中添加子组件，若不支持子组件，则不需要写 {}。
  • 属性方法
    属性方法用于配置组件的样式和其他属性，可以在组件声明的末尾进行链式调用。各组件支持的属性可查看 API 文档，除去每个组件的专有属性，还有各组件都能配置的通用属性，通用属性也可通过 API 文档查看。
    在这里插入图片描述
  • 事件方法
    事件方法用于为组件绑定交互事件，可以在组件声明的末尾进行链式调用。各组件的支持的事件可查看 API 文档，除去每个组件的专有事件，还有各组件都支持的通用事件，通用事件也可通过 API 文档查看。
    在这里插入图片描述

2.3.4.2 自定义组件

除去系统预置的组件外，ArkTS 还支持自定义组件。使用自定义组件，可使代码的结构更加清晰，并且能提高代码的复用性。

2.3.4.2.1 语法说明

自定义组件的语法如下图所示
在这里插入图片描述
各部分语法说明如下：

  • struct关键字
    struct是ArkTS新增的用于自定义组件或者自定义弹窗的关键字。其声明的数据结构和TS中的类十分相似，可包含属性和方法。
  • build方法
    build()方法用于声明自定义组件的UI结构。
  • 组件属性
    组件属性可用作自定义组件的参数，使得自定义组件更为通用。
  • @Compnent装饰器
    @Component装饰器用于装饰struct关键字声明的数据结构。struct被@Component装饰后才具备组件化的能力。
    注： 装饰器是Typescript中的一种特殊语法，常用于装饰类、方法、属性，用于修改或扩展其原有的行为。
    在学完自定义组件的语法之后，我们会发现前文案例中的每个页面实际上都是一个自定义组件。但是和自定义组件的语法相比，前边的每个案例还会多出一个@Entry装饰器，那@Entry的作用又是啥呢？
    在鸿蒙应用中，每个页面都是由一些列组件组合而成的，并且这些组件都是逐层嵌套的，因此这些组件最终形成了一个组件树的结构，如下图所示
    在这里插入图片描述
    我们前边所编写的每个页面就相当于是组件树的根节点，而@Entry装饰器的作用就是标识该组件为组件树的根节点，也就是一个页面的入口组件。
2.3.4.2.2 案例实操

现在需要对前文的开/关灯的案例做出如下改造，由于两个按钮的结构十分相似，所以可考虑自定义一个按钮组件，然后进行复用。
在这里插入图片描述

@Entry
@Component
struct HelloWorldPage {
    @State isOn: boolean = false;

    build() {
        Column({ space: 20 }) {
            if (this.isOn) {
                Image('pages/helloworld/custom/solution/images/img_light.png')
                    .height(300)
                    .width(300)
                    .borderRadius(20)
            } else {
                Image('pages/helloworld/custom/solution/images/img_dark.png')
                    .height(300)
                    .width(300)
                    .borderRadius(20)
            }
            Row({ space: 50 }) {
                SwitchButton({ color: Color.Red })
                    .onClick(() => {
                        this.isOn = false
                    })
                SwitchButton({ color: Color.Green })
                    .onClick(() => {
                        this.isOn = true;
                    })
            }
        }
        .height('100%')
        .width('100%')
        .justifyContent(FlexAlign.Center)
    }
}

@Component
struct SwitchButton {
    color: Color = Color.Blue;

    build() {
        Button({ type: ButtonType.Circle }) {
            Image('pages/helloworld/custom/solution/images/icon_switch.png')
                .width(30)
                .width(30)
        }.width(50)
        .height(50)
        .backgroundColor(this.color)
    }
}

2.3.4.3 渲染控制

2.3.4.3.1 条件渲染

概述
条件渲染可根据应用的不同状态渲染不同的UI界面，例如前文的开/关灯案例，以及以下的播放/暂停案例，均可使用条件渲染实现。

语法说明
条件渲染的语法如下

if (...){
  //UI描述 
}else if (...){
  //UI描述
}else{
  //UI描述
}
2.3.4.3.1 循环渲染

概述
循环渲染可使用ForEach语句基于一个数组来快速渲染一个组件列表，例如以下案例中的选项列表就可通过循环渲染实现。
在这里插入图片描述
代码如下：

@Entry
@Component
struct FruitPage {
  @State options: string[] = ["苹果", "桃子", "香蕉", "橘子"];
  @State answer: string = "____?";

  build() {
    Column({ space: 20 }) {

      Row() {
        Text("你最喜欢的水果是")
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Text(this.answer)
          .fontSize(25)
          .fontColor(Color.Green)
      }

      ForEach(this.options, (item: string) => {
        Button(item)
          .width(100)
          .backgroundColor(Color.Green)
          .onClick(() => {
            this.answer = item;
          })
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

语法说明
ForEach循环渲染的语法如下

ForEach(
  arr: any[], 
  itemGenerator: (item: any, index?: number) => void,
  keyGenerator?: (item: any, index?: number) => string
)

各参数的含义如下

  • arr

需要进行循环渲染的数据源，必须为数组类型，例如上述案例中的

@State options: string[] = ["苹果", "桃子", "香蕉", "橘子"];
  • itemGenerator

组件生成函数，用于为arr数组中的每个元素创建对应的组件。该函数可接收两个参数，分别是
○ item：arr数组中的数据项
○ index（可选）：arr数组中的数据项的索引
例如上述案例中的

(item: string) => {
        Button(item)
          .width(100)
          .backgroundColor(Color.Green)
          .onClick(() => {
            this.answer = item;
          })
      }
  • keyGenerator（可选）：

key生成函数，用于为arr数组中的每个数据项生成唯一的key。
key的作用:
ForEach在数组发生变化（修改数组元素或者向数组增加或删除元素）时，需要重新渲染组件列表，在重新渲染时，它会尽量复用原来的组件对象，而不是为每个元素都重新创建组件对象。key的作用就是辅助ForEach完成组件对象的复用。
具体逻辑如下：
ForEach在进行初次渲染时，会使用keyGenerator为数组中的每个元素生成一个唯一的key，并将key作为组件对象的标识。当数组发生变化导致ForEach需要重新渲染时，ForEach会再次使用keyGenerator为每个元素重新生成一遍key，然后ForEach会检查新生成的key在上次渲染时是否已经存在，若存在，ForEach就会认为这个key对应的数组元素没有发生变化，那它就会直接复用这个key所对应的组件对象；若不存在，ForEach就会认为这个key对应的元素发生了变化，或者该元素为新增元素，此时，就会为该元素重新创建一个组件对象。
开发者可以通过keyGenerator函数自定义key的生成规则。如果开发者没有定义keyGenerator函数，则系统会使用默认的key生成函数，即

(item: any, index: number) => { return index + '__' + JSON.stringify(item); }

在某些情况下默认的key生成函数，会导致界面渲染效率低下，此时可考虑通过keyGenerator函数自定义生成逻辑，例如如下场景
状态变量数组定义如下

@State arr:string[] = ["zhangsan","lisi","wangwu"]

ForEach语句如下

Column(){
  ForEach(this.arr,(item)=>{ Text(item) })
}

初次渲染时，每个元素对应的key依次为0__“zhagnsan”、1__“lisi”、2__“wangwu”。若现有一个操作是向arr数组头部插入新的元素，例如新元素为wanger，按照默认的key生成逻辑，插入新元素之后每个元素的key就会依次变为0__“wanger”、1__“zhagnsan”、2__“lisi”、3__“wangwu”，也就是所有元素的key都发生了变化，因此UI界面更新时需要为每个元素都重新创建组件对象，即便原有的元素没有发生变化也无法复用之前的组件，这样一来就导致了性能浪费。此时我们就可以考虑提供第三个参数，如下

Column(){
  ForEach(this.arr, (item)=>{ Text(item) }, item => JSON.stringify(item))
}
你好世界wxx
关注
鸿蒙HarmonyOS应用开发 | 深入解析 HarmonyOS Next 中的仓颉语言
一键难忘的博客
09-29 2994
仓颉语言是专为 HarmonyOS Next 设计的编程语言，它具有简洁、高效、易读易写等特点。仓颉语言借鉴了多种现代编程语言的优点，同时结合了 HarmonyOS Next 的特性，使得开发者能够更加高效地开发出高质量的应用。仓颉语言在 HarmonyOS Next 开发中具有重要的地位，它的简洁性、高效性和与 HarmonyOS Next 的深度融合，使得开发者能够更加轻松地开发出高质量的应用。随着 HarmonyOS Next 的不断发展，仓颉语言也将不断完善和壮大，为开发者带来更多的惊喜和便利。
鸿蒙开发语言_ArkTS开发语言体验_TypeScript语言环境搭建_TS声明和数据类型---HarmonyOS4.0+鸿蒙NEXT工作笔记003
添柴程序猿的专栏
04-19 578
build() 下面有个Row,然后再下面有个Column方法,然后,里面就是具体的内容了,首先就是显示了一下Text,指定了fontSize和fontWeight对吧然后。就是因为有个.width之前写了100,把宽度占满了,我们写上百分之50,就可以了.然后如果我们把column这个不分复制一份可以看到,预期,左右,显示两个部分对吧,然后如果我们复制一份Text这里可以看到右边就出现了两个内容了,很容易理解,TypeScript是在JavaScript的基础上做出来的,然后,然后我们再来看,实际上。
鸿蒙应用开发（第二章：开发语言）
moments的博客
01-26 7574
HarmonyOS 应用的主要开发语言是 ArkTS，它由 TypeScript（简称TS）扩展而来，在继承TypeScript语法的基础上进行了一系列优化，使开发者能够以更简洁、更自然的方式开发应用。值得注意的是，TypeScript 本身也是由另一门语言 JavaScript 扩展而来。因此三者的关系如下图所示类（class）是面向对象编程语言中的一个重要概念。
鸿蒙(HarmonyOS)--编程语言-ArkTS 语言基础
最新发布
hqy1989的博客
09-16 2809
ArkTS是HarmonyOS生态的应用开发语言。ArkTS和 TS 以及 JS 的关系。
typescript是框架吗,typescript前端框架
神器榜
09-11 615
age:number;主要特征：流行度：根据GitHubOctoverse数据显示，Dart是2019年增长最快的编程语言，去年它的流行度增长了五倍：根据TIOBE指数显示，Dart排名第23，仅用了4年时间就超过了很多其他的现代编程语言：根据StackOverflow的调查，Dart在最受欢迎的编程语言中排名第12：受Flutter的影响，Google的趋势表明，在过去的两年中，Dart的热度急剧上升：主要用途：主要竞争对手：Julia本文提及的大多数编程语言都是由大型公司开发的，但Julia是个例外。
用typescript撸个前端框架InDiv
weixin_33860553的博客
10-12 222
有个同事跟我说：需求还是不够多，都有时间造轮子了。。。 前言 这个轮子从18年4月22造到18年10月12日，本来就是看了一个文章讲前端框架的路由实现原理之后，想试着撸一个路由试试，结果越写越多，到最后就莫名其妙变成了个mvvm框架了。顺便写了个比较渣的文档和服务端渲染。。。 当前版本：v1.2.0 项目地址 文档 npm InDiv简介 名字其实是瞎起的，因为组件要被包在一个div里，所以叫了...
鸿蒙HarmonyOS语法开发：多语言支持
2401_84917132的博客
08-12 1449
基于开发框架的应用会覆盖多个国家和地区，开发框架支持多语言能力后，可以让应用开发者无需开发多个不同语言的版本，就可以同时支持多种语言的切换，为项目维护带来便利。
HarmonyOS 4.0 应⽤开发 配合视频和文档相关代码
03-20
本资源包含 HarmonyOS 4.0 应用开发的相关代码，配合视频教程和文档，为开发者提供了丰富的学习材料。下面将详细探讨 HarmonyOS 4.0 应用开发的核心知识点： 1. **分布式能力**：HarmonyOS 的核心特色之一是其...
鸿蒙OS4.0项目源码
11-17
ArkTS是华为为鸿蒙OS开发的编程语言，它是TypeScript的一个分支，提供了更严格的类型系统和对 HarmonyOS SDK 的原生支持。通过分析这个示例，开发者可以学习如何在鸿蒙OS上构建用户界面、管理数据以及处理用户交互...
HarmonyOS4.0 实战小项目开发后端数据库相关数据
02-18
在 HarmonyOS4.0 的实战小项目开发中，后端数据库的选择至关重要，这里我们使用了 MongoDB，一个流行的、高性能的NoSQL数据库。MongoDB 以其灵活性、可扩展性和丰富的文档模型而受到广泛应用，尤其适合处理大量非...
深度解析Harmony4.0应用开发基础+传智鸿蒙实践案例干货分享
bxg_kydsj的博客
12-19 3760
在华为HarmonyOS及全场景新品发布会上，华为介绍了华为“1+8+N”三圈层全场景智慧生态解决方案，从而打造面向未来的全新生态，其中，1指的是手机，8指的是车机、音箱、耳机、手表/手环、平板、大屏、PC、AR/VR，N指的是泛IOT设备。ArkUI（方舟开发框架）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发
七周七种前端框架三: Angular2 之 TypeScript
言川的博客
11-23 8053
TypeScript 是什么有了拥抱ES6的TypeScript 果断可以抛弃 CoffeeScript 和 Babel了。TypeScript 是ES6的一个超集，也就是完整包含了全部ES6特性，并且还引入了强类型和注解。TypeScript = ES6 + 强类型 + Annotation不要用 CoffeeScript 了，因为他的语法大部分都和ES6是不一样，并不符合JS的发展方向。不要被标
仓颉编程语言来了-仓颉编程语言白皮书
Neo的博客
06-21 2935
卓越性能：仓颉编译器及运行时从全栈对编译进行优化，包括编译器前端基于CHIR（Cangjie HighLevel IR）高层编译优化（比如语义感知的循环优化、语义感知的后端协同优化等），基于后端的编译优化（比如：SLP向量化、Intrinsic优化、InlineCache、过程间指针优化、Barrier优化等），基于运行时的优化（比如轻量锁、分布式标记、并发Tracing优化等），一系列的优化让仓颉充分发挥处理器能力，为应用提供卓越的性能支持。此外，仓颉还支持类型推断，能够降低开发者类型标注的负担；
鸿蒙应用开发语言_鸿蒙2.0！用 JavaScript 开发鸿蒙应用
weixin_36051940的博客
01-27 1598
作者：这波能反杀丶转发链接：https://mp.weixin.qq.com/s/lT29TCUJqZ84UjE8J53OMg前言华为2020开发者大会召开在即。本来华为的开发者大会，我都很少关注，可是所有人关心的鸿蒙操作系统，都会在发布会上放出消息。今年也不例外。这一次，鸿蒙将会在开发者大会上，发布 鸿蒙2.0。去年虽然发布了鸿蒙操作系统，但是并没有放出任何开发文档，导致鸿蒙系统在很长一段时间都...
Harmony OS-4.0应用开发（第一章）
l10711097061的博客
04-16 1204
HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上，HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持手机、平板、智能穿戴、智慧屏、车机、PC、智能音箱、耳机、AR/VR眼镜等多种终端设备，提供全场景（移动办公、运动健康、社交通信、媒体娱乐等）业务能力。搭载该操作系统的设备在系统层面融为一体、形成超级终端，让设备的硬件能力可以弹性扩展，实现设备之间硬件互助，资源共享。
鸿蒙应用开发（第一章：快速体验）
moments的博客
01-26 2096
鸿蒙应用开发需要使用配套的IDE——HUAWEI DevEco Studio。 DevEco Studio基于IntelliJ IDEA Community（IDEA社区版）构建，为鸿蒙应用提供了一站式开发环境，集成了开发、运行、调试以及发布应用的各项功能。
【愚公系列】2023年11月 HarmonyOS教学课程 002-ArkTS语言（基本语法）
热门推荐
时光隧道
11-28 6万+
HarmonyOS的ArkTS语言是一种基于TypeScript开发的语言，它专为HarmonyOS系统开发而设计。ArkTS语言结合了JavaScript的灵活性和TypeScript的严谨性，使得开发者能够快速、高效地开发出高质量的HarmonyOS应用程序。ArkTS语言具有以下特点：静态类型检查：开发者在编写代码时可以使用类型注解来进行类型检查，从而减少因类型错误而导致的bug。
鸿蒙App开发选择Java还是JavaScript？
aishang_keji的博客
05-30 6583
众所周知， Java和 JavaScript是两种编程语言，这两种语言在不同的环境中都有许多用途。在鸿蒙 App开发中， Java和 JavaScript是两种常见的编程语言，它们都具有广泛的应用，并且都有其独特的优势。下面我们将就这两种编程语言进行比较，以帮助开发者更好地选择哪一种编程语言。
鸿蒙开发语言是java_鸿蒙2.0开源，开发应用不拘语言，用你会的任何编程语言都行？...
weixin_31304499的博客
02-26 2432
今年这个特殊的2020，华为开发者大会如期而至，备受大众期待的是国产自主研发的鸿蒙操作系统，不过更重要的是，这次重磅推出的不仅有开源的鸿蒙2.0，还有更多华为的研发成果和进展。如果之前鸿蒙OS还让人质疑无从开发，那么这次就可以释怀了，因为华为此次还重点介绍了他们的IDE，也就是HUAWEI DevEco Studio(简称DevEco Studio)。当然关注科技资讯和一人客以往文章的小伙伴都知道...
鸿蒙HarmonyOS车机应用开发与驾驶模式指南
"HarmonyOS车机应用设计文档主要讲解了如何在华为的HarmonyOS操作系统上为汽车场景开发安全、适应性的应用。文档强调了驾驶模式和非驾驶模式的概念，并提出了对车载应用的约束与限制，以保障驾驶安全。此外，还介绍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值