鸿蒙开发入门：Hello World

于 2025-05-10 15:57:53 发布
阅读量1.1k 收藏 15
点赞数 25
文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiaoWang_csdn/article/details/147854547
版权

介绍

本节内容将帮助开发者学习如何构建一个全新的HarmonyOS应用，学习使用DevEco Studio创建新项目、使用预览器预览页面、了解基础组件如Image、Text等。

根据本教程【开发入门：Hello World】创建全新的项目。

根据教程中的提示使用01_Resources文件夹中的文件。

如果您想要自行探索，可以直接打开01_Complete文件夹中的项目并浏览代码。

项目文件下载

下载项目文件开始构建本项目，请根据以下步骤操作：

01_EnvironmentSetup.zip

创建一个新项目

使用DevEco Studio创建一个空项目，了解ArkUI模板代码和预览器的使用方法。

Step 1

搭建开发环境：

  1. 安装DevEco Studio，详情请参考下载和安装软件。
  2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，详情请参考配置代理。

Step 2

打开DevEco Studio，通过如下两种方式，打开工程创建向导界面：

如果当前未打开任何工程，可以在DevEco Studio的欢迎页，选择Create Project开始创建一个新工程。

如果已经打开了工程，可以在菜单栏选择File > New > Create Project来创建一个新工程。

Step 3

点击Create Project按钮后，跳转至Create Project页面，左侧可以选择创建应用或创建元服务。这里选择创建应用Application。选择Empty Ability模板，然后单击Next，进入配置界面。

Step 4

将Project name自定义为QuickStart。

检查Bundle name和Save location是否与命名一致，一般会根据Project name自行更新，也可以根据需要自行更改。

选择Compatible SDK为5.0.5(17)，在编译构建时，DevEco Studio会根据指定的Compatible SDK版本进行编译打包。

开发者可以根据自己IDE版本选择高版本的Compatible SDK，本工程当前为5.0.5(17)。

DevEco Studio会默认勾选除‘Car’以外的全部Device type，保持该选项即可。

Step 5

单击Finish，工具会自动生成示例代码和相关资源。

等待工程创建完成，创建后界面如右图所示。

Step 6

在Project导航栏中选中 entry -> src -> main -> ets -> pages -> Index.ets，即可看到初始创建项目的模板代码。

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello World';
  6. build() {
  7. RelativeContainer() {
  8. Text(this.message)
  9. .id('HelloWorld')
  10. .fontSize($r('app.float.page_text_font_size'))
  11. .fontWeight(FontWeight.Bold)
  12. .alignRules({
  13. center: { anchor: '__container__', align: VerticalAlign.Center },
  14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  15. })
  16. .onClick(() => {
  17. this.message = 'Welcome';
  18. })
  19. }
  20. .height('100%')
  21. .width('100%')
  22. }
  23. }
 

Preview
 

其中，@Component装饰器装饰了struct关键字声明的数据结构Index。Index被@Component装饰后具备组件化的能力，通过实现build方法描述UI。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello World';
  6. build() {
  7. RelativeContainer() {
  8. Text(this.message)
  9. .id('HelloWorld')
  10. .fontSize($r('app.float.page_text_font_size'))
  11. .fontWeight(FontWeight.Bold)
  12. .alignRules({
  13. center: { anchor: '__container__', align: VerticalAlign.Center },
  14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  15. })
  16. .onClick(() => {
  17. this.message = 'Welcome';
  18. })
  19. }
  20. .height('100%')
  21. .width('100%')
  22. }
  23. }
 

No Preview
 

@Entry装饰的@Component将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello World';
  6. build() {
  7. RelativeContainer() {
  8. Text(this.message)
  9. .id('HelloWorld')
  10. .fontSize($r('app.float.page_text_font_size'))
  11. .fontWeight(FontWeight.Bold)
  12. .alignRules({
  13. center: { anchor: '__container__', align: VerticalAlign.Center },
  14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  15. })
  16. .onClick(() => {
  17. this.message = 'Welcome';
  18. })
  19. }
  20. .height('100%')
  21. .width('100%')
  22. }
  23. }
 

No Preview
 

界面由RelativeContainer相对布局容器作为根容器，RelativeContainer支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello World';
  6. build() {
  7. RelativeContainer() {
  8. Text(this.message)
  9. .id('HelloWorld')
  10. .fontSize($r('app.float.page_text_font_size'))
  11. .fontWeight(FontWeight.Bold)
  12. .alignRules({
  13. center: { anchor: '__container__', align: VerticalAlign.Center },
  14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  15. })
  16. .onClick(() => {
  17. this.message = 'Welcome';
  18. })
  19. }
  20. .height('100%')
  21. .width('100%')
  22. }
  23. }
 

No Preview
 

通过Text组件展示一段文本
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello World';
  6. build() {
  7. RelativeContainer() {
  8. Text(this.message)
  9. .id('HelloWorld')
  10. .fontSize($r('app.float.page_text_font_size'))
  11. .fontWeight(FontWeight.Bold)
  12. .alignRules({
  13. center: { anchor: '__container__', align: VerticalAlign.Center },
  14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  15. })
  16. .onClick(() => {
  17. this.message = 'Welcome';
  18. })
  19. }
  20. .height('100%')
  21. .width('100%')
  22. }
  23. }
 

No Preview
 

文本信息由@State装饰器装饰的状态变量message驱动。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello World';
  6. build() {
  7. RelativeContainer() {
  8. Text(this.message)
  9. .id('HelloWorld')
  10. .fontSize($r('app.float.page_text_font_size'))
  11. .fontWeight(FontWeight.Bold)
  12. .alignRules({
  13. center: { anchor: '__container__', align: VerticalAlign.Center },
  14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  15. })
  16. .onClick(() => {
  17. this.message = 'Welcome';
  18. })
  19. }
  20. .height('100%')
  21. .width('100%')
  22. }
  23. }
 

No Preview
 

Text组件定义了组件标识id为HelloWorld，用于唯一指定组件。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello World';
  6. build() {
  7. RelativeContainer() {
  8. Text(this.message)
  9. .id('HelloWorld')
  10. .fontSize($r('app.float.page_text_font_size'))
  11. .fontWeight(FontWeight.Bold)
  12. .alignRules({
  13. center: { anchor: '__container__', align: VerticalAlign.Center },
  14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  15. })
  16. .onClick(() => {
  17. this.message = 'Welcome';
  18. })
  19. }
  20. .height('100%')
  21. .width('100%')
  22. }
  23. }
 

No Preview
 

定义字体大小fontSize取值为$r('app.float.page_text_font_size')资源类型；定义文本的字体粗细fontWeight取值为Bold，即字体较粗。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello World';
  6. build() {
  7. RelativeContainer() {
  8. Text(this.message)
  9. .id('HelloWorld')
  10. .fontSize($r('app.float.page_text_font_size'))
  11. .fontWeight(FontWeight.Bold)
  12. .alignRules({
  13. center: { anchor: '__container__', align: VerticalAlign.Center },
  14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  15. })
  16. .onClick(() => {
  17. this.message = 'Welcome';
  18. })
  19. }
  20. .height('100%')
  21. .width('100%')
  22. }
  23. }
 

No Preview
 

字体大小等数据的值一般存储在\entry\src\main esourcesase\element loat.json文件下，可以按照上文page_text_font_size的方式保存至float.json文件中，并通过$r('app.float.xxx')进行资源引用。
 

alignRules属性用于指定设置在相对容器中子组件的对齐规则，仅当父容器为RelativeContainer时生效，在这里定义Text组件横向居中和纵向居中。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello World';
  6. build() {
  7. RelativeContainer() {
  8. Text(this.message)
  9. .id('HelloWorld')
  10. .fontSize($r('app.float.page_text_font_size'))
  11. .fontWeight(FontWeight.Bold)
  12. .alignRules({
  13. center: { anchor: '__container__', align: VerticalAlign.Center },
  14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  15. })
  16. .onClick(() => {
  17. this.message = 'Welcome';
  18. })
  19. }
  20. .height('100%')
  21. .width('100%')
  22. }
  23. }
 

No Preview
 

Step 7
 

开启右边栏的Previewer，预览器将工程中的@Entry作为实现入口，自动实现预览。
 

 

 

此处需要选中@Entry所在的文件，预览器才能顺利打开。
 

Step 8
 

修改APP的名称为“HMOS世界入门版”。修改entry/src/main/resources/base/element/string.json文件，将EntryAbility_label的value修改为“HMOS世界入门版”。
 

 

  1. {
  2. "string": [
  3. {
  4. "name": "module_desc",
  5. "value": "module description"
  6. },
  7. {
  8. "name": "EntryAbility_desc",
  9. "value": "description"
  10. },
  11. {
  12. "name": "EntryAbility_label",
  13. "value": "HMOS世界入门版"
  14. }
  15. ]
  16. }
 

Preview
 

Step 9
 

修改APP的图标。将01_Resources文件夹中的background.png和foreground.png图片进行复制粘贴到entry/src/main/resources/base/media文件夹中，将其中原本的background.png和foreground.png文件替换掉。
 

 

 

页面结构总览
 

创建好项目后，我们根据需要设计页面的结构进行分析，并确认页面的实现方式。
 

Step 1
 

抽象页面结构
 

 

我们想实现的页面效果如右图所示。
 

 

 

在右图中，我们将页面内的结构抽象三大部分。其中，第1部分为轮播图部分，第2部分为赋能套件部分，第3部分为入门教程部分。
 

 

 

轮播图部分：可自动播放、展示多张图片的组件，命名为Banner，每一个元素为BannerItem
 

 

 

赋能套件部分：横向可滑动的组件，命名为Enablement ，由多个EnablementItem组成。
 

 

 

入门教程部分：纵向可滑动的组件，命名为Tutorial ，由多个TutorialItem组成。
 

 

 

Step 2
 

选择布局实现页面
 

轮播图部分：Swiper组件提供滑动轮播显示的能力。
 

 

 

赋能套件部分：Grid组件为网格容器，由“行”和“列”分割的单元格所组成，其中容器内各条目对应一个GridItem组件。如果仅设置行、列数量与占比中的一个，网格单元将按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。在这部分，可以设置单行显示，则赋能套件部分可以横向滑动。
 

 

 

入门教程部分：List容器可以轻松高效地显示结构化、可滚动的信息。当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。
 

 

 

接下来，我们将从最简单的步骤开始，一步步实现这个页面。
 

自定义文本视图
 

通过更改代码可以自定义视图，或者使用Inspector查询对应视图可更改的代码。 在设计布局时，DevEco Studio的Previewer工具可以实时提供反馈，以便观察代码如何转化为对应布局，反之，也可以根据布局效果调整代码。
 

Step 1
 

将原本Index文件中的内容并改为如右侧代码所示的内容。
 

更改 @State 装饰器装饰的状态变量message文字，可以驱动视图的更新。
 

 

将'Hello World'修改为'快速入门'，这就是本应用程序中第一个页面的标题。可以看到，修改代码后，预览器会即时根据代码更新。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = '快速入门';
  6. build() {
  7. RelativeContainer() {
  8. Text(this.message)
  9. .id('HelloWorld')
  10. .fontSize(50)
  11. .fontWeight(FontWeight.Bold)
  12. .alignRules({
  13. center: { anchor: '__container__', align: VerticalAlign.Center },
  14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  15. })
  16. }
  17. .height('100%')
  18. .width('100%')
  19. }
  20. }
 

Preview
 

此处修改的是文本内容，需要手动保存（ctrl+s）后，预览器才会更新；如果修改的是相关属性，则不需要手动保存，预览器也会更新。
 

Step 2
 

如右图所示，点击Previewer工具栏的Inspector工具开启Inspector，可以观察到当前组件树，并与预览器交互。
 

 

 

点击组件树的部件，或者直接点击预览器视图中的元素，代码编辑器会自动跳转并框选至对应的代码块，同时显示相关信息。
 

 

 

Step 3
 

调整文本视图。
 

 

修改fontSize属性为24，fontWeight属性为700。可以看到随着代码的修改，预览器中的视图和代码编辑器的代码也会随之改变。
 

 

 

Step 4
 

如右图所示，观察可得，页面整体布局沿垂直方向布局。
 

 

 

将根容器从RelativeContainer更改为Column。
 

 

Column容器可以使组件内的元素沿垂直方向布局。删除Text组件的alignRules属性，这是由于alignRules属性在Column容器中不生效。删除Text组件的id属性，因为不需要识别该组件。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = '快速入门';
  6. build() {
  7. Column() {
  8. Text(this.message)
  9. .fontSize(24)
  10. .fontWeight(700)
  11. }
  12. .height('100%')
  13. .width('100%')
  14. .backgroundColor('#F1F3F5')
  15. }
  16. }
 

Preview
 

为整体组件添加背景色，取值为'#F1F3F5'。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = '快速入门';
  6. build() {
  7. Column() {
  8. Text(this.message)
  9. .fontSize(24)
  10. .fontWeight(700)
  11. }
  12. .height('100%')
  13. .width('100%')
  14. .backgroundColor('#F1F3F5')
  15. }
  16. }
 

Preview
 

Step 5
 

手动编辑代码，将'快速入门'置于屏幕左上角。
 

 

修改文本与屏幕左侧边距，首先将Text组件宽度设置为占满屏幕（100%），并设置文本对齐属性为Start，文本在Text组件内会向左对齐。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = '快速入门';
  6. build() {
  7. Column() {
  8. Text(this.message)
  9. .fontSize(24)
  10. .fontWeight(700)
  11. .width('100%')
  12. .textAlign(TextAlign.Start)
  13. }
  14. .height('100%')
  15. .width('100%')
  16. .backgroundColor('#F1F3F5')
  17. }
  18. }
 

Preview
 

设置文本左边距，padding属性可以设置内容器向内的边距，此处设置左边距（left）为16。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = '快速入门';
  6. build() {
  7. Column() {
  8. Text(this.message)
  9. .fontSize(24)
  10. .fontWeight(700)
  11. .width('100%')
  12. .textAlign(TextAlign.Start)
  13. .padding({ left: 16 })
  14. }
  15. .height('100%')
  16. .width('100%')
  17. .backgroundColor('#F1F3F5')
  18. }
  19. }
 

Preview
 

设置fontFamily字体属性为'HarmonyHeiTi-Bold'，设置lineHeight行高属性为33。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = '快速入门';
  6. build() {
  7. Column() {
  8. Text(this.message)
  9. .fontSize(24)
  10. .fontWeight(700)
  11. .width('100%')
  12. .textAlign(TextAlign.Start)
  13. .padding({ left: 16 })
  14. .fontFamily('HarmonyHeiTi-Bold')
  15. .lineHeight(33)
  16. }
  17. .height('100%')
  18. .width('100%')
  19. .backgroundColor('#F1F3F5')
  20. }
  21. }
 

Preview
 

HarmonyHeiTi-Bold字体为较粗的鸿蒙黑体，已在DevEco Studio中内置，直接使用即可。
 

创建Image组件
 

在上一节中，我们创建了标题视图，接下来需要使用Image组件添加图片。Previewer可以直接预览@Entry装饰器装饰的整个页面，也可以预览由@Preview装饰器装饰的单独组件。 本节中将学习如何单独预览组件视图，并将视图组合进整个页面。
 

Step 1
 

在当前Index.ets文件内建立一个命名为Banner的空组件，并用@Preview装饰器装饰，以便单独预览组件。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = '快速入门';
  6. build() {
  7. Column() {
  8. Text(this.message)
  9. .fontSize(24)
  10. .fontWeight(700)
  11. .width('100%')
  12. .textAlign(TextAlign.Start)
  13. .padding({ left: 16 })
  14. .fontFamily('HarmonyHeiTi-Bold')
  15. .lineHeight(33)
  16. }
  17. .height('100%')
  18. .width('100%')
  19. .backgroundColor('#F1F3F5')
  20. }
  21. }
  23. @Preview
  24. @Component
  25. struct Banner {
  26. build() {
  28. }
  29. }
 

No Preview
 

Step 2
 

在Banner组件中添加图片。
 

 

首先，将01_Resources文件夹中的banner_pic1.png放置在entry -> src -> main -> resources -> base -> media路径下。
 

 

 

ArkUI提供了Image组件用于显示图片，此处使用$r('app.media. 文件名字')的方式将media文件夹下的图片读取到Image组件内。
 

设置图片的填充效果为Contain模式，即保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = '快速入门';
  6. build() {
  7. Column() {
  8. Text(this.message)
  9. .fontSize(24)
  10. .fontWeight(700)
  11. .width('100%')
  12. .textAlign(TextAlign.Start)
  13. .padding({ left: 16 })
  14. .fontFamily('HarmonyHeiTi-Bold')
  15. .lineHeight(33)
  16. }
  17. .height('100%')
  18. .width('100%')
  19. .backgroundColor('#F1F3F5')
  20. }
  21. }
  23. @Preview
  24. @Component
  25. struct Banner {
  26. build() {
  27. Image($r('app.media.banner_pic1'))
  28. .objectFit(ImageFit.Contain)
  29. }
  30. }
 

No Preview
 

Step 3
 

预览Banner组件。
 

 

将预览器调整至组件预览模式，可以单独观察到组件的视图预览。值得注意的是，此时的Inspector是不可用状态。
 

 

 

Step 4
 

组合标题和图片视图。
 

 

在@Entry装饰器装饰的Index组件中引入Banner组件，放在Text的下方，使用预览器预览完整视图。
 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = '快速入门';
  6. build() {
  7. Column() {
  8. Text(this.message)
  9. .fontSize(24)
  10. .fontWeight('700')
  11. .width('100%')
  12. .textAlign(TextAlign.Start)
  13. .padding({ left: 16 })
  14. .fontFamily('HarmonyHeiTi-Bold')
  15. .lineHeight(33)
  16. Banner()
  17. }
  18. .height('100%')
  19. .width('100%')
  20. .backgroundColor('#F1F3F5')
  21. }
  22. }
  24. @Preview
  25. @Component
  26. struct Banner {
  27. build() {
  28. Image($r('app.media.banner_pic1'))
  29. .objectFit(ImageFit.Contain)
  30. }
  31. }
 

Preview
 

Step 5
 

调整图片的属性以达到设计效果。
 

 

设置Image组件宽度为铺满整个屏幕
 

 

  1. @Preview
  2. @Component
  3. struct Banner {
  4. build() {
  5. Image($r('app.media.banner_pic1'))
  6. .objectFit(ImageFit.Contain)
  7. .width('100%')
  8. }
  9. }
 

Preview
 

设置图片与标题和边框的边距。
 

padding属性可以设置内容器向内的边距，此处设置左右边距（left、right）为16，上边距（top）为11。
 

 

  1. @Preview
  2. @Component
  3. struct Banner {
  4. build() {
  5. Image($r('app.media.banner_pic1'))
  6. .objectFit(ImageFit.Contain)
  7. .width('100%')
  8. .padding({ top: 11, left: 16, right: 16 })
  9. }
  10. }
 

Preview
 

设置图片四角的圆角值为16。
 

 

  1. @Preview
  2. @Component
  3. struct Banner {
  4. build() {
  5. Image($r('app.media.banner_pic1'))
  6. .objectFit(ImageFit.Contain)
  7. .width('100%')
  8. .padding({ top: 11, left: 16, right: 16 })
  9. .borderRadius(16)
  10. }
  11. }
 

 

 

Preview
 

至此，我们已经学会了如何自定义文本视图，以及使用Image组件加载资源文件展示图片。

                

        

    

  


            

                    
            


    



                



	

		

			

				
					
鸿蒙OS开发：HelloWorld探秘

				
			

			

				

					JfdCoding的博客
				

				

					09-19
					
					159
					
				

			

		

		

			
				
在"entry"文件夹下，可以找到"resource"文件夹。在该文件夹下，我们可以找到"layout"文件夹。在"layout"文件夹下，我们可以找到"ability_main.xml"文件。打开HarmonyOS DevEco Studio，点击菜单栏中的"File"，然后选择"New"，再选择"HarmonyOS Project"。在弹出的对话框中，输入项目的名称和路径，然后点击"Finish"按钮创建项目。在该文件夹下，我们可以找到"MainAbility"类，这是我们的应用程序的入口类。

			
		

	



                

            
              



	

		

			

				
					
华为Harmony应用开发初探

				
			

			

				

					xiangzhihong8的专栏
				

				

					07-08
					
					1610
					
				

			

		

		

			
				
HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上，HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备，提供全场景（移动办公、运动健康、社交通信、媒体娱乐等）业务能力。HarmonyOS提供了支持多种开发语言的API，供开发者进行应用开发。

			
		

	



              


  
              

                


	

		

			

				
					
鸿蒙(HarmonyOS)应用开发指南

				
			

			

				

					奇舞周刊
				

				

					01-11
					
					6107
					
				

			

		

		

			
				
1. 概述1.1 简介鸿蒙（即 HarmonyOS ，开发代号 Ark，正式名称为华为终端鸿蒙智能设备操作系统软件）是华为公司自 2012 年以来开发的一款可支持鸿蒙原生应用和兼容 AOSP 应用的分布式操作系统。该系统利用“分布式”技术将手机、电脑、平板、电视、汽车和智能穿戴等多款设备融合成一个“超级终端”，使用户便于操作和共享各种设备的资源。1.2 本文读者收获帮助开发者全面了解 Harmon...

			
		

	





	

		

			

				
					
HarmonyOS应用开发快速入门

				
			

			

				

					RZer的博客
				

				

					01-30
					
					1904
					
				

			

		

		

			
				
根据本教程【开发入门：Hello World】创建全新的项目。根据教程中的提示使用01_Resources文件夹中的文件。如果您想要自行探索，可以直接打开01_Complete文件夹中的项目并浏览代码。项目文件下载通过更改代码可以自定义视图，或者使用Inspector查询对应视图可更改的代码。在设计布局时，DevEco Studio的Previewer工具可以实时提供反馈，以便观察代码如何转化为对应布局，反之，也可以根据布局效果调整代码。

			
		

	



		

			
		



	

		

			

				
					
Harmony OS应用开发

				
			

			

				

					m0_64838544的博客
				

				

					06-13
					
					161
					
				

			

		

		

			
				
开发环境搭建：(101条消息) 鸿蒙应用开发：安装DevEco Studio及环境配置_czx鑫的博客-CSDN博客_devecohelloworld 应用体验  注意：1.不要忘记在config.json文件中配置相关路由；2.pages.chart 文件夹下面的 hml、css、js 文件必须命名为 index，否则的话会出现预览错误。 3.ES6 Model 数据文件 import 导入只能使用相对路径，不能使用绝对路径，使用绝对路径会报错。...

			
		

	





	

		

			

				
					
HDC2021技术分论坛：HarmonyOS低代码开发介绍

				
			

			

				

					HarmonyOSDev的博客
				

				

					11-25
					
					2125
					
				

			

		

		

			
				
作者：sunyuhui，wangxiaoyan，华为2012实验室软件IDE专家



什么是低代码开发？低代码开发主要特点有哪些？如何利用低代码开发原子化服务？本文带你一探究竟~

目录

一、什么是HarmonyOS低代码开发？

二、HarmonyOS低代码开发界面介绍

三、HarmonyOS低代码开发的主要特点

四、HarmonyOS低代码开发示例

一、什么是HarmonyOS低代码开发？

低代码开发，顾名思义，就是用更少的代码量，完成更高效的应用交付。低代码开发让更多的人可以参与到应用程序

			
		

	





	

		

			

				
					
前端开发 | 鸿蒙(HarmonyOS)应用开发指南

				
			

			

				

					360技术
				

				

					01-18
					
					1万+
					
				

			

		

		

			
				
1. 概述1.1 简介鸿蒙（即 HarmonyOS ，开发代号 Ark，正式名称为华为终端鸿蒙智能设备操作系统软件）是华为公司自 2012 年以来开发的一款可支持鸿蒙原生应用和兼容 AOSP 应用的分布式操作系统。该系统利用“分布式”技术将手机、电脑、平板、电视、汽车和智能穿戴等多款设备融合成一个“超级终端”，使用户便于操作和共享各种设备的资源。1.2 本文读者收获帮助开发者全面了解 Harmon...

			
		

	





	

		

			

				
					
小支同学的学习笔记《HarmonyOS应用开发入门：从Hello World到自定义UI组件》

					
最新发布

				
			

			

				

					03-25
				

			

		

		

			
				
《HarmonyOS应用开发入门：从Hello World到自定义UI组件》

			
		

	





	

		

			

				
					
鸿蒙开发入门： ArkTS语言详解与HelloWorld实践

				
			

			

				

					
				

			

		

		

			
				
"移动开发领域的鸿蒙操作系统(HarmonyOS)入门教程，专注于 HelloWorld 示例和 ArkTS 语言的介绍。"  在移动开发领域，HarmonyOS 是华为推出的一款面向全场景的分布式操作系统，旨在打破设备间的界限，实现跨平台、跨...

			
		

	





	

		

			

				
					
初识鸿蒙应用开发：Hello World应用实例

				
			

			

				

					
				

			

		

		

			
				
鸿蒙应用开发是指使用华为自主研发的鸿蒙（Harmony）OS开发应用程序的过程。鸿蒙OS以分布式技术为核心，提供了统一的编译、调试和运行环境，使开发者能够在不同设备上构建无缝衔接的应用体验。鸿蒙应用开发具有高度...

			
		

	





	

		

			

				
					
鸿蒙开发教程：从HelloWorld开始

				
			

			

				

					
				

			

		

		

			
				
特别提到 "鸿蒙开发helloworld"，表明学习笔记中应该包含了如何使用鸿蒙系统提供的开发工具和环境，从创建一个最基础的“Hello World”应用程序开始，逐步深入到鸿蒙系统的应用开发。  标签 "harmony", "harmonyos",...

			
		

	





	

		

			

				
					
鸿蒙HarmonyOS开发：零基础也能成为开发者

					
热门推荐

				
			

			

				

					在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
				

				

					05-14
					
					1万+
					
				

			

		

		

			
				
HarmonyOS就是我们说的华为鸿蒙系统，HarmonyOS是一款全新的面向全场景的分布式操作系统。在传统的单设备系统能力基础上，HarmonyOS 提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备，提供全场景（移动办公、运动健康、社交通信、媒体娱乐等）业务能力。

			
		

	





	

		

			

				
					
HarmonyOS/OpenHarmony应用开发

				
			

			

				

					m0_68231587的博客
				

				

					06-13
					
					1514
					
				

			

		

		

			
				
其中，方舟JS运行时（Ark JS Runtime）是OpenHarmony上JavaScript应用使用的运行时，包含了JS对象的分配器以及垃圾回收器、符合ECMAScript规范的标准库、用于运行Ark前端组件生成的方舟字节码（Aark Bytecode）的解释器、用于存储隐藏类的内联缓存、对外的函数接口（AFFI）等模块。它提供了一系列模块化的组件和API，包括应用管理、模块管理、服务管理、数据管理等功能，开发者可以根据需求选择不同的组件和API，快速构建出高度模块化、可扩展的应用程序。

			
		

	





	

		

			

				
					
鸿蒙（HarmonyOS）开发体验

				
			

			

				

					datian1234的博客
				

				

					01-02
					
					1383
					
				

			

		

		

			
				
鸿蒙的发展其实有一段时间了，并且随着鸿蒙的发展一直都有两方面的争议，一方认为鸿蒙是基于Android开发的操作系统，质疑鸿蒙只是把外表改了的Android；另一方则认为鸿蒙是华为自主研发的操作系统，在智能手机和智能平板应用上采用的与Android兼容。

			
		

	





	

		

			

				
					
鸿蒙 DevEco Studio 3.1 入门指南

				
			

			

				

					qq_30998053的博客
				

				

					12-28
					
					2908
					
				

			

		

		

			
				
此篇文章从下载到运行做个记录，精简了很多，可查阅官方文档更为细致。

			
		

	





	

		

			

				
					
HarmonyOS应用开发者基础认证

				
			

			

				

					小蜗牛的珍贵百宝箱
				

				

					02-21
					
					2866
					
				

			

		

		

			
				
HarmonyOS（鸿蒙操作系统）是华为推出的一款跨平台操作系统，旨在为不同类型的设备提供统一的操作体验，包括智能手机、智能家居、车载设备、智能穿戴等。分布式架构：可以在多种设备之间实现无缝协作。微内核设计：提供更高的安全性和性能。丰富的开发工具和服务：提供包括HMS Core等一系列工具和API，帮助开发者更高效地构建应用。通过本文的学习，我们了解了鸿蒙操作系统的基本开发流程，包括如何创建和布局UI、如何处理事件、如何进行调试与发布。鸿蒙基础组件。

			
		

	





	

		

			

				
					
HarmonyOS应用开发概述、HarmonyOS应用开发环境配置与使用

				
			

			

				

					weixin_43760716的博客
				

				

					11-18
					
					273
					
				

			

		

		

			
				
1概述
4架构图：应用层 框架层 系统服务层 内核层
3特性：硬件互助资源共享 一次开发多端部署 统一OS弹性部署
4分布式技术：分布式软总线 设备虚拟化 分布式任务调度 分布式数据管理重要的配置文件：
app.json5 应用全局的配置信息 户口本第一页
module.json5 模块配置文件（模块名、页面、Ability、权限、设备类型、权限）
main_pages.json 路由表
build-profile.json5 项目编译构建的配置文件重要的文件夹：
entry>src>main>ets   

			
		

	





	

		

			

				
					
【HarmonyOS开发】超详细的ArkTS入门

				
			

			

				

					Android23333的博客
				

				

					12-30
					
					4560
					
				

			

		

		

			
				
当我们打开这个hello world的时候，是不是整个人都有些懵？不知道从哪里下手了是不是呀？不要紧，咱们来把它分解开来就可以把他们拆成这几个部分了，如果看不懂可以暂时忽略下面冒号后面的内容**装饰器：**用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。

			
		

	





	

		

			

				
					
鸿蒙Harmony应用开发—ArkTS-全局UI方法（自定义组件的生命周期）

				
			

			

				

					m0_64420071的博客
				

				

					03-21
					
					2682
					
				

			

		

		

			
				
自定义组件的生命周期

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
code_shenbing

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值