关于前端基础快速跨入鸿蒙HarmonyOS开发

1、HarmonyOS简介

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

支持设备类型：

移动设备：智能手机、平板电脑
智能家居：智能家电、智能音响、智能门锁
智能穿戴：智能手表、智能手环
车载系统：车载娱乐、车载导航
工业控制：工业自动化、机器人控制

2、ArkTS语言

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

ArkTS（推荐）
HTML + CSS + JavaScript

语言演进：

ruby 复制代码

JavaScript → TypeScript → ArkTS (extend TypeScript)

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

3、ArkTS项目结构

3.1、项目目录

ruby 复制代码

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

3.2、基本组成要素

less 复制代码

@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、应用生命周期

javascript 复制代码

// 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

less 复制代码

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

5.3、组件生命周期

scss 复制代码

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

6、条件渲染

less 复制代码

@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、列表渲染

scss 复制代码

@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、网络图片

scss 复制代码

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

权限配置：

json 复制代码

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

8.2、本地图片

scss 复制代码

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

8.3、Resource资源

scss 复制代码

// 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、基本路由跳转

javascript 复制代码

import router from '@ohos.router';

// 跳转页面（保留当前页）
Button("跳转到首页")
  .onClick(() => {
    router.pushUrl({
      url: 'pages/index'
    })
  })

// 跳转页面（替换当前页）
Button("替换当前页")
  .onClick(() => {
    router.replaceUrl({
      url: 'pages/index'
    })
  })

9.2、路由传参

csharp 复制代码

// 发送参数
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、页面返回

php 复制代码

// 返回上一页
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、返回确认对话框

javascript 复制代码

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

10、自定义组件

10.1、基本结构

scss 复制代码

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

10.2、参数传递

scss 复制代码

@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、完整示例

less 复制代码

@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语言基础与项目结构
组件化开发思想
完整的生命周期管理
条件渲染与列表渲染
多种图片资源的使用
页面路由与导航
自定义组件开发