1、HarmonyOS简介

HarmonyOS（华为鸿蒙系统）是一款面向全场景的分布式操作系统。它在传统单设备系统能力基础上，提出了基于同一套系统能力、适配多种终端形态的分布式理念。

支持设备类型：

• 移动设备：智能手机、平板电脑

• 智能家居：智能家电、智能音响、智能门锁

• 智能穿戴：智能手表、智能手环

• 车载系统：车载娱乐、车载导航

• 工业控制：工业自动化、机器人控制

2、ArkTS语言

HarmonyOS 4.0+ 支持两种开发技术：

• ArkTS（推荐）

• HTML + CSS + JavaScript

语言演进：

JavaScript → TypeScript → ArkTS (extend TypeScript)

ArkTS在TypeScript基础上，对动态类型特性施加更严格约束，引入静态类型，提供声明式UI、状态管理等能力。

3、ArkTS项目结构

3.1、项目目录

项目根目录/ ├── entry/ │ └── src/ │ ├── main/ │ │ ├── ets/ # 代码文件 │ │ ├── resources/ # 资源文件 │ │ └── module.json5 # 配置文件

3.2、基本组成要素

@Entry @Component struct MyComponent { @State message: string = 'Hello World' build() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) } .width('100%') .height('100%') } }

核心概念：

• 装饰器：@Component、@Entry、@State等

• UI描述：build()方法中的声明式UI

• 自定义组件：可复用的UI单元

• 系统组件：框架内置的基础组件

• 属性方法：链式调用配置属性

• 事件方法：设置事件响应逻辑

4、组件体系

组件是界面搭建的最小单位，分为五大类：

5、生命周期管理

5.1、应用生命周期

// src/main/ets/entryability/EntryAbility.ts export default class EntryAbility extends UIAbility { onCreate(want, launchParam) { // 应用创建时调用 } onForeground() { // 应用进入前台时调用 } onBackground() { // 应用进入后台时调用 } onWindowStageCreate() { // UIAbility实例创建时调用 } onWindowStageDestroy() { // UIAbility实例销毁前调用 } onDestroy() { // 应用销毁时调用 } }

5.2、页面生命周期

typescript

@Entry @Component struct MyPage { onPageShow() { // 页面每次显示时触发 } onPageHide() { // 页面每次隐藏时触发 } onBackPress() { // 点击返回按钮时触发 } }

5.3、组件生命周期

@Component struct MyComponent { aboutToAppear() { // 组件创建后、build()执行前调用 } aboutToDisappear() { // 组件销毁前调用 } }

6、条件渲染

@Entry @Component struct ConditionalRender { @State isStudy: boolean = false build() { Column() { Button('切换状态') .fontSize(50) .margin({ top: 20 }) .onClick(() => { this.isStudy = !this.isStudy }) if (this.isStudy) { Image($r("app.media.study_icon")) .width(28) .height(28) } else { Image($r("app.media.rest_icon")) .width(28) .height(28) } } .width('100%') } }

7、列表渲染

@Entry @Component struct ListRender { @State list: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9] build() { Column() { List({ space: 10 }) { ForEach(this.list, (item: number) => { ListItem() { Text(`${item}`) .textAlign(TextAlign.Center) .width('100%') .height(50) .fontSize(20) } }) } .padding(10) .divider({ strokeWidth: 2, color: Color.Red }) } .width('100%') .height('100%') } }

8、Image图片组件

8.1、网络图片

Image('https://example.com/image.png') .width(100) .height(100)

权限配置：

{ "requestPermissions": [ { "name": "ohos.permission.INTERNET" } ] }

8.2、本地图片

Image("/images/local.jpg") .width(100) .height(100)

8.3、Resource资源

// media资源 Image($r('app.media.icon')) .width(100) .height(100) // rawfile资源 Image($rawfile('icon.png')) .width(100) .height(100) // Base64 Image("data:image/png;base64,[base64 data]") .width(100) .height(100)

9、页面路由

9.1、基本路由跳转

import router from '@ohos.router'; // 跳转页面（保留当前页） Button("跳转到首页") .onClick(() => { router.pushUrl({ url: 'pages/index' }) }) // 跳转页面（替换当前页） Button("替换当前页") .onClick(() => { router.replaceUrl({ url: 'pages/index' }) })

9.2、路由传参

// 发送参数 Button("跳转到详情页") .onClick(() => { router.pushUrl({ url: 'pages/detail', params: { id: 123, title: '文章标题' } }) }) // 接收参数 @Component struct DetailPage { aboutToAppear() { const params = router.getParams(); const id = params['id']; const title = params['title']; } }

9.3、页面返回

// 返回上一页 router.back(); // 返回到指定页面 router.back({ url: 'pages/Home' }); // 返回并传递参数 router.back({ url: 'pages/Home', params: { message: '来自详情页的数据' } }); // 接收返回参数 onPageShow() { const params = router.getParams(); const message = params['message']; }

9.4、返回确认对话框

function onBackClick(): void { try { router.showAlertBeforeBackPage({ message: '确定要返回吗？未保存的数据将会丢失。' }); } catch (err) { console.error(`显示返回确认框失败: ${err.message}`); } router.back(); }

10、自定义组件

10.1、基本结构

@Component struct MyComponent { build() { // UI描述 } }

10.2、参数传递

@Component struct ChildComponent { private title: string = '默认标题'; private count: number = 0; build() { Text(this.title) .fontSize(20) } } @Entry @Component struct ParentComponent { build() { Column() { // 传递参数给子组件 ChildComponent({ title: '自定义标题', count: 10 }) } } }

10.3、完整示例

@Entry @Component struct PoemApp { @State message: string = '诗词学习' build() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) // 使用自定义组件 PoemItem() PoemItem({ content: '二十四桥明月夜，玉人何处教吹箫？' }) PoemItem({ content: '荷尽已无擎雨盖，菊残犹有傲霜枝。' }) PoemItem({ content: '一年好景君须记，最是橙黄橘绿时。' }) } .width('100%') .height('100%') } } @Component struct PoemItem { // 组件参数 content: string = '青山隐隐水迢迢，秋尽江南草未凋。' // 状态变量 @State isDone: boolean = false build() { Row() { // 条件渲染图标 Image(this.isDone ? $r('app.media.todo_ok') : $r('app.media.todo_default')) .width(20) .height(20) .margin(15) // 文本内容 Text(this.content) .decoration({ type: this.isDone ? TextDecorationType.LineThrough : TextDecorationType.None }) } .backgroundColor(Color.Pink) .borderRadius(25) .margin({ top: 15 }) .onClick(() => { // 状态更新驱动UI刷新 this.isDone = !this.isDone }) } }

总结

本文涵盖了HarmonyOS应用开发的核心概念：

• ArkTS语言基础与项目结构

• 组件化开发思想

• 完整的生命周期管理

• 条件渲染与列表渲染

• 多种图片资源的使用

• 页面路由与导航

• 自定义组件开发

通过这些基础知识的学习，有前端基础的开发者可以快速上手HarmonyOS应用开发，构建丰富的跨设备应用体验。