2024 鸿蒙零基础快速实战-仿抖音App开发
原创2024 鸿蒙零基础快速实战-仿抖音App开发
原创
HarmonyOS技术栈介绍
HarmonyOS与Android的比较
许多人对HarmonyOS是否只是Android的衍生版本感到好奇。为了阐明这一点，我想提出以下几个观点：
- HarmonyOS并不是Android的替代品，两者服务于不同的市场和需求。
- 尽管HarmonyOS目前在应用生态方面还不如Android成熟，但其战略定位更为前瞻。
- HarmonyOS在性能上相比Android有所提升。
系统定位差异
- Android：基于Linux内核的开源操作系统，主要用于移动设备，由Google公司领导开发。
- HarmonyOS：为万物互联时代设计的分布式操作系统，支持多种终端设备，如手机、平板、智能穿戴等，提供全场景业务能力。
从定义上看，两者的设计初衷和目标市场截然不同，HarmonyOS更侧重于物联网和多设备协同。
内核设计对比
Android使用的是宏内核设计，而HarmonyOS采用微内核架构，提高了系统的稳定性。HarmonyOS包含Linux内核和LiteOS内核，通过内核抽象层（KAL）提供统一的内核能力。
运行效率对比
HarmonyOS在运行效率上优于Android，因为它采用了方舟编译器，允许应用程序直接与操作系统通信，从而跳过了虚拟机解释的步骤。
方舟编译器的优势
方舟编译器通过静态编译代替动态编译，全程执行机器码，显著提高了程序的响应速度。它还支持多语言联合编译、轻量运行时、软硬件协同优化以及多平台支持。
鸿蒙最新ArkTS基础入门
🚀 一、HarmonyOS的ArkTS语言基础
🔎 1. 概述
ArkTS，HarmonyOS的专属开发语言，是TypeScript的扩展版本，专为鸿蒙系统设计。它继承了JavaScript的灵活性和TypeScript的静态类型检查，为开发者提供了一个高效、稳定的开发环境。
特点概览：
- 类型安全：通过类型注解，增强了代码的健壮性，减少了运行时错误。
- 编程范式：支持基于Promise和async/await的异步/同步编程。
- 模块丰富：内建了多种常用模块，简化了开发流程。
- 跨平台兼容：与JavaScript的无缝集成，使得ArkTS编写的代码可以跨平台运行。
🔎 2. TypeScript基础
TypeScript，由微软开发，是JavaScript的一个超集，它引入了类型系统，增强了语言的表达能力。TypeScript代码在编译时转换为JavaScript，使其可以在多种环境中运行。
TypeScript的核心特性包括：
🦋 2.1 类型注解
typescriptlet name: string = "TypeScript";
function add(a: number, b: number): number {
return a + b;
}🦋 2.2 接口
typescriptinterface Person {
name: string;
age: number;
sayHello(): void;
}
let tom: Person = {
name: "Tom",
age: 18,
sayHello: function () {
console.log(`Hello, my name is ${this.name}!`);
}
};🦋 2.3 泛型
typescriptfunction identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("TypeScript");
console.log(output); // 输出 TypeScript🦋 2.4 类的继承
typescriptclass Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0) {
console.log(`${this.name} moved ${distance}m.`);
}
}
class Dog extends Animal {
bark() {
console.log("Woof! Woof!");
}
}
let dog = new Dog("Bobby");
dog.move(10); // 输出 "Bobby moved 10m."
dog.bark(); // 输出 "Woof! Woof!"🦋 2.5 类的访问修饰符
typescriptclass Person {
protected name: string;
constructor(name: string) {
this.name = name;
}
protected sayHello() {
console.log(`Hello, I'm ${this.name}.`);
}
}
class Student extends Person {
constructor(name: string) {
super(name);
}
public sayHelloToTeacher(teacher: Person) {
console.log(`Hello, ${teacher.name}, I'm ${this.name}.`);
}
}
let tom = new Student("Tom");
let bob = new Person("Bob");
tom.sayHelloToTeacher(bob); // 输出 "Hello, Bob, I'm Tom."
// bob.sayHello(); // 报错：属性 'sayHello' 受保护，只能在类 'Person' 及其子类中访问。🔎 3. ArkTS的构成要素
ArkTS通过装饰器、UI描述、自定义组件、系统组件、属性方法和事件方法等元素，提供了一种声明式UI开发方式。
- 装饰器：如
@Entry、@Component、@State，赋予类和方法特殊的含义。 - UI描述：使用声明式语法描述UI结构。
- 自定义组件：可复用的UI单元，可以组合其他组件。
- 系统组件：ArkUI框架内置的基础和容器组件。
ArkTS还扩展了多种语法范式，如@Builder、@BuilderParam、@Extend、@Style和stateStyles，以提高开发效率。
🔎 4. 自定义组件的实现
自定义组件基于struct实现，它们是无继承关系的独立单元。每个自定义组件都必须有一个build()函数，用于定义UI描述。
4.1 build()函数规范
- 根节点：必须有一个且只有一个根节点，通常为容器组件。
- 限制：不允许在
build()中声明变量、打印日志或使用本地作用域。
🔎 5. 生命周期管理
页面和组件的生命周期管理是ArkTS的重要组成部分，提供了一系列的生命周期接口，如onPageShow、onPageHide、onBackPress等，以及组件特有的生命周期接口，如aboutToAppear和aboutToDisappear。
🔎 6. 装饰器的高级用法
ArkTS提供了多种装饰器，如@Builder、@BuilderParam、@Styles和@Extend，它们用于定义UI、样式和扩展组件功能。
6.1 @Builder装饰器
@Builder用于定义页面UI构建函数，可以是局部的或全局的，并支持参数传递。
6.2 @BuilderParam装饰器
@BuilderParam用于装饰指向@Builder方法的变量，允许在组件初始化时进行赋值，从而为组件添加特定的功能。
6.3 @Styles装饰器
@Styles用于定义可复用的样式封装，可以是全局的或组件内的。
6.4 @Extend装饰器
@Extend用于扩展原生组件的样式，仅支持全局定义，并且可以封装组件的私有属性和事件。
🔎 7. 多态样式(stateStyles)
stateStyles允许根据UI的内部状态来设置样式，提供了一种类似于CSS伪类的功能，但具有不同的语法。
🦋 7.1 基本使用
typescript@Entry
@Component
struct CompWithInlineStateStyles {
@State focusedColor: Color = Color.Red;
normalColor: Color = Color.Green
build() {
Column() {
Button('clickMe').height(100).width(100)
.stateStyles({
normal: {
.backgroundColor(this.normalColor)
},
focused: {
.backgroundColor(this.focusedColor)
}
})
.onClick(() => {
this.focusedColor = Color.Pink
})
.margin('30%')
}
}
}🦋 7.2 @Styles和stateStyles联合使用
typescript@Entry
@Component
struct MyComponent {
@Styles normalStyle() {
.backgroundColor(Color.Gray)
}
@Styles pressedStyle() {
.backgroundColor(Color.Red)
}
build() {
Column() {
Text('Text1')
.fontSize(50)
.fontColor(Color.White)
.stateStyles({
normal: this.normalStyle,
pressed: this.pressedStyle,
})
}
}
}🦋 7.3 stateStyles里使用常规变量和状态变量
typescript@Entry
@Component
struct CompWithInlineStateStyles {
@State focusedColor: Color = Color.Red;
normalColor: Color = Color.Green;
build() {
Button('clickMe').height(100).width(100)
.stateStyles({
normal: {
.backgroundColor(this.normalColor)
},
focused: {
.backgroundColor(this.focusedColor)
}
})
.onClick(() => {
this.focusedColor = Color.Pink
})
.margin('30%')
}
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。