经常有同学问黄sir:学鸿蒙要从哪开始?网上的教程要么太老、要么太散。今天用2026年最新框架,把核心内容系统梳理一遍,看完能真正上手。一、HarmonyOS 到底是什么
HarmonyOS 是华为推出的面向全场景的分布式操作系统,简单说就是:一套系统,能跑在手机、平板、手表、车机、智能家居等各种设备上,设备之间可以互相调用能力。
比如手机调用摄像头、手表调用手机GPS——这些靠的就是分布式能力。
所以学鸿蒙不等于只做手机App,范围比Android宽得多。
二、用什么语言:ArkTS
2024年之后,ArkTS是绝对主流,也是官方唯一主推的开发语言。
ArkTS基于TypeScript,加入了静态类型约束和声明式UI能力:
- 静态类型:编译阶段就能发现错误,不用等运行时才崩
- 声明式UI:告诉框架"数据是什么",UI自动跟着变
@State message: string = '点我'build() { Column() { Text(this.message) Button('点我') .onClick(() => { this.message = '点过了' // 改了状态,UI自动更新 }) }}
这种"改数据 = 改界面"的模式叫数据驱动UI,是ArkTS的核心。四、ArkTS基本组成
@Entry // 装饰器:页面入口@Component // 装饰器:组件标记struct Index { // 组件结构 @State count: number = 0 // 状态变量,变了UI刷新 build() { // UI描述(声明式) Column() { // 系统组件:列布局容器 Text(`计数:${this.count}`) .fontSize(30) // 属性方法:字体大小 .onClick(...) // 事件方法:点击交互 } }}
| |
|---|
@Entry | |
@Component | |
@State | |
@Prop | |
@Link | |
@Provide/@Consume | |
五、组件:页面积木
组件是界面搭建的最小单元。 分几大类:
- :
Text、Image、Button、TextInput、Switch - 容器组件:
Column(竖排)、Row(横排)、Stack(层叠)、List - 媒体组件
核心思想是复用——写好一个组件,到处都能用。
六、生命周期:什么时候做什么事
应用生命周期(EntryAbility)
onCreate() { /* 进程创建,初始化 */ }onBackground() { /* 切后台,释放资源 */ }onForeground() { /* 切回前台,恢复数据 */ }onWindowStageCreate() { /* 创建主窗口 */ }onWindowStageDestroy() { /* 销毁窗口前 */ }onDestroy() { /* 进程销毁,清理 */ }
页面生命周期(@Entry组件)
onPageShow() { // 页面每次显示(跳转过来/从后台回来)onPageHide() { // 页面每次隐藏(跳转走/切后台)onBackPress() { // 点返回键时,返回true拦截
容易搞混的点:
需要每次进页面都刷新数据,用onPageShow;只需要初始化一次,用aboutToAppear。
组件生命周期
aboutToAppear() { // 组件创建后、build前,可以改状态变量aboutToDisappear() { // 组件销毁前,清理定时器、取消订阅 // ⚠️ 不要在这里改状态变量}
七、条件渲染:if/else
@State isLoggedIn: boolean = falsebuild() { Column() { if (this.isLoggedIn) { Text('欢迎回来') // 条件成立才渲染 } else { Text('请先登录') } }}
这里的if/else是真正创建或销毁组件,不是CSS的display:none那种控制显隐。
八、列表渲染:ForEach vs LazyForEach
ForEach:适合小数据量
@State list: string[] = ['语文', '数学', '英语']build() { List({ space: 10 }) { ForEach(this.list, (item: string, index: number) => { ListItem() { Text(`${index + 1}. ${item}`) } }) }}
三个参数:arr(数据源)、itemGenerator(生成组件)、keyGenerator(生成唯一key,建议加上)。
LazyForEach:大列表必须用它
超过几十条数据必须用LazyForEach,否则滚动会卡。
ForEach一次性渲染所有数据,LazyForEach只渲染屏幕上可见的,滚动时按需加载。
LazyForEach(this.dataSource, (item: Article) => { ListItem() { ArticleCard({ article: item }) }}, (item: Article) => item.id.toString())
LazyForEach需要配合IDataSource接口实现数据懒加载,适合新闻Feed、商品列表等场景。
九、图片加载:四种方式
| |
|---|
| Image('https://.../xxx.png').width(100) |
| Image($r('app.media.avatar')).width(100) |
| Image($rawfile('icons/logo.png')).width(100) |
| Image('data:image/png;base64,xxx') |
十、页面路由:Navigation是主流
两套方案对比:
新项目直接用Navigation。
跳转+传参
// A页面:跳转并传参this.pathStack.pushPathByName('DetailPage', { id: 100, title: '详情' })// B页面:NavDestination中接收.onReady((ctx: NavDestinationContext) => { const params = ctx.pathInfo.param as Record<string, Object> console.info('收到id:', params['id'])})
返回时回传数据
// B页面返回带数据this.pathStack.pop({ result: '选中了A', value: 'A' })// A页面回调接收this.pathStack.pushPathByName('DetailPage', { id: 100 }, (popInfo) => { const result = popInfo.result as Record<string, string> console.info('B返回:', result['value'])})
Navigation原生支持回传,不需要借助AppStorage中转,比router干净得多。
十一、自定义组件:复用UI
把重复使用的UI封装成独立组件:
// components/TodoItem.ets@Componentexport struct TodoItem { @Prop content: string // 接收参数 @State isDone: boolean = false // 组件私有状态 build() { Row() { Text(this.content) .decoration({ type: this.isDone ? TextDecorationType.LineThrough : TextDecorationType.None }) } .onClick(() => { this.isDone = !this.isDone }) // 点击切换状态 }}
import { TodoItem } from '../components/TodoItem'TodoItem({ content: '完成作业' })TodoItem({ content: '整理笔记' })TodoItem({ content: '刷算法题' })
最后
到这里,鸿蒙入门最核心的10个知识点都讲完了:ArkTS基础语法、装饰器体系、组件生命周期、列表渲染、路由导航、自定义组件——覆盖日常开发大部分场景。
把基础打扎实,再去研究进阶内容,效率高得多。
想系统学鸿蒙ArkTS的,黄sir我整理了一份学习资料包,包含4份笔记,内容是我带班用过的,不是网上随便抄的。
需要的私信「学习包」,免费发你。
顺手点个「在看」,让更多想学鸿蒙的人看到这篇。