課程目標

1. 掌握ArkTS基礎語法與核心概念
2. 理解聲明式UI開發范式
3. 能獨立開發簡單鴻蒙應用組件
4. 建立規范的代碼編寫習慣

---

第一部分：初識ArkTS

1.1 語言全景認知

關鍵特征解析：

• 類型安全：編譯時檢查錯誤（演示類型錯誤案例）
• UI即代碼：通過代碼直接描述界面（對比傳統XML布局）
• 一次開發：同一套代碼適配不同設備尺寸

1.2 開發環境初體驗

DevEco Studio安裝四步曲：

1. 下載安裝包（官網/鏡像站）
2. 基礎配置檢查：
   • JDK 17+
   • 8GB+可用空間
3. 創建第一個項目：

   Project Type: Application
   Template: Empty Ability
   Project Name: HelloArkTS
   

4. 模擬器啟動測試（P40手機模擬器）

---

第二部分：基礎語法全解析

2.1 變量與基礎類型

變量聲明三板斧：

// 方式1：顯式類型聲明
let userName: string = "Alice";// 方式2：類型推斷（推薦）
let age = 20;  // 自動識別為number// 方式3：聯合類型
let id: string | number = "S001";
id = 1001;  // 有效賦值

基礎類型速查表：

類型	示例	特殊值
number	3.14, -20, NaN	Infinity
string	"Hello", `年齡：${age}`	模板字符串
boolean	true/false	-
any	禁用！	類型檢測逃逸

2.2 運算符與流程控制

新手指南：

// 算術運算符
let result = 10 + 5 * 3;  // 25// 比較運算符
if (age >= 18 && age <= 60) {console.log("成年人");
}// 空值處理
let nickname = userName ?? "匿名用戶";  // 空值合并運算符

循環結構對比：

// 傳統for循環
for (let i = 0; i < 5; i++) {console.log(i);
}// forEach遍歷數組
[1,2,3].forEach(num => console.log(num));// for...of迭代
for (const num of [1,2,3]) {console.log(num);
}

2.3 函數與作用域

函數定義三要素：

// 1. 基礎函數
function add(a: number, b: number): number {return a + b;
}// 2. 箭頭函數（推薦）
const sayHello = (name: string): string => `你好，${name}！`;// 3. 默認參數
function createUser(name: string, age: number = 18) {// 函數體
}// 函數調用示例
console.log(sayHello("張三"));  // 輸出：你好，張三！

作用域陷阱演示：

let globalVar = 10;function testScope() {let localVar = 20;console.log(globalVar);  // 10console.log(localVar);   // 20
}
// console.log(localVar);   // 報錯：未定義

---

**第三部分：面向對象編程

3.1 類與對象基礎

類結構四要素：

class Student {// 1. 屬性聲明private id: string;  public name: string;// 2. 構造函數constructor(name: string, id: string) {this.name = name;this.id = id;}// 3. 方法定義study(subject: string): void {console.log(`${this.name}正在學習${subject}`);}// 4. 訪問器get studentId(): string {return this.id;}
}// 使用示例
const stu1 = new Student("李華", "S2023001");
stu1.study("ArkTS編程");  // 輸出：李華正在學習ArkTS編程

3.2 繼承與多態

class CollegeStudent extends Student {major: string;constructor(name: string, id: string, major: string) {super(name, id);this.major = major;}// 方法重寫study(): void {console.log(`${this.name}主修${this.major}`);}
}const stu2 = new CollegeStudent("王芳", "S2023002", "計算機科學");
stu2.study();  // 輸出：王芳主修計算機科學

類關系圖示：

---

第四部分：ArkTS UI開發

4.1 聲明式UI入門

組件三要素：

@Entry
@Component
struct WelcomePage {// 1. 狀態變量@State counter: number = 0;// 2. 構建方法build() {// 3. UI描述Column() {Text(`點擊次數：${this.counter}`).fontSize(24).fontColor(Color.Blue)Button("點我增加").onClick(() => {this.counter++;})}.width('100%').padding(20)}
}

布局屬性速記：

屬性	說明	示例
.width()	寬度設置	.width('50%')
.height()	高度設置	.height(200)
.margin()	外邊距	.margin({top:10})
.padding()	內邊距	.padding(20)
.border()	邊框	.border({width:1})

4.2 常用組件庫

基礎組件三劍客：

Column() { // 垂直布局Text("用戶信息").fontSize(20)TextInput().placeholder("請輸入姓名").onChange(text => {console.log(text);})Button("提交").onClick(() => {// 處理點擊事件})
}

條件渲染示例：

@State isLogged: boolean = false;build() {Column() {if (this.isLogged) {Text("歡迎回來！")} else {Button("立即登錄")}}
}

---

第五部分：實戰訓練

5.1 課堂練習：個人名片組件

@Entry
@Component
struct ProfileCard {@State name: string = "張三";@State age: number = 20;@State isStudent: boolean = true;build() {Column() {Text("個人名片").fontSize(24).fontWeight(FontWeight.Bold)Divider()Row() {Text("姓名：")Text(this.name)}Row() {Text("年齡：")Text(this.age.toString())}Button(this.isStudent ? "學生" : "非學生").onClick(() => {this.isStudent = !this.isStudent;})}.padding(20)}
}

5.2 作業：計算器原型

需求說明：

• 實現加減乘除基礎運算
• 顯示計算歷史記錄
• 支持清零功能

核心代碼提示：

@State result: number = 0;
@State history: string[] = [];build() {Column() {Text(`當前結果：${this.result}`)Row() {Button("+1").onClick(() => this.calculate('+', 1))Button("-1").onClick(() => this.calculate('-', 1))Button("×2").onClick(() => this.calculate('*', 2))Button("÷2").onClick(() => this.calculate('/', 2))}ForEach(this.history, item => {Text(item)})}
}private calculate(op: string, num: number) {// 實現計算邏輯
}

1. 課堂速查表：

• [ArkTS基礎語法速查表.pdf]
• [DevEco Studio快捷鍵指南.png]

2. 開發資源導航：

• 官方文檔：https://developer.harmonyos.com
• 代碼示例庫：https://gitee.com/openharmony/applications_app_samples

3. 常見問題錦囊：

Q1：為什么修改了變量但界面不更新？  
A：確保使用@State裝飾器，且通過=賦值觸發更新  Q2：如何調試ArkTS程序？  
- 使用console.log()輸出日志  
- 在DevEco Studio中使用斷點調試  Q3：遇到類型錯誤怎么辦？  
- 檢查變量類型聲明  
- 使用類型斷言：value as string  

---

課程進度建議

課時	內容	重點
1	環境搭建與基礎語法	變量/函數/流程控制
2	面向對象編程	類/繼承/接口
3	UI開發基礎	聲明式語法/組件通信
4	綜合項目實踐	狀態管理/組件化開發

---

import { Student } from '../common/Student';@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column(){Button("數字類型").onClick(()=>{let n1: number = 10let n2: number = 43.5let n3 = n1+n2console.log("ken",n3)let b1: number = 0o17//八進制15let b2: number = 0x17//十六進制23let b3: number = 0b11//二進制3console.log("ken",b1,b2,b3)}).height('10%').width('50%')Button("計算結果").onClick(()=>{let result = 10 + 5 * 3;console.log("ken",result)}).height('10%').width('50%')Button("函數測試").onClick(()=>{console.log("ken",sayHello("張三"))console.log("ken",add(1,2))createUser()})Button("對象測試").onClick(()=>{let stu = new Student("xxx","18")stu.study("ken"+"鴻蒙開發")}).height('10%').width('50%')}}
}
// 1. 基礎函數
function add(a: number, b: number): number {return a + b;
}// 2. 箭頭函數（推薦）
const sayHello = (name: string): string => `你好，${name}！`;// 3. 默認參數
function createUser(name: string = "yx", age: number =18) {console.log("ken",name + age)// 函數體
}