2、DevEco Studio的使用
目录
- IDE环境的搭建
- ArkTS工程目录结构（Stage模型）
- 编辑器的使用
- 代码格式化
- 代码结构树
- 代码引用查找
- 函数注释生成
- 代码查找
- Optimize Imports功能
- 父/子类快速跳转
- 查看接口/类的层次结构
- 快速覆写父类
- 快速生成构造器
- 快速生成get/set方法
- 快速生成声明信息到Index文件
- 预览器的使用
- 页面预览
- 组件预览
- Inspector双向预览
- 使用本地真机运行应用/服务
IDE环境的搭建
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）等。
编辑器的使用
代码格式化
代码格式化功能可以帮助您快速的调整和规范代码格式，提升代码的美观度和可读性。默认情况下，DevEco Studio已预置了代码格式化的规范，您也可以个性化的设置各个文件的格式化规范，设置方式如下：在File > Settings > Editor > Code Style（macOS为DevEco Studio > Preferences > Editor > Code Style）下，选择需要定制的文件类型，如ArkTS，然后自定义格式化规范即可。
在使用代码格式化功能时，您可以使用快捷键Ctrl + Alt + L（macOS为Option+Command +L） 可以快速对选定范围的代码进行格式化。
代码结构树
使用快捷键Alt + 7 / Ctrl + F12（macOS为Command+7）打开代码结构树，快速查看文件代码的结构树，包括全局变量和函数，类成员变量和方法等，并可以跳转到对应代码行。
代码引用查找
提供Find Usages代码引用查找功能，帮助开发者快速查看某个对象(变量、函数或者类等)被引用的地方，用于后续的代码重构，可以极大的提升开发者的开发效率。
使用方法：在要查找的对象上，单击鼠标右键 > Find Usages或使用快捷键Alt +F7（macOS为Option + F7）。点击图片左下角绿色箭头图标查看变量引用情况。点击图片左下角红色箭头图标查看变量赋值位置
函数注释生成
DevEco Studio支持在函数定义处，快速生成对应的注释。在函数定义的代码块前，输入“/**”+回车键，快速生成注释信息。
代码查找
通过对符号、类或文件的即时导航来查找代码。检查调用或类型层次结构，轻松地搜索工程里的所有内容。通过连续点击两次Shift快捷键，打开代码查找界面，在搜索框中输入需要查找内容，下方窗口实时展示搜索结果。双击查找的结果可以快速打开所在文件的位置。
Optimize Imports功能
使用编辑器提供的Optimize Imports，可以快速清除未使用的import，并根据设置的规则对import进行合并或排序。选择文件或目录，使用快捷键Ctrl+Alt+O（macOS为Control+Option+O），或单击菜单栏Code > Optimize Imports。
父/子类快速跳转
编辑器支持快速跳转至当前接口、类、方法、属性的子类/父类。点击代码编辑区域左侧的Gutter Icons（装订线图标）可以跳转到对应的父/子接口或类。如有多个继承关系，在弹窗的文件列表中选择需要查看的接口/类即可。
本功能默认开启，可以通过菜单栏进入File > Settings > Editor > General > Gutter Icons，通过勾选或取消勾选Implemented、Implementing、Overridden、Overriding四项可以开启或关闭该功能。
查看接口/类的层次结构
编辑器支持查看当前接口/类父类或子类的层次结构。选中或将光标放置于类/接口名称处，使用快捷键Ctrl+H，或在菜单栏Navigate页签下选择Type Hierarchy，在弹出的Hierarchy窗口中查看接口/类的继承关系结构。
Hierarchy窗口按钮功能：
快速覆写父类
DevEco Studio提供Override Methods，辅助开发者根据父类模板快速生成子类方法，提升开发效率。将光标放于子类定义位置，使用快捷键Ctrl+O，或右键单击Generate…，选择Override Methods，指定需要覆写的对象（方法、变量等），点击OK将自动生成该对象的覆写代码。
快速生成构造器
编辑器支持为类快速生成一个对应的构造函数。
在类中使用快捷键Alt+Insert，或单击鼠标右键选择Generate…，在弹窗中选择Constructor，选择一个或多个需要生成构造函数的参数，点击OK。若选择Select None，则生成不带参数的构造器。
快速生成get/set方法
编辑器支持为类成员变量或对象属性快速生成get和set方法。
将光标放置在当前类中，单击右键选择Generate…>Getter and Setter，或者使用快捷键Alt+Insert，在菜单中选择Getter and Setter，完成方法快速生成。
快速生成声明信息到Index文件
编辑器支持将HSP和HAR模块中变量、方法、接口、类等需要对外暴露的信息，通过Generate…>Declarations功能，批量在Index.ets文件中进行声明，便于其他模块调用。
在HSP或HAR模块内的文件编辑界面，单击右键选择Generate…>Declarations，或者使用快捷键Alt+Insert，在菜单中选择Declarations，按住快捷键Ctrl并选择需要声明的变量名、方法名、接口名、类名等，即可在模块的Index.ets文件中批量生成相应的声明信息。
预览器的使用
页面预览
ArkTS应用/元服务支持页面预览。页面预览通过在工程的ets文件头部添加@Entry实现。
@Entry的使用参考如下示例：
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}
组件预览
ArkTS应用/元服务支持组件预览。组件预览支持实时预览，不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现，在单个源文件中，最多可以使用10个@Preview装饰自定义组件。
@Preview的使用参考如下示例：
@Preview({title: 'ContentTable'
})
@Component
struct ContentTablePreview {build() {Flex() {ContentTable({ foodItem: getDefaultFoodData() })}}
}
组件预览默认的预览设备为Phone，若您想查看不同的设备，或者不同的屏幕形状，或者不同设备语言等情况下的组件预览效果，可以通过设置@Preview的参数，指定预览设备的相关属性。若不设置@Preview的参数，默认的设备属性如下所示：
@Preview({title: 'Component1', //预览组件的名称deviceType: 'phone', //指定当前组件预览渲染的设备类型，默认为Phonewidth: 1080, //预览设备的宽度，单位：pxheight: 2340, //预览设备的长度，单位：pxcolorMode: 'light', //显示的亮暗模式，当前支持取值为lightdpi: 480, //预览设备的屏幕DPI值locale: 'zh_CN', //预览设备的语言，如zh_CN、en_US等orientation: 'portrait', //预览设备的横竖屏状态，取值为portrait或landscaperoundScreen: false //设备的屏幕形状是否为圆形
})
Inspector双向预览
DevEco Studio提供HarmonyOS应用/元服务的UI预览界面与源代码文件间的双向预览功能，支持ets文件与预览器界面的双向预览。使用双向预览功能时，需要在预览器界面单击图标打开双向预览功能。
开启双向预览功能后，支持代码编辑器、UI界面和Component Tree组件树三者之间的联动：
- 选中预览器UI界面中的组件，则组件树上对应的组件将被选中，同时代码编辑器中的布局文件中对应的代码块高亮显示。
- 选中布局文件中的代码块，则在UI界面会高亮显示，组件树上的组件节点也会呈现被选中的状态。
- 选中组件树中的组件，则对应的代码块和UI界面也会高亮显示。
在预览界面还可以通过组件的属性面板修改可修改的属性或样式，在预览界面修改后，预览器会自动同步到代码编辑器中修改源码，并实时的刷新UI界面；同样的，如果在代码编辑器中修改源码，也会实时刷新UI界面，并更新组件树信息及组件属性。
说明
如果组件有做数据绑定，则其属性不支持在属性面板修改。
如果界面有使用动画效果或者带动画效果组件，则其属性不支持在属性面板修改。
多设备预览时，不支持双向预览。
使用本地真机运行应用/服务
在Phone和Tablet中运行HarmonyOS应用/元服务的操作方法一致，可以采用USB连接方式或者无线调试的连接方式。
前提条件
- 在Phone或Tablet上查看设置 > 系统中开发者选项是否存在，如果不存在，可在设置 > 设备名称中，连续七次单击“版本号”，直到提示“开启开发者选项”，点击确认开启后输入PIN码（如果已设置），设备将自动重启，请等待设备完成重启。
- 在设备运行应用/元服务需要根据为应用/元服务进行签名章节，提前对应用/服务进行签名。
使用USB连接方式
- 使用USB方式，将Phone或Tablet与PC端进行连接。
- 在设置 > 系统 > 开发者选项中，打开“USB调试”开关（确保设备已连接USB）。
- 在Phone或Tablet中会弹出“允许USB调试”的弹框，单击允许
- 在菜单栏中，单击Run>Run’模块名称’或绿色箭头，或使用默认快捷键Shift+F10（macOS为Control+R）运行应用/元服务。
- DevEco Studio启动HAP的编译构建和安装。安装成功后，设备会自动运行安装的HarmonyOS应用/元服务。
说明
设备连接后，如果DevEco Studio无法识别到设备，显示“No device”，请参考设备连接后，无法识别设备的处理指导。
使用无线调试连接方式
- 将Phone/Tablet和PC连接到同一WLAN网络。
- 在设置 > 系统 > 开发者选项中，打开“无线调试”开关，并获取Phone/Tablet端的IP地址和端口号。
- 在PC中执行如下命令连接设备，关于hdc工具的使用指导请参考hdc。
hdc tconn 设备IP地址:端口号
- 在菜单栏中，单击Run>Run’模块名称’或绿色箭头，或使用默认快捷键Shift+F10（macOS为Control+R）运行应用/元服务。
- DevEco Studio启动HAP的编译构建和安装。安装成功后，Phone/Tablet会自动运行安装的HarmonyOS应用/元服务。