第八天继续学习ArkTS，掌握基础语法和组件创建

ops/2025/2/7 23:51:52/

当然，继续学习ArkTS（Ark TypeScript）是一个很好的选择，它主要用于构建华为ArkUI框架中的应用程序。ArkTS结合了TypeScript的语法糖和ArkUI的声明式UI框架，使得开发更高效和便捷。以下是一些基础语法和组件创建的指南，帮助你更好地掌握ArkTS。

基础语法

变量声明：

let message: string = "Hello, ArkTS!";
const pi: number = 3.14;

函数定义：

function greet(name: string): string {return `Hello, ${name}!`;
}

条件语句：

let isHappy: boolean = true;
if (isHappy) {console.log("I am happy!");
} else {console.log("I am not happy.");
}

循环语句：

for (let i = 0; i < 5; i++) {console.log(`Number: ${i}`);
}let numbers = [1, 2, 3, 4, 5];
for (let num of numbers) {console.log(`Number: ${num}`);
}

组件创建

在ArkTS中，组件是通过类来定义的，每个组件都有模板（template）和样式（style），用于描述UI的结构和外观。

创建一个简单的组件：

import { defineComponent } from '@arkui/core';export default defineComponent({name: 'MyComponent',template: `<div class="container"><text>{{ message }}</text></div>`,style: `.container {flex-direction: column;justify-content: center;align-items: center;height: 100%;}text {font-size: 20px;color: #333;}`,setup() {return {message: 'Hello from MyComponent!'};}
});

使用组件：
创建完组件后，你可以在父组件中使用它。

import { defineComponent } from '@arkui/core';
import MyComponent from './MyComponent.ark';export default defineComponent({name: 'App',template: `<div class="app-container"><MyComponent /></div>`,style: `.app-container {flex-direction: column;justify-content: center;align-items: center;height: 100%;}`
});

事件处理：
你可以为组件添加事件监听器来处理用户交互。

export default defineComponent({name: 'MyComponent',template: `<div class="container"><button @click="handleClick">Click Me</button></div>`,style: `.container {flex-direction: column;justify-content: center;align-items: center;height: 100%;}button {padding: 10px 20px;font-size: 16px;}`,setup() {const handleClick = () => {console.log('Button clicked!');};return {handleClick};}
});