鸿蒙全栈开发 D2

课程目标

掌握ArkTS基础语法与核心概念
理解声明式UI开发范式
能独立开发简单鸿蒙应用组件
建立规范的代码编写习惯

第一部分：初识ArkTS

1.1 语言全景认知

关键特征解析：

类型安全：编译时检查错误（演示类型错误案例）
UI即代码：通过代码直接描述界面（对比传统XML布局）
一次开发：同一套代码适配不同设备尺寸

1.2 开发环境初体验

DevEco Studio安装四步曲：

下载安装包（官网/镜像站）
基础配置检查：
- JDK 17+
- 8GB+可用空间

创建第一个项目：

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

模拟器启动测试（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)// 函数体
}