想学习 eTS 开发？教你开发一款 IQ-EQ 测试应用

开发者 Mack 基于 HarmonyOS 的 ArkUI 框架开发的 IQ- EQ 测试应用。此应用采用 eTS 语言开发，包含启动页面、测试入口页面、答题页面和得分页面等多个页面，功能非常完善。

IQ- EQ 测试应用的实现效果，请参考华为开发者论坛中作者的原帖：https://developer.huawei.com/consumer/cn/blog/topic/03728323510050211

此应用的开发过程中涉及很多知识点，下面我们一起跟随 Mack 的开发过程，一起学习 eTS 开发知识吧~

1. 代码结构介绍

我们先来看看 IQ- EQ 测试应用的文件目录结构，相关文件说明如图 1 所示。

图 1 文件目录结构

1. 此应用的核心代码文件（即 eTS 文件）均在/entry/src/main/ets 目录下，文件后缀为“.ets”。由图 1 可知，eTS 文件主要分为两部分：

• ets/default/module 目录下的 eTS 文件，用于定义 IQ 和 EQ 测试题目数据。

• ets/default/pages 目录下的 eTS 文件，用于定义应用的 UI 界面。

1. “resource”目录为项目资源存放目录，存放图片资源和国际化字符串等。

2. config.json 为应用的配置文件。eTS 开发时，需关注该文件中 module 对象的 js 标签内容。

"js": [  {      "mode": {           "syntax": "ets",   //表示以声明式语法风格进行编程          "type": "pageAbility"      },         "pages": [           "pages/index",   //“pages”列表的第一个页面为应用的启动页                "pages/start",                "pages/iqTest",                "pages/iqScore",               "pages/eqTest",               "pages/eqScore"         ],         "name": "default",         "window": {              "designWidth": 720,              "autoDesignWidth": false          }     }]

二、关键代码及知识点

在开发 IQ- EQ 测试应用的过程中，主要运用了容器组件、装饰器、页面路由和 AppStorage 等。下面，我们就结合 IQ- EQ 测试应用的关键代码，一起来学习这些知识点。

1. 容器组件

方舟开发框架提供了丰富的系统预置组件。开发者可以组合系统组件为自定义组件，通过这种方式将页面组件化为一个个独立的 UI 单元，实现页面不同单元的独立创建、开发和复用。本次 IQ- EQ 测试应用，通过对容器组件的组合使用，实现了多个页面的 UI 布局。比如，EQ 测试题目页（对应 ets/default/pages/eqTest.ets 文件）的部分布局代码如下：

  build() {      Column() {           // 顶部标题          TopTitle()          Scroll() {              Column() {                   // 显示问题列表                    List() {                               ForEach(this.questionsDataArray, item => {                                       ListItem() {                                              // 循环展示问题                                              QuestionsListItem({ questionItem: item,  questionsId:item.id,                                                 btnSubmit:$btnSubmit1})                          }                                }, item => item.id.toString())                       }                            …

此应用使用到的一些容器组件，说明如下：

• Column：沿垂直方向布局的容器组件。

• Row：沿水平方向布局的容器组件。

• Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滚动。

• Grid：网格容器组件，采用二维布局，将容器划分成“行”和“列”。

• List：列表组件，包含一系列相同宽度的列表项。

• Flex：弹性布局组件。

• Stack：堆叠容器组件，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

更多组件说明，请参见：https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-container-column-0000001111421414

1. 装饰器

方舟开发框架还定义了一些具有特殊含义的装饰器，用于装饰类、结构、方法和变量。下面就结合本次 IQ- EQ 测试应用，为大家介绍几种常用的装饰器。

比如，启动页（对应 ets/default/pages/index.ets 文件）的代码如下：

@Entry@Componentstruct Index {



  @State private opacityValue: number = 0  @State private scaleValue: number = 0



  build() {…  }}

以上代码中涉及到了三种常用的装饰器：@Component、@Entry、@State。

(1) @Component

开发者可以组合系统组件为自定义组件，通过这种方式将页面组件化为一个个独立的 UI 单元，实现页面不同单元的独立创建、开发和复用。

@Component 是组件化的标志。@Component 装饰的 struct，表示该结构体具有组件化能力，能够成为一个独立的组件，称为自定义组件。自定义组件必须定义 build 方法，在 build 方法里描述 UI 结构。

(2) @Entry

@Entry 装饰的自定义组件，表示该组件是页面的总入口，也可以理解为页面的根节点。加载页面时，将首先创建并呈现 @Entry 装饰的自定义组件。值得注意的是，一个页面有且仅能有一个 @Entry，只有被 @Entry 修饰的组件或者其子组件，才会在页面上显示。

(3) @State

@State 装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的 build 方法进行 UI 刷新。

除了以上三种装饰器，方舟开发框架还提供了 @Prop、@Link、@Observed、@ObjectLink、@Consume、@Provide、@StorageProp、 @StorageLink、@Watch、@Preview、@Builder、@Extend、@CustomDialog 等装饰器。装饰器的更多详细内容，尽在声明式语法中。

声明式语法的详细介绍，请参见：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ts-syntax-intro-0000001149818707

1. 页面路由

IQ 测试时，答完一题后支持自动跳转到下一题，这里涉及页面路由的操作。为方便开发者实现页面路由的各种操作，HarmonyOS 提供了多种页面路由接口。

IQ 测试题目页（对应 ets/default/pages/iqTest.ets 文件）中页面路由的代码如下：

import router from '@system.router';



router.push({  uri: 'pages/iqTest',  params: { paramCurrentId:(this.currentId + 1)}  // 自动跳转下一题})

在调用页面路由接口之前，先导入 router 模块。然后，通过调用 router.push()接口，将 uri 指定的页面添加到路由栈中，即可实现跳转到 uri 指定的页面。

上面仅介绍了一种页面路由接口。更多页面路由接口的详细说明，请参见：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-basic-features-routes-0000000000611824

1. AppStorage

AppStorage 是整个 UI 应用程序状态的中心“数据库”，包含整个应用程序需要访问的所有状态属性。AppStorage 提供了相应的装饰器和接口供应用程序使用。应用程序的 UI 组件可以通过装饰器将应用程序状态数据与 AppStorage 进行同步。此外，应用程序还可以通过 AppStorage 提供的接口添加、读取、修改和删除 AppStorage 中保存的应用程序状态属性。API 所做更改引起的状态数据变更会被同步到 UI 组件上，应用程序将会调用所在组件的 build 方法进行 UI 更新。

此 IQ- EQ 测试应用也调用了 AppStorage 的接口来修改和删除状态属性。

(1) IQ 测试时，应用程序将每一题的选择结果保存到 AppStorage 中。代码如下：

// 点击图片表示选择, 保存题目的选择结果AppStorage.SetOrCreate("question_id_"+this.currentId,item.id)

(2) IQ 测试完成后，点击“再测一遍”时，应用程序调用 AppStorage 的接口删除所有题目的选择结果。代码如下：

AppStorage.Delete('question_id_'+item.id)

AppStorage 的更多详情，请参见：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ts-application-states-appstorage-0000001119929480

三、结束语

上面介绍的 eTS 开发知识，你已经学会了吗？感兴趣的小伙伴，可以获取 IQ- EQ 测试应用的完整代码，继续学习哦~

IQ- EQ 测试应用的源码地址：https://gitee.com/mackyuan/IQ_EQ_Test_eTS

点击链接https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-ts-overview-0000001192705715跳转"文档指南”，可以进入 HarmonyOS 官网学习基于 TS 扩展的声明式开发范式。

欢迎更多开发者加入 eTS 开发，与我们共享开发成果，分享技术解读与经验心得!