关于harmonyos:想学习eTS开发教你开发一款IQEQ测试应用

5次阅读

共计 3552 个字符，预计需要花费 9 分钟才能阅读完成。

开发者 Mack 基于 HarmonyOS 的 ArkUI 框架开发的 IQ- EQ 测试利用。此利用采纳 eTS 语言开发，蕴含启动页面、测试入口页面、答题页面和得分页面等多个页面，性能十分欠缺。
IQ- EQ 测试利用的实现成果，请参考华为开发者论坛中作者的原帖：https://developer.huawei.com/…
此利用的开发过程中波及很多知识点，上面咱们一起追随 Mack 的开发过程，一起学习 eTS 开发常识吧~
一、代码构造介绍
咱们先来看看 IQ- EQ 测试利用的文件目录构造，相干文件阐明如图 1 所示。

此利用的外围代码文件（即 eTS 文件）均在 /entry/src/main/ets 目录下，文件后缀为“.ets”。由图 1 可知，eTS 文件次要分为两局部：
✓ ets/default/module 目录下的 eTS 文件，用于定义 IQ 和 EQ 测试题目数据。
✓ ets/default/pages 目录下的 eTS 文件，用于定义利用的 UI 界面。
“resource”目录为我的项目资源寄存目录，寄存图片资源和国际化字符串等。
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.c…

方舟开发框架还定义了一些具备非凡含意的装璜器，用于装璜类、构造、办法和变量。上面就联合本次 IQ- EQ 测试利用，为大家介绍几种罕用的装璜器。
比方，启动页（对应 ets/default/pages/index.ets 文件）的代码如下：

@Entry
@Component
struct 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.c…

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.c…
4. 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.c…

下面介绍的 eTS 开发常识，你曾经学会了吗？感兴趣的小伙伴，能够获取 IQ- EQ 测试利用的残缺代码，持续学习哦~
IQ- EQ 测试利用的源码地址：https://gitee.com/mackyuan/IQ…
点击链接 https://developer.harmonyos.c… 跳转 ” 文档指南”，能够进入 HarmonyOS 官网学习基于 TS 扩大的申明式开发范式。
欢送更多开发者退出 eTS 开发，与咱们共享开发成绩，分享技术解读与教训心得!

正文完