鸿蒙应用开发从入门到实战三第一个鸿蒙应用在上一篇文章中我们了解了鸿蒙系统的架构和开发环境搭建。今天我们将正式进入实战环节——创建并运行你的第一个鸿蒙应用。通过这个简单的Hello World程序你将掌握鸿蒙应用开发的基本流程、项目结构和核心概念。## 认识鸿蒙应用项目结构在开始编写代码前我们需要先了解鸿蒙应用的标准项目结构。使用DevEco Studio创建一个新项目后你会看到以下关键目录-entry/src/main/ets/存放TypeScript代码的主入口-entry/src/main/resources/存放资源文件图片、字符串等-entry/build/构建输出目录-entry/src/main/config.json应用配置文件这种结构遵循了鸿蒙的模块化设计理念所有逻辑代码放在ETs目录下资源文件与代码分离便于维护和国际化。## 创建你的第一个应用### 步骤1新建项目打开DevEco Studio点击“Create HarmonyOS Project”选择“Empty Ability”模板。填写项目名称例如HelloWorld选择API版本推荐使用API 9以上点击Finish完成创建。### 步骤2理解主入口文件项目创建后打开entry/src/main/ets/Index.ets文件。这是应用的默认页面代码如下typescript// 导入必要的鸿蒙框架模块import router from ohos.router;// 定义数据模型用于页面状态管理EntryComponentstruct Index { // 响应式状态变量当值变化时自动更新UI State message: string Hello, HarmonyOS!; // 构建UI的方法 build() { // 使用Column布局排列子组件 Column() { // 文本组件显示当前状态变量 Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) .margin({ bottom: 20 }) // 按钮组件点击时触发事件 Button(Click Me) .fontSize(20) .backgroundColor(#007BFF) .onClick(() { // 点击后使用路由跳转到第二个页面 router.pushUrl({ url: pages/Second }); }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) }}这段代码展示了鸿蒙应用的核心特性使用Entry和Component装饰器定义页面组件State管理响应式数据build()方法描述UI结构。整个UI采用声明式语法类似于SwiftUI或Flutter。### 步骤3运行应用连接鸿蒙设备或启动模拟器点击工具栏的“Run”按钮。首次运行可能需要等待构建完成。你会看到模拟器或真机上显示一个居中的“Hello, HarmonyOS!”文本和一个蓝色按钮。## 扩展功能添加第二个页面一个完整的应用通常包含多个页面。下面我们创建一个新的页面并实现页面间跳转。### 创建新页面在entry/src/main/ets/目录下新建文件Second.ets代码如下typescript// 导入路由模块import router from ohos.router;// 定义第二个页面的组件EntryComponentstruct Second { // 接收从首页传递过来的参数 State data: string ; // 页面生命周期函数当页面显示时触发 onPageShow() { // 获取路由参数 const params router.getParams(); if (params) { // 从参数中提取数据 this.data params[info] as string; } } build() { Column() { // 显示接收到的数据 Text(this.data) .fontSize(30) .margin({ bottom: 20 }) // 返回按钮 Button(Go Back) .fontSize(20) .backgroundColor(#28A745) .onClick(() { // 返回上一页 router.back(); }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) }}### 修改首页传递参数回到Index.ets修改按钮的点击事件传递参数typescriptButton(Click Me) .fontSize(20) .backgroundColor(#007BFF) .onClick(() { // 传递参数到第二个页面 router.pushUrl({ url: pages/Second, params: { info: Welcome to HarmonyOS! } }); })### 配置路由在entry/src/main/resources/base/profile/main_pages.json中添加新页面路由json{ src: [ pages/Index, pages/Second ]}运行时点击首页按钮会跳转到第二页显示传递的字符串“Welcome to HarmonyOS!”点击“Go Back”按钮返回首页。这种页面间数据传递和路由机制是构建复杂应用的基础。## 深入理解声明式UI与状态管理鸿蒙应用开发的最大特点是使用声明式UI。与传统的命令式编程不同开发者只需描述UI应该是什么样子系统会自动处理状态变化时的UI更新。例如当State变量message变化时所有引用它的组件都会自动重绘。这种模式带来了几个好处1.代码更简洁无需手动操作DOM或视图2.更易维护状态变化与UI更新逻辑解耦3.性能优化框架只更新变化的部分## 总结通过本篇文章你已经成功创建并运行了第一个鸿蒙应用。从项目结构认知、页面组件编写、路由配置到状态管理你体验了鸿蒙应用开发的核心流程。下一步你可以尝试修改UI样式、添加更多组件或集成网络请求功能。记住鸿蒙开发不仅限于手机同样的代码稍作调整即可运行在平板、手表或智慧屏上这就是“一次开发多端部署”的威力。继续探索吧鸿蒙生态的广阔天地等你来征服
鸿蒙应用开发从入门到实战（三）：第一个鸿蒙应用
发布时间：2026/7/26 23:42:49
鸿蒙应用开发从入门到实战三第一个鸿蒙应用在上一篇文章中我们了解了鸿蒙系统的架构和开发环境搭建。今天我们将正式进入实战环节——创建并运行你的第一个鸿蒙应用。通过这个简单的Hello World程序你将掌握鸿蒙应用开发的基本流程、项目结构和核心概念。## 认识鸿蒙应用项目结构在开始编写代码前我们需要先了解鸿蒙应用的标准项目结构。使用DevEco Studio创建一个新项目后你会看到以下关键目录-entry/src/main/ets/存放TypeScript代码的主入口-entry/src/main/resources/存放资源文件图片、字符串等-entry/build/构建输出目录-entry/src/main/config.json应用配置文件这种结构遵循了鸿蒙的模块化设计理念所有逻辑代码放在ETs目录下资源文件与代码分离便于维护和国际化。## 创建你的第一个应用### 步骤1新建项目打开DevEco Studio点击“Create HarmonyOS Project”选择“Empty Ability”模板。填写项目名称例如HelloWorld选择API版本推荐使用API 9以上点击Finish完成创建。### 步骤2理解主入口文件项目创建后打开entry/src/main/ets/Index.ets文件。这是应用的默认页面代码如下typescript// 导入必要的鸿蒙框架模块import router from ohos.router;// 定义数据模型用于页面状态管理EntryComponentstruct Index { // 响应式状态变量当值变化时自动更新UI State message: string Hello, HarmonyOS!; // 构建UI的方法 build() { // 使用Column布局排列子组件 Column() { // 文本组件显示当前状态变量 Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) .margin({ bottom: 20 }) // 按钮组件点击时触发事件 Button(Click Me) .fontSize(20) .backgroundColor(#007BFF) .onClick(() { // 点击后使用路由跳转到第二个页面 router.pushUrl({ url: pages/Second }); }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) }}这段代码展示了鸿蒙应用的核心特性使用Entry和Component装饰器定义页面组件State管理响应式数据build()方法描述UI结构。整个UI采用声明式语法类似于SwiftUI或Flutter。### 步骤3运行应用连接鸿蒙设备或启动模拟器点击工具栏的“Run”按钮。首次运行可能需要等待构建完成。你会看到模拟器或真机上显示一个居中的“Hello, HarmonyOS!”文本和一个蓝色按钮。## 扩展功能添加第二个页面一个完整的应用通常包含多个页面。下面我们创建一个新的页面并实现页面间跳转。### 创建新页面在entry/src/main/ets/目录下新建文件Second.ets代码如下typescript// 导入路由模块import router from ohos.router;// 定义第二个页面的组件EntryComponentstruct Second { // 接收从首页传递过来的参数 State data: string ; // 页面生命周期函数当页面显示时触发 onPageShow() { // 获取路由参数 const params router.getParams(); if (params) { // 从参数中提取数据 this.data params[info] as string; } } build() { Column() { // 显示接收到的数据 Text(this.data) .fontSize(30) .margin({ bottom: 20 }) // 返回按钮 Button(Go Back) .fontSize(20) .backgroundColor(#28A745) .onClick(() { // 返回上一页 router.back(); }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) }}### 修改首页传递参数回到Index.ets修改按钮的点击事件传递参数typescriptButton(Click Me) .fontSize(20) .backgroundColor(#007BFF) .onClick(() { // 传递参数到第二个页面 router.pushUrl({ url: pages/Second, params: { info: Welcome to HarmonyOS! } }); })### 配置路由在entry/src/main/resources/base/profile/main_pages.json中添加新页面路由json{ src: [ pages/Index, pages/Second ]}运行时点击首页按钮会跳转到第二页显示传递的字符串“Welcome to HarmonyOS!”点击“Go Back”按钮返回首页。这种页面间数据传递和路由机制是构建复杂应用的基础。## 深入理解声明式UI与状态管理鸿蒙应用开发的最大特点是使用声明式UI。与传统的命令式编程不同开发者只需描述UI应该是什么样子系统会自动处理状态变化时的UI更新。例如当State变量message变化时所有引用它的组件都会自动重绘。这种模式带来了几个好处1.代码更简洁无需手动操作DOM或视图2.更易维护状态变化与UI更新逻辑解耦3.性能优化框架只更新变化的部分## 总结通过本篇文章你已经成功创建并运行了第一个鸿蒙应用。从项目结构认知、页面组件编写、路由配置到状态管理你体验了鸿蒙应用开发的核心流程。下一步你可以尝试修改UI样式、添加更多组件或集成网络请求功能。记住鸿蒙开发不仅限于手机同样的代码稍作调整即可运行在平板、手表或智慧屏上这就是“一次开发多端部署”的威力。继续探索吧鸿蒙生态的广阔天地等你来征服
