原文:https://mp.weixin.qq.com/s/eZgifjirAW58dFCa0W7kSQ,点击链接查看更多技术内容。

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

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

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

一、代码结构介绍

我们先来看看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
@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.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开发,与我们共享开发成果,分享技术解读与经验心得!

想学习eTS开发?教你开发一款IQ-EQ测试应用的更多相关文章

  1. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  2. 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  3. Xamarin Anroid开发教程之Anroid开发工具及应用介绍

    Xamarin Anroid开发教程之Anroid开发工具及应用介绍 Xamarin开发Anroid应用介绍 如今智能手机已经盛行了好几年,而针对这些智能手机的软件开发也变得异常火热.但是在Andro ...

  4. HealthKit开发教程之HealthKit的复合数据

    HealthKit开发教程之HealthKit的复合数据 复合数据就是复合单位和值构成的数据.所谓复合单位就是由单位进行乘法.除法等得到的单位,如m/s.lb·ft等就是复合单位.本节将针对这些复合数 ...

  5. HealthKit开发教程之HealthKit的辅助数据

    HealthKit开发教程之HealthKit的辅助数据 在HealthKit中除了主要数据之外,还有6个辅助数据分别为:体积类型数据.压力类型数据.时间类型数据.温度类型数据.标量类型数据和电导率类 ...

  6. HealthKit开发教程之HealthKit的主要类型数据

    HealthKit开发教程之HealthKit的主要类型数据 在HealthKit中,我们将最常用到的数据称之为主要数据.主要数据基本上有三种:长度类型的数据.质量类型的数据.能量类型的数据.本节将主 ...

  7. VSTO 学习笔记(十一)开发Excel 2010 64位自定义公式

    原文:VSTO 学习笔记(十一)开发Excel 2010 64位自定义公式 Excel包含很多公式,如数学.日期.文本.逻辑等公式,非常方便,可以灵活快捷的对数据进行处理,达到我们想要的效果.Exce ...

  8. Jenkins持续集成学习-Windows环境进行.Net开发1

    目录 Jenkins持续集成学习-Windows环境进行.Net开发 目录 前言 目标 使用Jenkins 安装 添加.net环境配置 部署 结语 参考文档 Jenkins持续集成学习-Windows ...

  9. Jenkins持续集成学习-Windows环境进行.Net开发4

    目录 Jenkins持续集成学习-Windows环境进行.Net开发4 目录 前言 目标 Github持续集成 提交代码到Github 从Github更新代码 git上显示构建状态 自动触发构建 Gi ...

  10. iOS 9应用开发教程之ios9的视图

    iOS 9应用开发教程之ios9的视图 了解IOS9的视图 在iPhone或者iPad中,用户看到的和摸到的都是视图.视图是用户界面的重要组成元素.本节将主要讲解ios9视图的添加.删除以及位置和大小 ...

随机推荐

  1. 非正式全面解析 NebulaGraph 中 Session 管理

    NebulaGraph 论坛最近有些讨论帖,各种姿势来问 NebulaGraph Session 管理相关的事情,我寻思这也不是一个法子,还是来写一篇文章来讲述下 NebulaGraph 中的 Ses ...

  2. 百度爱番番基于图技术、流式计算的实时CDP建设实践

    导读:随着营销3.0时代的到来,企业愈发需要依托强大CDP能力解决其严重的数据孤岛问题,帮助企业加温线索.促活客户.但什么是CDP.好的CDP应该具备哪些关键特征?本文在回答此问题的同时,详细讲述了爱 ...

  3. Java 多线程----- 解决线程安全问题的 方式三:Lock锁 --------jdk 5.0 新增

    1 package bytezero.deadlock; 2 3 import java.util.concurrent.locks.ReentrantLock; 4 5 /** 6 * 解决线程安全 ...

  4. vite环境配置mockjs

    mockjs使用文档v2.9.6 安装插件 npm i mockjs -S npm i vite-plugin-mock@2.9.6 配置vite.config.ts文件 export default ...

  5. Lock wait timeout exceeded; try restarting transaction-Mysql报错

    一.问题由来 现在在做一个小程序的后台,使用Java写的,数据库使用的Mysql,之前一直调试的时候都好好的,今天在调试的时候突然就报一个错: ### Error updating database. ...

  6. SQL注入的原理与分析

    SQL注入的原理与分析 1.SQL注入的本质 2.部分SQL语句 3.SQL注入流程 一.SQL注入的本质 SQL注入的本质,就是把用户输入的数据当作代码执行 Web应用程序对用户输入的数据校验处理不 ...

  7. 记一次配置mybatis plus报错有感

    参考,欢迎点击原文:https://blog.csdn.net/wwrzyy/article/details/86034458(问题原因) https://www.jianshu.com/p/28d6 ...

  8. linux下几种快速清空文件内容的方法

    [root@iamzken ~] : > filename [root@iamzken ~] > filename [root@iamzken ~] echo "" & ...

  9. Android 开发Day8

    /* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * gradle pl ...

  10. 新闻新体验!3DCAT助力开启红网“元宇宙”新闻直播间

    2022年10月20日,湖南红网新媒体集团"华章·20--红网时刻新闻党的二十大报道云展厅"正式上线.深入到新闻元宇宙,开拓新的传播领域,这也是红网党政新媒体元宇宙传播应用实验室的 ...