鸿蒙课程学习总结（01）

Windows环境

运行环境要求

为保证DevEco Studio正常运行，建议电脑配置满足如下要求：

• 操作系统：Windows10 64位、Windows11 64位
• 内存：16GB及以上
• 硬盘：100GB及以上
• 分辨率：1280*800像素及以上

安装DevEco Studio

1. 下载完成后，双击下载的“deveco-studio-xxxx.exe”，进入DevEco Studio安装向导。在如下界面选择安装路径，默认安装于C:\Program Files路径下，也可以单击Browse...指定其他安装路径，然后单击Next。

   

2. 在如下安装选项界面勾选DevEco Studio后，单击Next，直至安装完成。

   

3. 安装完成后，单击Finish完成安装。

   

   说明

   • DevEco Studio提供开箱即用的开发体验，将HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包，简化DevEco Studio安装配置流程。
   • HarmonyOS SDK已嵌入DevEco Studio中，无需额外下载配置。如需进行OpenHarmony应用开发，可通过Settings > OpenHarmony SDK页签下载OpenHarmony SDK。

macOS环境

运行环境要求

为保证DevEco Studio正常运行，建议电脑配置满足如下要求：

• 操作系统：macOS(X86) 12/13/14 macOS(ARM) 12/13/14
• 内存：8GB及以上
• 硬盘：100GB及以上
• 分辨率：1280*800像素及以上

安装DevEco Studio

1. 在安装界面中，将“DevEco-Studio.app”拖拽到“Applications”中，等待安装完成。

   

2. 安装完成后，接下来请根据配置代理，检查和配置开发环境。

   说明

   • DevEco Studio提供开箱即用的开发体验，将HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包，简化DevEco Studio安装配置流程。
   • HarmonyOS SDK已嵌入DevEco Studio中，无需额外下载配置。如需进行OpenHarmony应用开发，可通过DevEco Studio > Preferences > OpenHarmony SDK页签下载OpenHarmony SDK。

诊断开发环境

为了您开发应用/服务的良好体验，DevEco Studio提供了开发环境诊断的功能，帮助您识别开发环境是否完备。您可以在欢迎页面单击Diagnose进行诊断。如果您已经打开了工程开发界面，也可以在菜单栏单击Help > Diagnostic Tools > Diagnose Development Environment进行诊断。

DevEco Studio开发环境诊断项包括电脑的配置、网络的连通情况、依赖的工具是否安装等。如果检测结果为未通过，请根据检查项的描述和修复建议进行处理。

启用中文化插件

1. 单击File > Settings > Plugins，选择Installed页签，在搜索框输入“Chinese”，搜索结果里将出现Chinese(Simplified)，在右侧单击Enable，单击OK。

   

2. 在弹窗中单击Restart，重启DevEco Studio后即可生效。

   

创建ArkTS工程

1. 若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
2. 选择Application应用开发（本文以应用开发为例，Atomic Service对应为元服务开发），选择模板“Empty Ability”，点击Next进行下一步配置。

   

3. 进入配置工程界面，Compatible SDK选择“5.0.0(12)”，其他参数保持默认设置即可。

   

4. 点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

ArkTS工程目录结构（Stage模型）

• AppScope > app.json5：应用的全局配置信息，详见app.json5配置文件。
• entry：HarmonyOS工程模块，编译构建生成一个HAP包。
  • src > main > ets：用于存放ArkTS源码。
  • src > main > ets > entryability：应用/服务的入口。
  • src > main > ets > entrybackupability：应用提供扩展的备份恢复能力。
  • src > main > ets > pages：应用/服务包含的页面。
  • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
  • src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
  • build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
  • hvigorfile.ts：模块级编译构建任务脚本。
  • obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。详见开启代码混淆。
  • oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。
• oh_modules：用于存放三方库依赖信息。

• build-profile.json5：工程级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。

• hvigorfile.ts：工程级编译构建任务脚本。

• oh-package.json5：主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

构建第一个页面

1. 使用文本组件。

   工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，进行页面的编写。

   针对本文中使用文本/按钮来实现页面跳转/返回的应用场景，页面均使用Row和Column组件来组建布局。对于更多复杂元素对齐的场景，可选择使用RelativeContainer组件进行布局。

   “Index.ets”文件的示例如下：

   1. // Index.ets
   2. @Entry
   3. @Component
   4. struct Index {
   5. @State message: string = 'Hello World'
   7. build() {
   8. Row() {
   9. Column() {
   10. Text(this.message)
   11. .fontSize(50)
   12. .fontWeight(FontWeight.Bold)
   13. }
   14. .width('100%')
   15. }
   16. .height('100%')
   17. }
   18. }

2. 添加按钮。

   在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“Index.ets”文件的示例如下：

   1. // Index.ets
   2. @Entry
   3. @Component
   4. struct Index {
   5. @State message: string = 'Hello World'
   7. build() {
   8. Row() {
   9. Column() {
   10. Text(this.message)
   11. .fontSize(50)
   12. .fontWeight(FontWeight.Bold)
   13. // 添加按钮，以响应用户点击
   14. Button() {
   15. Text('Next')
   16. .fontSize(30)
   17. .fontWeight(FontWeight.Bold)
   18. }
   19. .type(ButtonType.Capsule)
   20. .margin({
   21. top: 20
   22. })
   23. .backgroundColor('#0D9FFB')
   24. .width('40%')
   25. .height('5%')
   26. }
   27. .width('100%')
   28. }
   29. .height('100%')
   30. }
   31. }

3. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：

   

构建第二个页面

1. 创建第二个页面。

   • 新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“Second”，点击回车键。可以看到文件目录结构如下：

     

     说明

     开发者也可以在右键点击“pages”文件夹时，选择“New > Page > Empty Page”，命名为“Second”，点击“Finish”完成第二个页面的创建。使用此种方式则无需再进行下文中第二个页面路由的手动配置。

   • 配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：

     1. {
     2. "src": [
     3. "pages/Index",
     4. "pages/Second"
     5. ]
     6. }

2. 添加文本及按钮。

   参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“Second.ets”文件的示例如下：

   1. // Second.ets
   2. @Entry
   3. @Component
   4. struct Second {
   5. @State message: string = 'Hi there'
   7. build() {
   8. Row() {
   9. Column() {
   10. Text(this.message)
   11. .fontSize(50)
   12. .fontWeight(FontWeight.Bold)
   13. Button() {
   14. Text('Back')
   15. .fontSize(25)
   16. .fontWeight(FontWeight.Bold)
   17. }
   18. .type(ButtonType.Capsule)
   19. .margin({
   20. top: 20
   21. })
   22. .backgroundColor('#0D9FFB')
   23. .width('40%')
   24. .height('5%')
   25. }
   26. .width('100%')
   27. }
   28. .height('100%')
   29. }
   30. }

实现页面间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

如果需要实现更好的转场动效，推荐使用Navigation。

1. 第一个页面跳转到第二个页面。

   在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“Index.ets”文件的示例如下：

   1. // Index.ets
   2. // 导入页面路由模块
   3. import { router } from '@kit.ArkUI';
   4. import { BusinessError } from '@kit.BasicServicesKit';
   6. @Entry
   7. @Component
   8. struct Index {
   9. @State message: string = 'Hello World'
   11. build() {
   12. Row() {
   13. Column() {
   14. Text(this.message)
   15. .fontSize(50)
   16. .fontWeight(FontWeight.Bold)
   17. // 添加按钮，以响应用户点击
   18. Button() {
   19. Text('Next')
   20. .fontSize(30)
   21. .fontWeight(FontWeight.Bold)
   22. }
   23. .type(ButtonType.Capsule)
   24. .margin({
   25. top: 20
   26. })
   27. .backgroundColor('#0D9FFB')
   28. .width('40%')
   29. .height('5%')
   30. // 跳转按钮绑定onClick事件，点击时跳转到第二页
   31. .onClick(() => {
   32. console.info(`Succeeded in clicking the 'Next' button.`)
   33. // 跳转到第二页
   34. router.pushUrl({ url: 'pages/Second' }).then(() => {
   35. console.info('Succeeded in jumping to the second page.')
   37. }).catch((err: BusinessError) => {
   38. console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
   39. })
   40. })
   41. }
   42. .width('100%')
   43. }
   44. .height('100%')
   45. }
   46. }

2. 第二个页面返回到第一个页面。

   在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。“Second.ets”文件的示例如下：

   1. // Second.ets
   2. // 导入页面路由模块
   3. import { router } from '@kit.ArkUI';
   4. import { BusinessError } from '@kit.BasicServicesKit';
   6. @Entry
   7. @Component
   8. struct Second {
   9. @State message: string = 'Hi there'
   11. build() {
   12. Row() {
   13. Column() {
   14. Text(this.message)
   15. .fontSize(50)
   16. .fontWeight(FontWeight.Bold)
   17. Button() {
   18. Text('Back')
   19. .fontSize(25)
   20. .fontWeight(FontWeight.Bold)
   21. }
   22. .type(ButtonType.Capsule)
   23. .margin({
   24. top: 20
   25. })
   26. .backgroundColor('#0D9FFB')
   27. .width('40%')
   28. .height('5%')
   29. // 返回按钮绑定onClick事件，点击按钮时返回到第一页
   30. .onClick(() => {
   31. console.info(`Succeeded in clicking the 'Back' button.`)
   32. try {
   33. // 返回第一页
   34. router.back()
   35. console.info('Succeeded in returning to the first page.')
   36. } catch (err) {
   37. let code = (err as BusinessError).code;
   38. let message = (err as BusinessError).message;
   39. console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
   40. }
   41. })
   42. }
   43. .width('100%')
   44. }
   45. .height('100%')
   46. }
   47. }

3. 打开Index.ets文件，点击预览器中的

   

   按钮进行刷新。效果如下图所示：

   

使用真机运行应用

1. 将搭载HarmonyOS系统的真机与电脑连接。具体指导及要求，可查看使用本地真机运行应用/服务。
2. 点击File > Project Structure... > Project > SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”，点击界面提示的“Sign In”，使用华为帐号登录。等待自动签名完成后，点击“OK”即可。如下图所示：

   

3. 在编辑窗口右上角的工具栏，点击

   

   按钮运行。效果如下图所示：

   

你已经基于Stage模型构建完成第一个ArkTS应用

DevEco Studio支持使用多种语言进行应用/服务的开发，包括ArkTS、JS和C/C++。在编写应用/服务阶段，可以通过掌握代码编写的各种常用技巧，来提升编码效率。

代码高亮

支持对代码关键字、运算符、字符串、类、标识符、注释等进行高亮显示，您可以打开File > Settings（macOS为DevEco Studio > Preferences）面板，在Editor > Color Scheme自定义各字段的高亮显示颜色。默认情况下，您可以在Language Defaults中设置源代码中的各种高亮显示方案，该设置将对所有语言生效；如果您需要针对具体语言的源码高亮显示方案进行定制，可以在左侧边栏选择对应的语言，然后取消“Inherit values from”选项后设置对应的颜色即可。

代码跳转

在编辑器中，可以按住Ctrl键（macOS为Command键），鼠标单击代码中引用的类、方法、参数、变量等名称，自动跳转到定义处。若单击定义处的类、变量等名称，当仅有一处引用时，可直接跳转到引用位置；若有多处引用，在弹窗中可以选择想要查看的引用位置。

跨语言跳转

DevEco Studio支持在声明或引用了Native接口的文件中（如d.ts）跨语言跳转其对应的C/C++函数，从而提升混合语言开发时的开发效率。您可以选中接口名称单击右键，在弹出的菜单中选择Go To > Implementation(s)（或使用快捷键Ctrl+Alt+B，macOS为Command+Option+B）实现跨语言跳转。

代码格式化

代码格式化功能可以帮助您快速的调整和规范代码格式，提升代码的美观度和可读性。默认情况下，DevEco Studio已预置了代码格式化的规范，您也可以个性化的设置各个文件的格式化规范，设置方式如下：在File > Settings > Editor > Code Style（macOS为DevEco Studio > Preferences > Editor > Code Style）下，选择需要定制的文件类型，如ArkTS，然后自定义格式化规范即可。

在使用代码格式化功能时，您可以使用快捷键Ctrl + Alt + L（macOS为Option+Shift+Command +L） 可以快速对选定范围的代码进行格式化。

如果在进行格式化时，对于部分代码片段不需要进行自动的格式化处理，可以通过如下方式进行设置：

1. 在File > Settings >Editor > Code Style（macOS为DevEco Studio > Preferences > Editor > Code Style），单击“Formatter”，勾选“Turn formatter on/off with markers in code comments”。

   

2. 在不需要进行格式化操作的代码块前增加“//@formatter:off”，在不格式化代码块的最后增加“//@formatter:on”，即表示对该范围的代码块不需要进行格式化操作。

   

若工程已配置code-linter.json5文件，选中code-linter.json5文件右键选择Apply CodeLinter Style Rules，代码格式化规则将与已配置的code-linter.json5文件中相关规则保持一致。code-linter.json5文件配置请参考配置代码检查规则。

代码折叠

支持对代码块的快速折叠和展开，既可以单击编辑器左侧边栏的折叠和展开按钮对代码块进行折叠和展开操作，还可以对选中的代码块单击鼠标右键选择折叠方式，包括折叠、递归折叠、全部折叠等操作。

代码快速注释

支持对选择的代码块进行快速注释，使用快捷键Ctrl+/（macOS为Command+/）进行快速注释。对于已注释的代码块，再次使用快捷键Ctrl+/（macOS为Command+/）取消注释。

代码结构树

使用快捷键Alt + 7 / Ctrl + F12（macOS为Command+7）打开代码结构树，快速查看文件代码的结构树，包括全局变量和函数，类成员变量和方法等，并可以跳转到对应代码行。

代码引用查找

提供Find Usages代码引用查找功能，帮助开发者快速查看某个对象(变量、函数或者类等)被引用的地方，用于后续的代码重构，可以极大的提升开发者的开发效率。

使用方法：在要查找的对象上，单击鼠标右键 > Find Usages或使用快捷键Alt +F7（macOS为Option + F7）。

函数注释生成

DevEco Studio支持在函数定义处，快速生成对应的注释。在函数定义的代码块前，输入“/**”+回车键，快速生成注释信息。

说明

C++文件同时支持使用“//!”+回车键快速生成注释。

代码查找

通过对符号、类或文件的即时导航来查找代码。检查调用或类型层次结构，轻松地搜索工程里的所有内容。通过连续点击两次Shift快捷键，打开代码查找界面，在搜索框中输入需要查找内容，下方窗口实时展示搜索结果。双击查找的结果可以快速打开所在文件的位置。

快速查阅API接口及组件参考文档

在编辑器中调用ArkTS/JS API或组件时，支持在编辑器中快速、精准调取出对应的参考文档。

可在编辑器中，鼠标悬停在需要查阅的接口或组件，弹窗将显示当前接口/组件在不同API版本下的参数等信息，单击弹窗右下角Show in API Reference，可以快速查阅更详细的API文档。

说明

DevEco Studio集成了离线版API参考类文档，最新版本请参考官网HarmonyOS API参考。

在弹窗中可以查看：

1. 使用的API是否涉及权限申请或仅支持在测试框架下使用。
2. 使用的接口状态。deprecated标签表示即将废弃的API接口，可使用useinstead标记的API进行替代，请开发时关注。

Optimize Imports功能

使用编辑器提供的Optimize Imports，可以快速清除未使用的import，并根据设置的规则对import进行合并或排序。选择文件或目录，使用快捷键Ctrl+Alt+O（macOS为Control+Option+O），或单击菜单栏Code > Optimize Imports。

如需修改优化配置，进入File > Settings... > Editor > Code Style，选择开发语言（当前以ArkTS为例），在Imports标签页中，可选择在优化时是否需合并来自同一模块的import，是否需要对同一条import语句导入的元素进行排序，或对多条import语句按模块排序。

查看父类/子类继承关系

编辑器支持查看当前接口、类、方法、属性的继承关系。点击代码编辑区域左侧的Gutter Icons（装订线图标）可以跳转到对应的父/子接口或类。如有多个继承关系，在弹窗的文件列表中选择需要查看的接口/类即可。

• 

  Implemented：支持跳转到对应的实现类或子接口及其对应的属性/方法。

• 

  Implementing：支持跳转到对应的父接口或父接口的属性/方法。

• 

  Overridden：支持跳转到对应的子类或子类的属性/方法。

• 

  Overriding：支持跳转到对应的父类或父类的属性/方法。

查看父类/子类继承关系功能默认开启，可以通过菜单栏进入File > Settings > Editor > General > Gutter Icons，通过勾选或取消勾选Implemented、Implementing、Overridden、Overriding四项可以开启或关闭该功能。