HarmonyOS应用开发实验操作步骤_华为云鸿蒙应用开发初级认证实验考试1、声明式开发范式实验 2、stage模型实验 3、

实验一

实验一任务描述

实验一、根据题目描述，使用 DevEco Studio 编写 ArkTS 语言程序完成如下图页面构建 (30 分)

 

任务 1：补全数据模型数组项（5 分）

得分点：能正确对指定类中创建对象进行构造初始化。

请使用如下配置自行创建 API 12的应用工程：

 

创建成功后，请打开默认生成的 Index.ets 文件，并复制如下代码。此时文件中已经创建好了 DataSources 类，请对该类使用正确的构造方法进行对象初始化。

class DataSources { id: string; // ID title: string; //标题 brief: string; //具体描述 // 请填写正确代码块： --------（1）-------}

本任务中需注意以下内容：

（1） 使用错误的命名不得分；

（2） 使用错误的属性名不得分；

（3） 多或者少对象属性不得分。

得分条件：请填写代码后，对答案代码及上下文代码进行完整截图。

 

任务2：创建自定义组件，并补全代码（10分）

得分点：

1.自定义组件DataCard中数据来源应用使用任务一中创建数据源数据DataSources。

2.必须通过创建自定义组件DataCard构建页面。

定义完数据模型后，请自行分析布局并优先构建组成页面UI的自定义组件DataCard。且自定义组件DataCard中数据来源应使用任务一中创建数据源数据DataSources。

DataCard自定义组件布局如下图所示：

 

下文已提供自定义组件DataCard构建过程中所需具体样式属性参数。请根据这些信息构建出正确的自定义组件。

 

// 自定义组件构建请补全代码，填写正确装饰器及函数___________(1)_____________(2)__ DataCard{// 使用@prop装饰器连接数据源DataSources___________(3)_____________(4)__ { Row() { Image($r(\'app.media.startIcon\'))//系统自动提供图标 .width(80) .height(80) .margin({ right: 20 }) // 请根据提供UI页面图样式，选择正确的容器组件 _____(5)_____{ //Text组件参数空缺处请补全 Text(___ (6) ___) .fontSize(20) .margin({ bottom: 8 }) Text(___ (7) ___) .fontSize(16) .fontColor(Color.Gray) .margin({ bottom: 8 }) } .alignItems(HorizontalAlign.Start) .width(\'80%\') .height(\'100%\') } .padding(20) .borderRadius(12) .backgroundColor(\'#FFECECEC\') .height(120) .width(\'100%\') .justifyContent(FlexAlign.SpaceBetween) }}

本任务中需要注意以下内容：

（1）自定义组件声明错误不得分

（2）数据源没有使用DataSources。而是直接填写数据不得分

（3）容器组件选择错误不得分

（4）Text组件横线处填写错误不得分

得分条件：请填写代码后，对答案代码以及上下文代码进行完整截图

任务3：使用渲染控制语法，构建页面（15分）

得分点：

1、必须正确使用任务二中创建的DataCard组件

2、必须通过渲染控制语法创建页面组件DataSourcesListView

构建完成自定义组件DataCard后，请使用渲染控制语法以及子组件DataCard构建组件DataSourcesListView

如下所示，已提供自定义组件DataSourcesListView构建过程中所需具体样式属性参数，请根据这些信息构建出正确的页面。

//自定义组件构建请补全代码，填写正确装饰器以及函数---------（1）---------------（2）---------（3）---DataSourcesListView { //根据DataSources数据模型构建数组DataSourcesList @State DataSourcesListL:---(5)---=[ new ---(6)---(\'001\',\'标题一\',\'具体描述一\'), new ---(7)---(\'002\',\'标题二\',\'具体描述二\'), new ---(8)---(\'003\',\'标题三\',\'具体描述三\'), new ---(9)---(\'004\',\'标题四\',\'具体描述四\'), new ---(10)---(\'005\',\'标题五\',\'具体描述五\') // 自定义组件构建请补全代码，填写正确装饰器及函数 ___(4) ________ { Column({ space: 5 }) { List() { // 使用正确的循环渲染语法以及利用自定义组件DataCard构建 //注意，样式要求自定义组件之间顶部外边距距离为20 __(11)________ //此处为代码块，请填写正确代码 } .padding(20) .scrollBar(BarState.off) } .width(\'100%\') .height(\'100%\') .backgroundColor(OxF1F3F5) ]}

本任务中需注意以下内容

(1)自定义组件声明错误不得分

(2)数据源没有使用DataSources，而是直接填写数据不得分(3)没有使用循环渲染构建页面不得分

(4)自定义组件间样式书写不正确不得分得分条件:请填写代码后，对答案代码以及上下文代码进行完整截图。

实验一操作步骤

1.创建工程,项目名ArkTSExam，设备类型只选phone

 

2.将原来的代码折叠，下方粘入新代码

关于构造函数constructor有两种方法:

1.手敲

2.右击空白处--->Generate--->Constructor---->按住ctrl+A全选，点击ok，就会自动创建

（方法2需等待dev建立索引以后，大约20s）

 

class DataSources{ id: string; // ID title: string; //标题 brief: string; //具体描述 //请填写正确的构造函数 constructor(id: string, title: string, brief: string) { this.id = id; this.title = title; this.brief = brief; } }

任务1到此结束，可以截图保存实验记录了 （注意是否需要包含左侧项目结构）

3.自定义组件DataCard

继续在下面空白处粘入代码并补全即可

@Componentstruct DataCard{ @Prop dataSources : DataSources; build() { Row(){ Image($r(\'app.media.startIcon\'))//系统自动提供图标 .width(80) .height(80) .margin({ right: 20 }) // 请根据提供UI页面图样式，选择正确的容器组件 Column(){ //Text组件参数空缺处请补全 Text(this.dataSources.title) .fontSize(20) .margin({bottom:8}) Text(this.dataSources.brief) .fontSize(16) .fontColor(Color.Gray) .margin({ bottom: 8 }) } .alignItems(HorizontalAlign.Start) .width(\'80%\') .height(\'100%\') } .padding(20) .borderRadius(12) .backgroundColor(\'#FFECECEC\') .height(120) .width(\'100%\') .justifyContent(FlexAlign.SpaceBetween) }}

 任务2到此结束，可以截图保存实验记录了（注意是否需要包含左侧项目结构）

上面这些都是在Index页面中，

截完图提交实验记录之后在class DataSources和 struct DataCard前添加export关键字

3.创建DataSourcesListView页面

 

导入组件DataCard和DataSources构建页面，补全代码

import {DataCard , DataSources} from \'./Index\'@Entry@Componentstruct DataSourcesListView{ //根据DataSources数据模型构建数组DataSourcesList @State DataSourcesList:Array=[ new DataSources(\'001\' ,\'标题一\', \'具体描述一\'), new DataSources(\'002\',\'标题二\', \'具体描述二\'), new DataSources(\'003\',\'标题三\', \'具体描述三\'), new DataSources(\'004\',\'标题四\', \'具体描述四\'), new DataSources( \'005\',\'标题五\', \'具体描述五\') ] // 自定义组件构建请补全代码，填写正确装饰器及函数 build() { Column({space:5}){ List(){ ForEach(this.DataSourcesList,(item:DataSources)=>{ ListItem(){ DataCard({dataSources:item}) } }) } .padding(20) .scrollBar(BarState.Off) } .width(\'100%\') .height(\'100%\') .backgroundColor(0xF1F3F5) }}

任务2到此结束，可以截图保存实验记录了（注意是否需要包含左侧项目结构）

最终预览效果（不需要截图，这里只是展示结果正确）

 

 

实验二

实验二任务描述

根据题目描述，使用DevEco Studio实现启动应用内的UIAbility并获取返回结果（35分）

任务1：创建UIAbility并指定启动页面

本实验包含两个UIAbility，每个UIAbility关联一张Page页面。

EntryAbility与其关联的Page页面Index.ets创建好HarmonyOS工程后默认提供

接下来，请自行创建好一个UIAbility命名为SecondAbility，再创建好一个页面名叫Second，使其成为SecondAbility的指定启动页面。

注释:该实验工程为API12的应用工程得分点:成功创建SecondAbility并指定其启动页面为Second.ets.

详细操作步骤，请务必截图。得分条件:

1、创建UlAbility步骤截图(请注意必须包含UIAbility命名截图缺失不得分。)

2、创建Second.ets页面步骤截图(请注意必须包含页面命名截图，缺失不得分。)

3、书写指定启动页面代码并截图，截图需能展示在哪个文件中书写的此段代码(请注意此处代码截图需带上左侧目录结构，缺失不得分。)

 

任务2：启动应用内的SecondAbility并传递参数（15分）

本实验代码中，已经将Index.ets页面的基本UI界面提前构建完毕。接下来，请补全Apply()方法，使其可以完成启动SecondAbility并传递参数的功能。最终实现如下功能效果:Index页面中存在一个文本输出框，当用户在其中输出文本，并点击提交按钮。应用会将用户所输入文本在Second页面上显示，提供Index.ets文件中部分代码如下，请将Index.ets文件代码补全

//1.请填入正确导入代码--------------（1）------------import Prompt from \'@system.prompt\';import( BusinessError } from \'@kit.BasicServicesKit\'const RESULT_CODE:number=1000;@Entry@Componentstruct Index{ @State newData: string=\'\' //是否提交 @State isApply: boolean = false build(){ Column(){ //2、添加正确的事件从而完善TextInput组件，确保将用户输 TextInput ({ placeholder:“请输入信息”, text: this.newData }) --------------(2)---------- Button(\'提交申谓\'，{type:ButtonType.Normal}) .onClick(()=>{ if (!this.isApply) {  this.Apply() }else{  Prompt.showToast({ message:\'信息已答复，不能重复提交\'  }) } }) } } Apply(){ //3.获取上下文 ---------------（3）-------------- //4.创建want对象，将要传递的自定义参数放入其中 let wantInfo = { ----(4)-----:\'\',//为空代表本设备 ----(5)-----,//应用名 ----(6)-----:\'SecondAbility\',//目标Ability ----(7)-----:{ ----(8)-----//传递的参数 } } if (this.newData != \'\'&& this.newData !== \'\'){ context.startAbilityForResult(wantInfo).then((data)=>{ if (data?.resultCode === RESULT_CODE) { let result = data.want?.parameters?.info }else { console.info(\'未能获取到返回结果\') } }).catch((err:BusinessError)=>{ console.info(\'获取返回结果失败\') }) this.isApply = !this.isApply } }}

得分点:成功启动应用内的SecondAbility并传递参数

得分条件:请填写代码后，对答案代码以及上下文代码进行完整截图

 

任务3:接收EntryAbility传递的参数(6分)

在正确的生命周期回调中接收EntryAbility在启动SecondAbility时传递过来的自定义参数(即文本输入框信息)，并将接收到的参数存入AppStorage对象中。将参数存放在AppStorage对象中后，即可在Second.ets改面中显示改文本。

请选择正确的文件中的正确的声明周期填入以下代码，并将代码补齐：

//1.请填入正确代码//导入------------------//接收EntryAbility；传递过来的参数 ------------------//解析参数 let info = SecondAbilityInfo?.parameters?.info//将解析好的参数信息存到AppStorage，方便在批假页面中使用-------------------（\'info\',info）

得分点:成功启动接收EntryAbility传递的参数，需要选择正确的文件中的正确的生命周期回调函数中填写正确代码

得分条件:填空处代码，连带上下文进行截心用于评审得分(请注意此处代码截图需带上左侧目录结构，缺失不得分。)

实验二操作步骤

1、创建UlAbility步骤截图(请注意必须包含UIAbility命名截图缺失不得分。)

 

下面这张截图必须要有，完完整整

 

2、创建Second.ets页面步骤截图(请注意必须包含页面命名截图，缺失不得分。)

 

下面这张就是页面名命截图

 

设置 Second 页面为SecondAbility的启动页

打开SecondAbility，将Index改为Second并截图

 

需要将左侧目录结构也截图

 

将Index.ets文件代码补全

//1.请填入正确导入代码,这一步不用操作，后面用到了会自动导入import Prompt from \'@system.prompt\';import { BusinessError } from \'@kit.BasicServicesKit\'import { common, Want } from \'@kit.AbilityKit\';const RESULT_CODE: number = 1000;@Entry@Componentstruct Index { @State newData: string = \'\' //是否提交 @State isApply: boolean = false build() { Column() { //2、添加正确的事件从而完善TextInput组件，确保将用户输 TextInput({ placeholder: \'请输入信息\', text: this.newData }) .onChange((val) => { this.newData = val }) Button(\'提交申谓\', { type: ButtonType.Normal }) .onClick(() => { if (!this.isApply) { this.Apply() } else { Prompt.showToast({  message: \'信息已答复，不能重复提交\' }) } }) } } Apply() { //3.获取上下文 let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext //4.创建want对象，将要传递的自定义参数放入其中 let wantInfo: Want = { deviceId: \'\', //为空代表本设备 bundleName: getContext(context).applicationInfo.name, //应用名 abilityName: \'SecondAbility\', //目标Ability parameters: { info: this.newData//传递的参数 } } if (this.newData != \'\' && this.newData !== \'\') { context.startAbilityForResult(wantInfo).then((data) => { if (data?.resultCode === RESULT_CODE) { let result = data.want?.parameters?.info } else { console.info(\'未能获取到返回结果\') } }).catch((err: BusinessError) => { console.info(\'获取返回结果失败\') }) this.isApply = !this.isApply } }}

记得截图

打开EntryAbility，在OnCreate中接收EntryAbility在启动SecondAbility时传递过来的自定义参数，并将接收到的参数存入AppStorage对象中

 

记得截图

任务4:参数在Second页面中展示。

//获取EntryAbility传递过来存储在Appstorage中的参数let info = AppStorage.get(\"info\") as string@Entry@Componentstruct Second { //确保每次从EntryAbility传递过来的参数都能刷新到UI @State message: string = info; build() { Column({space:30}){ Text(this.message) } .height(\'100%\') .width(\'100%\') }}

记得截图 

实验三

实验三任务描述

实验三:开发ArkTS卡片(35分)

任务1:创建ArkTS卡片(5分)

得分点:能在HarronyOs应用工程中正确创建基于ArkTS UI的服务卡片，卡片创建成功后，提供应用工程目录的截图.

本任务中需注意以下内容

（1）本考试任务需要考生自行创建一个HarmonyOS应用工程，创建应用工程时相关配置如下表：

 

（2）本考试任务需要考生自行创建ArkTS卡片，创建ArkTS卡片时相关配置如下表：

 

详细操作步骤

1、使用开发工具DevEco Studio，创建-个名为CardExam的HarmonyOs应用工程
2、CardExam应用工程创建完毕后，为该应用创建一张ArkTS卡片，卡片创建完成后，对应用的工程目录进行截图，截图内容务必包含卡片相关的文件目录(即截图示例中红框标注的卡片相关文件)，截图示例如下:

 

任务2:使用router事件跳转到EntryAbility(22分)

得分点:在EntryAbility.ts文件中补全onCreate()、onNewWant()、onWindowStageCreate()三个生命周期回调函数中的代码，以实现使用router事件跳转到EntryAbility，并根据传递的参数拉起指定页面。

详细操作步骤:

1、在ets\\>pages日录下新建一张名为\"Detail”的Page页面，将下列代码复制到新建的Detail.ets文件中，覆盖Detail:ets文件中的原有代码:

@Entry@Componentstruct Detail{ @State message :string = \'这是详情页\' build(){ Row(){ Column(){ Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) } .width(\'100%\') } .height(\'100%\') }}

2.将下列代码复制到ExamCard.ets文件中，覆盖ExamCard.ets文件中的原有代码。

 

 

 

 

上面的代码不用动复制就行

3.将下列代码复制到EntryAbility.ts文件中，覆盖EntryAbility.ts文件中的原有代码，并根据注释补全缺失代码，实现在Entrybility中接收router事件并获取参数，根据传递的params不同，选择拉起不同的页面。

 

 

4.补全代码后，对补全的代码进行截图，示例如下：

 

任务3：通过message事件刷新卡片内容

得分点:在EntryFormAbility.ts文件中补全onFormEvent()生命周期回调函数中的代码。

详细操作步骤:

1、将下列代码复制到EntryFormAbility.ts中，覆盖EntryFormAbility.ts原有的代码，并根据注释补全缺失代码，以实现通过message事件刷新卡片的内容。

 

 

2.补全代码后，对补全的代码进行截图，截图示例如下

 

实验提醒

A、所有考试行为都将被记录，如有违规行为，将会取消考试资格或作废考试成绩。

B、考试过程中考试平台如有问题请单独给监考人员留言发私信

C、点击交卷后，所有配置和操作将不能再被修改，请认真检查您的实验步骤，确保无误后再提交。

D、实验考试通过后48小时，可前往个人中心-我的开发者认证查看证书编号和下载电子证书。

实验三操作步骤

任务1：创建ArkTS卡片

先创建一个工程

 

 新建一个动态卡片

 

 

提交对应截图，截图内容务必包含卡片相关的文件目录

 

任务2:使用router事件跳转到EntryAbility

1、在ets\\>pages日录下新建一张名为\"Detail”的Page页面，将下列代码复制到新建的Detail.ets文件中，覆盖Detail:ets文件中的原有代码（直接复制粘贴即可，不需要补全）

 

@Entry@Componentstruct Detail{ @State message :string = \'这是详情页\' build(){ Row(){ Column(){ Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) } .width(\'100%\') } .height(\'100%\') }}

将代码复制到ExamCard.ets文件中，覆盖ExamCard.ets文件中的原有代码。无需填空

//太多了，此处无需补全，省略

将下列代码复制到EntryAbility.ts文件中，覆盖EntryAbility.ts文件中的原有代码，并根据注释补全缺失代码，实现在Entrybility中接收router事件并获取参数，根据传递的params不同，选择拉起不同的页面。

import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from \'@kit.AbilityKit\';import { hilog } from \'@kit.PerformanceAnalysisKit\';import { window } from \'@kit.ArkUI\';const DOMAIN = 0x0000;export default class EntryAbility extends UIAbility { selectPage = \'\' onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { if (want?.parameters?.params) { let params:Record = JSON.parse(want.parameters.params as string) this.selectPage = params.targetPage as string } } onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void { if (want?.parameters?.params) { let params: Record = JSON.parse(want.parameters.params as string) this.selectPage = params.targetPage as string } } onDestroy(): void { hilog.info(DOMAIN, \'testTag\', \'%{public}s\', \'Ability onDestroy\'); } onWindowStageCreate(windowStage: window.WindowStage): void { let targetPage : string switch (this.selectPage){ case \'detail\': targetPage = \'pages/Detail\'; break; default : targetPage = \'pages/Index\'; break; } windowStage.loadContent(targetPage, (err) => { if (err.code) { hilog.error(DOMAIN, \'testTag\', \'Failed to load the content. Cause: %{public}s\', JSON.stringify(err)); return; } hilog.info(DOMAIN, \'testTag\', \'Succeeded in loading the content.\'); }); } onWindowStageDestroy(): void { // Main window is destroyed, release UI related resources hilog.info(DOMAIN, \'testTag\', \'%{public}s\', \'Ability onWindowStageDestroy\'); } onForeground(): void { // Ability has brought to foreground hilog.info(DOMAIN, \'testTag\', \'%{public}s\', \'Ability onForeground\'); } onBackground(): void { // Ability has back to background hilog.info(DOMAIN, \'testTag\', \'%{public}s\', \'Ability onBackground\'); }}

 

 

记得截图提交

在EntryFormAbility.ts文件中补全onFormEvent()生命周期回调函数中的代码。

将代码复制到EntryFormAbility.ts中，覆盖EntryFormAbility.ts原有的代码，并根据注释补全缺失代码，以实现通过message事件刷新卡片的内容。（直接复制然后照着补全就行）

 onFormEvent(formId: string, message: string) { class FormDataClass{ \'refresh\':string=\'message刷新后\' } let formData = new FormDataClass() let formInfo = formBindingData.createFormBindingData(formData) formProvider.updateForm(formId,formInfo).then((data)=>{ console.info(\'FormAbility updateForm success.\'+JSON.stringify(data)) }).catch((error:BusinessError)=>{ console.error(\'FormAbility updateForm failed.\'+JSON.stringify(error)) }) }

 

记得截图提交

实验部分到此结束，请等待30s-1min后交卷

点个赞，谢谢~