鸿蒙全栈开发 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); // 10
console.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 = 10
let n2: number = 43.5
let n3 = n1+n2
console.log("ken",n3)
let b1: number = 0o17//八进制15
let b2: number = 0x17//十六进制23
let b3: number = 0b11//二进制3
console.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)
// 函数体
}