《第二章、DevEco Studio的使用》02 - 构建ArkTS应用

1. 前言

前面，我们已经学习了如何下载、安装 DevEco Studio，并 DevEco Studio 中创建了一个简单的示例项目，也成功运行。

但对于整体的了解还不够深入，比如 : 项目的目录结构，编辑器的使用，预览器的使用、如何使用模拟器和真机调试。在后续文章中，都会逐步了解。

那么接下来，我们先就项目工程继续深入探讨吧。

2. 创建 ArkTS 工程应用

1、当我们第一次安装 DevEco studio 的时候，进入DevEco Studio 时会有一个欢迎界面，在这里点击 Create Project 进行创建工程。

2、如果是在已有工程的窗口下，想要新建一个项目，可以通过菜单栏选择 File -> New -> Create Project进行新工程的创建。

3、点击Create Project之后，根据工程创建向导，左边视图让你选择创建Application或Atomic Service。

说明 :

• Application : 表示创建一个普通应用程序。
• Atomic Service: 表示创建元服务应用。

注意 :

• 从 API 11版本开始支持Atomic Service元服务工程开发。
• Atomic Service元服务工程暂不支持Native开发。

右边视图让你选择需要的Ability工程模板，然后单击Next。

工程模板支持的开发语言及模板说明如下表所示：

模板名称	说明
Empty Ability	用于Phone、Tablet、2in1、Car设备的模板，展示基础的Hello World功能。
Native C++	用于Phone、Tablet、2in1、Car设备的模板，作为应用调用C++代码的示例工程，界面显示“Hello World”。
[CloudDev]Empty Ability	端云一体化开发通用模板。更多信息请参见端云一体化开发。
[Lite]Empty Ability	用于Lite Wearable设备的模板，展示了基础的Hello World功能。可基于此模板，修改设备类型及RuntimeOS，进行小型嵌入式设备开发。请参见创建Lite工程。
Flexible Layout Ability	用于创建跨设备应用开发的三层工程结构模板。三层工程结构包含common（公共能力层）、features（基础特性层）、products（产品定制层）。
Embeddable Ability	用于开发支持被其他应用嵌入式运行的元服务的工程模板。

一般选择第一个模板“Empty Ability”。如需创建其它模板应用，请根据需求自行选择即可。

4、配置工程的相关参数，如工程名、包名、工程保存路径、sdk版本、模块名、支持的设备类型等。配置完成后，点击Finish

配置工程的基本信息说明如下 :

• Project name：工程的名称，可以自定义，由大小写字母、数字和下划线组成。
• Bundle name：标识应用的包名，用于标识应用的唯一性。

   应用包名要求：

1.  必须为以点号（.）分隔的字符串，且至少包含三段，每段中仅允许使用英文字母、数字、下划线（_），如“com.example.myapplication ”。
2. 首段以英文字母开头，非首段以数字或英文字母开头，每一段以数字或者英文字母结尾，如“com.01example.myapplication”。
3. 不允许多个点号（.）连续出现，如“com.example..myapplication ”。
4. 长度为7~128个字符。

• Save location：工程文件本地存储路径，由大小写字母、数字和下划线等组成，不能包含中文字符。

• Compatible SDK：兼容的最低 API 版本。
• Module name： 模块的名称。
• Device type：该工程模板支持的设备类型。

5、关于 Compatible SDK 选择项，我这里是有几个版本可以选择的，目前我选择最新的“5.0.0(12)”即可，这个版本是HarmonyOS NEXT Developer Beta1版本的配套 SDK。享有鸿蒙纯血版提供的 API 能力。

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

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

3.1. stage 模型

鸿蒙系统上的应用程序框架定义了应用程序的模型与结构。

应用模型是鸿蒙系统为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模型，开发者可以基于一套统一的模型进行应用开发，使应用开发更简单、高效。

随着鸿蒙系统的演进发展，先后提供了两种应用模型：

• FA（Feature Ability）模型：从API 7开始支持的模型，已经不再主推。
• Stage模型：从API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。

所以，目前鸿蒙系统上的应用模型称之为“Stage 模型”。这里可以先简单了解，大致明白，后续随着更加深入的学习，会慢慢理解该知识点。

应用模型详细了解 :

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-models-V5

3.2. 目录结构

一个创建好的工程目录结构如下，下面对该结构做一个说明。

• 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）等。

4. 构建页面

4.1. 使用文本组件

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

针对页面布局，均使用Row和Column组件来组建布局。对于更多复杂元素对齐的场景，可选择使用RelativeContainer组件进行布局。(关于布局及样式后续学习)

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

// Index.ets
@Entry
  @Component
  struct Index {
    @State message: string = 'Hello World'

    build() {
      Row() {
        Column() {
          // 使用文本组件
          Text(this.message)
            .fontSize(50)									//设置字体大小
            .fontWeight(FontWeight.Bold)	//设置字体加粗	
        }
        .width('100%')
      }
      .height('100%')
    }
  }

运行 :

这里就暂时使用预览方式运行项目即可。在运行按钮旁边点击下拉框，选择Previewer，接着点击运行按钮。即可完成应用的运行。

选择 phone 设备进行预览。

运行的结果 :

4.2. 使用按钮组件

现在，在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。

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

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        // 使用文本组件
        Text(this.message)
          .fontSize(50)									//设置字体大小
          .fontWeight(FontWeight.Bold)	//设置字体加粗

        // 添加按钮组件，以响应用户点击
        Button(){
          Text('跳转')      //设置按钮名称
            .fontSize(20)   //设置按钮名称字体大小
            .fontWeight(FontWeight.Bold) //设置按钮字体加粗
        }
        .type(ButtonType.Capsule) //设置按钮类型
        .margin({top: 20 })       //设置按钮上外边距为20
        .backgroundColor('#0D9FFB')//设置按钮背景颜色
        .width('40%')             //设置按钮宽度
        .height('5%')             //设置按钮高度

      }
      .width('100%')
    }
    .height('100%')
  }
}

IDE 截图 :

运行 :

效果如下图所示：

4.3. 添加跳转页面

创建另一个页面，并且实现在第一个页面中点击跳转按钮之后，实现跳转到另一个页面。

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

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

说明 : 还有另外一种添加页面之后会自动配置路由的方法。

开发者也可以在右键点击“pages”文件夹时，选择“New > Page > Empty Page”，命名为“Third”，点击“Finish”完成页面的创建。

使用此种方式则无需再进行路由的手动配置。

输入文件名

点击 Finish 之后，自动在main_pages.json文件配置好对应的路由

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

// Second.ets
@Entry
  @Component
  struct Index {
    @State message: string = '这是Second页面'

    build() {
      Row() {
        Column() {
          // 使用文本组件
          Text(this.message)
            .fontSize(50)         //设置字体大小
            .fontWeight(FontWeight.Bold)  //设置字体加粗

          // 添加按钮组件，以响应用户点击
          Button(){
            Text('回到Index页')      //设置按钮名称
              .fontSize(20)         //设置按钮名称字体大小
              .fontWeight(FontWeight.Bold) //设置按钮字体加粗
          }
          .type(ButtonType.Capsule) //设置按钮类型
            .margin({top: 20 })       //设置按钮上外边距为20
            .backgroundColor('#0D9FFB')//设置按钮背景颜色
            .width('40%')             //设置按钮宽度
            .height('5%')             //设置按钮高度

        }
        .width('100%')
      }
      .height('100%')
    }
  }

4.4. 实现页面之间的跳转

1、Index页面面跳转到Second页面

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。如果需要实现更好的转场动效，推荐使用Navigation。

实现步骤 :

• 导入router模块和异常模块
• 在Index页面中，跳转按钮需要绑定onClick事件，点击按钮时跳转到Second 页面。

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

// Index.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
// 导入异常模块
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
  @Component
  struct Index {
    @State message: string = 'Hello World'

    build() {
      Row() {
        Column() {
          // 使用文本组件
          Text(this.message)
            .fontSize(50)         //设置字体大小
            .fontWeight(FontWeight.Bold)  //设置字体加粗

          // 添加按钮组件，以响应用户点击
          Button(){
            Text('跳转')      //设置按钮名称
              .fontSize(20)   //设置按钮名称字体大小
              .fontWeight(FontWeight.Bold) //设置按钮字体加粗
          }
          .type(ButtonType.Capsule) //设置按钮类型
            .margin({top: 20 })       //设置按钮上外边距为20
            .backgroundColor('#0D9FFB')//设置按钮背景颜色
            .width('40%')             //设置按钮宽度
            .height('5%')             //设置按钮高度

            // 跳转按钮绑定onClick事件，点击时跳转到第二页
            .onClick(() => {              
              // 跳转到 Second 页面
              router.pushUrl({ url: 'pages/Second' }).then(() => {
                console.info('Succeeded in jumping to the second page.')
              }).catch((err: BusinessError) => {
                console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
              })
            })
        }
        .width('100%')
      }
      .height('100%')
    }
  }

运行之后，效果如下

2、Second页面面跳转到Index页面

与前面步骤基本一致

实现步骤 :

• 导入router模块和异常模块
• 在Second页面中，跳转按钮需要绑定onClick事件，点击按钮时跳转到 Index页面。

“Second.ets”文件的示例如下 :

// Second.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
// 导入异常模块
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
  @Component
  struct Index {
    @State message: string = '这是Second页面'

    build() {
      Row() {
        Column() {
          // 使用文本组件
          Text(this.message)
            .fontSize(50)         //设置字体大小
            .fontWeight(FontWeight.Bold)  //设置字体加粗

          // 添加按钮组件，以响应用户点击
          Button(){
            Text('回到Index页')      //设置按钮名称
              .fontSize(20)         //设置按钮名称字体大小
              .fontWeight(FontWeight.Bold) //设置按钮字体加粗
          }
          .type(ButtonType.Capsule) //设置按钮类型
            .margin({top: 20 })       //设置按钮上外边距为20
            .backgroundColor('#0D9FFB')//设置按钮背景颜色
            .width('40%')             //设置按钮宽度
            .height('5%')             //设置按钮高度

            // 返回按钮绑定onClick事件，点击按钮时返回到Index页
            .onClick(() => {
              console.info(`Succeeded in clicking the 'Back' button.`)
              try {
                // 1、通过后退的方式，返回Index页。动画效果后退
                router.back()

                // 2、通过路由的方式，返回Index页。动画效果前进
                // router.pushUrl({ url: 'pages/Index' });

              } catch (err) {
                let code = (err as BusinessError).code;
                let message = (err as BusinessError).message;
                console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
              }
            })
        }
        .width('100%')
      }
      .height('100%')
    }
  }

在示例代码中，可以发现，跳转到 Index 页的方式是有两种方式实现的。

1、通过后退的方式，返回Index页。动画效果后退。

router.back()

 

2、通过路由的方式，返回Index页。动画效果前进。

router.pushUrl({ url: 'pages/Index' });

运行之后，通过后退的方式，动画效果后退，效果如下

通过路由的方式，返回Index页。动画效果前进，效果如下

5. 总结

学完以上内容，恭喜您已经基于Stage模型构建完成第一个ArkTS应用，接下来，我们将探索更多的HarmonyOS功能。

好啦~ 这节课就先介绍到这里，谢谢各位观看！