从零开始:编写第一个鸿蒙(HarmonyOS)程序

这是一个使用鸿蒙技术开发的本地原生记账应用,非常适合大家用来练手。相关源码已上传至 Github,点击此处查看项目。欢迎大家交流、指正,也欢迎提交 PR。

一、引言

对于刚接触鸿蒙(HarmonyOS)开发的朋友来说,创建项目后看到自动生成的示例代码,可能会感到有些眼花缭乱。别担心,最好的学习方法就是亲手实践。今天,我们就一起把示例代码删掉,从零开始,动手编写属于你自己的第一个鸿蒙程序。

二、动手编写:Hello HarmonyOS

首先,在 DevEco Studio 中创建一个新的 HarmonyOS 项目。创建完成后,你会看到一个默认的 Index.ets 文件。现在,我们把它清空,然后输入以下代码:

typescript 复制代码
@Entry
@Component
struct Index {
  build() {
    Text('你好鸿蒙')
  }
}

输入完成后,点击右上角的 Previewer 预览按钮,或者连接真机运行。你会看到,屏幕上成功显示出了"你好鸿蒙"的字样。恭喜你,你的第一个鸿蒙程序已经成功运行了!

三、代码解析:每一行都是什么意思?

虽然代码只有短短几行,但每一行都承载着鸿蒙应用开发的核心概念。下面我们来逐一拆解。

3.1 @Entry

@Entry 是一个装饰器。它的作用是标记一个自定义组件为 UI 页面的入口 。简单来说,它告诉系统:"这个组件是页面的起点"。在一个独立的 UI 页面中,@Entry 只能出现一次。

3.2 @Component

@Component 也是一个装饰器,用于声明一个自定义组件 。被它修饰的 struct 结构体,就变成了一个可以复用的 UI 组件。你可以把它理解为一个"积木块",用来搭建你的应用界面。

3.3 struct

struct 是 ArkTS 语言中用于定义自定义组件基础结构的关键字。它定义了一个新的数据类型,这个类型包含了组件的状态、属性和构建方法。

3.4 Index

Index 是我们给这个自定义组件起的名字。你可以根据自己的喜好来命名,比如 HelloPageMyApp 等。这个名字将作为组件的标识符,在代码的其他地方被引用。

3.5 build() 函数

build() 函数是自定义组件的核心声明函数。所有你想要在屏幕上显示的内容,都必须写在这个函数内部。它是组件的"蓝图",描述了 UI 的结构和布局。

3.6 Text 组件

Text 是鸿蒙提供的一个基础文本组件 ,用于在屏幕上显示一段文字。我们通过 Text('你好鸿蒙') 的方式,将"你好鸿蒙"这个字符串作为参数传入,从而在屏幕上渲染出这段文字。

四、总结

通过这个简单的例子,我们亲手编写并运行了第一个鸿蒙程序,并理解了 @Entry@Componentstructbuild()Text 这几个核心概念。这虽然只是第一步,但它为你打开了鸿蒙开发世界的大门。接下来,你可以尝试修改 Text 组件里的文字,或者添加更多的组件,开始你的鸿蒙探索之旅吧!

相关推荐
Profile排查笔记2 小时前
指纹浏览器手机版怎么选?从本地 App 到云端 Android 的实现方式解析
前端·人工智能·后端·自动化
浪兎兎2 小时前
Vue CLI笔记
前端·vue.js·笔记
Csvn2 小时前
Proxy / Reflect 与响应式原理:完整手写一个 mini Vue3 响应式系统
前端
Easy_API2 小时前
OpenAI三周内第二次降价,GPT-5.6 Sol砍了20%到33
大数据·前端·人工智能·gpt·深度学习
深念Y2 小时前
07-SSR水合问题实战排查与修复记录
前端·vue·vite·nuxt·ssr·csr·水合
前端炒粉2 小时前
容器预热预跳转方案
前端·vue.js·性能优化
小二李2 小时前
第12章 nestjs服务端开发:RBAC权限系统设计
java·linux·前端
tt一点通2 小时前
前端常用设计模式大全
前端·vue.js
张文君2 小时前
ubuntu26.04坏块分区隔离急速版
java·前端·python
czhm572 小时前
HarmonyOS 6.1 实战:长列表 ForEach 性能优化,大数据量列表避免不必要的组件重渲染
华为·harmonyos