HarmonyOS应用开发实验操作步骤

实验一

实验一任务描述

实验一、根据题目描述，使用 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

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

@Component
struct 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
@Component
struct DataSourcesListView{
  //根据DataSources数据模型构建数组DataSourcesList
  @State DataSourcesList:Array<DataSources>=[
    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
@Component
struct 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
@Component
struct 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
@Component
struct 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
@Component
struct 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
@Component
struct 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<string,Object> = 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<string, Object> = 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后交卷

点个赞，谢谢~