鸿蒙4.0-DevEco Studio界面工程

相关文章快速入口：鸿蒙ArkTS语言快速入门-TS（一）

DevEco Studio 下载与第一个工程

DevEco Studio 下载地址：点击跳转
https://developer.harmonyos.com/cn/develop/deveco-studio#download
学习课堂以及文档地址：点击跳转
https://developer.harmonyos.com/cn/documentation/teaching-video/?catalogVersion=V3

新建的第一个工程界面

更换一下工程显示方式，更方便了解整体结构

简单解释一下整个结构用途

AppScope > app.json5：应用的全局配置信息。
entry：HarmonyOS工程模块，编译构建生成一个HAP包。
src > main > ets：用于存放ArkTS源码。
src > main > ets > entryability：应用/服务的入口。
src > main > ets > pages：应用/服务包含的页面。
src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
src > main > module.json5：Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。
hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
oh_modules：用于存放三方库依赖信息。关于原npm工程适配ohpm操作，请参考历史工程迁移。
build-profile.json5：应用级配置信息，包括签名、产品配置等。
hvigorfile.ts：应用级编译构建任务脚本。

下面如图如何添加引用：

回到Project工程结构来看

ets文件夹，开发主要是该文件下进行的。
1，pages
主要是存放页面，index为初始页面

2，预览区
点击一开始会对带有@Entry类型的页面进行预览

3，多设备类型预览开关

4，也可以选择设备或模拟器

5，分别为本地模拟器，云端模拟器和云端设备。
本地模拟器只需要下载下来即可使用，云端模拟器和云端设备都需要登录华为账号。

6，本地模拟器下载之后的启动和运行
如果要看到UI改动的实时效果，只需要打开预览，实时修改@Entry页面下的代码，预览也会实时改变。

相关文章快速入口：鸿蒙ArkTS语言快速入门-TS（一）