关于harmonyos:HarmonyOS从基础到实战高性能华为在线答题元服务

阐明：本文首发于 CSDN
https://shangjinzhu.blog.csdn.net/article/details/134467049

最近看到美团、新浪、去哪儿多家互联网企业启动鸿蒙原生利用开发，这个 HarmonyOS NEXT 越来越引人关注。奈何以后不面向集体开发者凋谢，然而咱们能够尝试下鸿蒙新的利用状态——元服务的开发。
元服务是基于 HarmonyOS 提供的一种面向未来的服务提供形式，有独立入口、免装置，以万能卡片等多种出现状态，可提供一个或多个便捷、轻量化服务。在本文中，我将具体介绍元服务、ArkTS 语言开发以及 DevEco Studio 开发工具的端云一体化开发和低代码开发等方面，并且带大家亲自实战元服务开发 - 在线答题我的项目深度体验学习！

在线答题元服务次要性能：

1. 接入 AGC 认证服务，以实现用户登录，展现个人账户信息，在线答题以及积分排行等性能。
2. 用户能够在利用中进行常识练习，上传自定义题目以丰盛题库内容。
3. 利用华为云服务，实现用户答题展现问题和排名，减少用户对学习的趣味。
4. 应用云数据库存储题目，实现卡片的刷新和页面跳转等性能。

我的项目运行演示视频

XXX

一．元服务核心内容

本文着重介绍元服务元服务轻量化、信息外显的个性，由基础知识学习到我的项目实战，逐渐深刻的带大家学习，最初应用元服务技术开发一套高性能，高可用性的在线答题元服务。

1.1 元服务

HarmonyOS 是一款面向万物互联时代的、全新的分布式操作系统。运行在 HarmonyOS 的利用分为两种状态：

• 传统形式的须要装置的利用（即传统概念中的 HarmonyOS 利用，可简称利用）。
• 提供特定性能、免装置的利用（即元服务，原名为原子化服务）。

本文则次要应用元服务状态进行介绍及其开发实战。

1.1.1 元服务的出现状态

鸿蒙万能卡片是元服务的次要展示模式之一（其余模式包含语音和图标等）。每个万能卡片都是一种始终可见的元服务或利用，将重要信息以卡片的模式展现在桌面上，通过轻量交互实现服务的便捷拜访。

1.1.2 元服务的特点

① 免装置，更轻量化地将服务带给用户
② 一键服务中转，将用户感兴趣的内容前置、外显
③ 跨端转移，多终端设备间无缝流转
④ 情景智能卡片举荐，随心定制、更懂用户

1.2 ArkTS 语言

ArkTS 是鸿蒙生态的利用开发语言。它在放弃 TypeScript（简称 TS）根本语法格调的根底上，对 TS 的动静类型个性施加更严格的束缚，引入动态类型。同时，提供了申明式 UI、状态治理等相应的能力，让开发者能够以更简洁、更天然的形式开发高性能利用。

1.2.1 ArkTS 语言特点

ArkTS 语言通过一直的迭代降级有了许多更新和改良，一年前我第一次接触这个技术，发现很多中央都不欠缺，相比其余语言（TS，JS）相比有很多有余。然而通过一年的迭代更新，其性能当初曾经非常欠缺且弱小。让开发者可能更高效地编写和开发应用程序。

ArkTS 提供了简洁天然的申明式语法、组件化机制、数据 -UI 主动关联等能力，实现了贴近自然语言，书写效率更高的编程形式，为开发者带来易学、易懂、极简开发的优质体验。
在应用 ArkTS 语言开发利用时，状态治理是一个重要的概念。状态治理是指治理利用中的各种状态，包含组件状态、全局状态等。状态治理能够帮忙开发者更好地组织和治理利用中的数据，使得利用更加稳固和高效。ArkTS 提供了多维度的状态管理机制，能够在 ArkUI 开发框架中应用。和 UI 相关联的数据，不仅能够在组件内应用，还能够在不同组件层级间传递，比方父子组件之间、爷孙组件之间，也能够是利用全局范畴内的传递。

1.2.2 能力扩大

ArkTS 在 TS 的根底上次要扩大了如下能力：

• 根本语法：ArkTS 定义了申明式 UI 形容、自定义组件和动静扩大 UI 元素的能力，再配合 ArkUI 开发框架中的零碎组件及其相干的事件办法、属性办法等独特形成了 UI 开发的主体。
• 状态治理：ArkTS 提供了多维度的状态管理机制。在 UI 开发框架中，与 UI 相关联的数据能够在组件内应用，也能够在不同组件层级间传递，比方父子组件之间、爷孙组件之间，还能够在利用全局范畴内传递或跨设施传递。另外，从数据的传递模式来看，可分为只读的单向传递和可变更的双向传递。开发者能够灵便的利用这些能力来实现数据和 UI 的联动。

• 渲染管制：ArkTS 提供了渲染管制的能力。条件渲染可依据利用的不同状态，渲染对应状态下的 UI 内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创立相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创立相应的组件。

  1.3 DevEco Studio 开发工具

  DevEco Studio 3.1 配套反对 HarmonyOS 3.1 版本及以上的利用及服务开发，提供了代码智能编辑、低代码开发、双向预览等性能，以及轻量构建工具 DevEco Hvigor、本地模拟器，继续晋升利用及服务开发效率。
  官网下载地址：HUAWEI DevEco Studio 和 SDK 下载和降级 | HarmonyOS 开发者

  1.3.1 低代码开发

  HarmonyOS 低代码，有丰盛的 UI 界面编辑性能，例如基于图形化的自在拖拽、数据的参数化配置等，通过可视化界面开发方式疾速构建布局，可无效升高用户的工夫老本和晋升用户构建 UI 界面的效率。咱们来一起体验一下：
  只需在创立新我的项目时关上低代码按钮（Enable Super Visual）即可:

  创立我的项目之后，咱们只需拖动组件到可视化区域即可，咱们须要理解上面的工作区性能如下：

• UI Control：UI 控件栏，能够将相应的组件选中并拖动到画布（Canvas）中，实现控件的增加。
• Component Tree：组件树，在低代码开发界面中，开发者能够直观地看到组件的层级构造、摘要信息以及谬误提醒。开发者能够通过选中组件树中的组件（画布中对应的组件被同步选中），实现画布内组件的疾速定位；单击组件后的或图标，能够暗藏 / 显示相应的组件。
• Panel：性能面板，包含罕用的画布放大放大、撤销、显示 / 暗藏组件虚构边框、设施切换、明暗模式切换、Media query 切换、可视化布局界面一键转换为 hml 和 css 文件等。
• Canvas：画布，开发者可在此区域对组件进行拖拽、拉伸等可视化操作，构建 UI 界面布局成果。

• Attributes & Styles：属性款式栏，选中画布中的相应组件后，在右侧属性款式栏能够对该组件的属性款式进行配置。
  咱们能够利用可视化来做各种各样的前端页面，这大大的升高了咱们的工作量，上面则是一个可视化拖动的成果页面，具体的内容咱们则能够到低代码开发文档中进行深度学习。

  1.3.2 端云一体化开发

  端云一体化开发是 DevEco Studio 的一个新个性，它容许开发者在本地和云端之间无缝地开发和调试应用程序。通过端云一体化开发，开发者能够更加高效地应用云计算资源，同时也能够在本地疾速测试和调试代码。让咱们一起体验一下端云一体化开发的魅力。

  端云一体化开发根本流程如下：
  创立云函数 -> 调试云函数 -> 云函数与应用程序的通信
  1. 创立云函数：在 DevEco Studio 中，开发者能够轻松地创立和治理云函数。云函数是一段运行在云端的代码，它能够与应用程序进行通信，执行一些须要在云端实现的工作。通过创立云函数，开发者能够利用云计算的弱小能力，同时也能够在本地疾速测试和调试代码。
  2. 调试云函数：在 DevEco Studio 中，开发者能够应用调试器来调试云函数。调试器容许开发者在本地模仿云函数的运行环境，并在代码中退出断点来进行调试。这使得开发者能够更加轻松地发现和解决问题，进步了开发效率。
  3. 云函数与应用程序的通信：在端云一体化开发中，云函数与应用程序之间的通信是十分重要的。DevEco Studio 提供了一些工具来帮忙开发者实现这种通信。例如，开发者能够应用 HTTP 或 WebSocket 协定来与云函数进行通信，也能够应用华为提供的云服务 SDK 来进行更高级的通信操作。这些工具使得开发者能够更加轻松地实现云函数与应用程序之间的交互，进步了开发效率。
  端云一体化开发相比大家在学习生涯中都有据说，上面就是 HarmonyOS 端云一体化开发相比传统开发的劣势，大家比照观看就能够发现其劣势微小。集成端云一体化组件后，进行简略配置即可向利用用户提供登录、领取等多种性能。

  二．我的项目云端配置

  2.1 AppGallery Connect 服务创立

  AppGallery Connect（以下简称 AGC）是华为利用市场推出的利用一站式服务平台，致力于为开发者提供利用创意、开发、散发、经营、剖析全生命周期服务，构建全场景智慧化的利用生态。

  1. 咱们须要进入 AppGallery Connect 服务中心，创立新的我的项目，并且填入项目名称。

  2. 进入如下页面，并在 Serverless 里，找到手机号码，将其设置为启用状态。

  3. 对于 SDK 配置，因为咱们是云端一体化我的项目，不须要咱们额定配置 SDK，在创立我的项目时会主动配置。
  4. 到我的利用，创立对应的利用，如下：

  须要留神：软件包类型抉择 HarmonyOS 利用，是否元服务抉择是。
  5. 到 Serverless 里开明创立云函数和云数据库，如下图。这样提前开明的益处是后续无需更新开明后的配置文件，对老手极为敌对。

  三．我的项目环境本地搭建

  提前做完云端配置后，对于我的项目环境本地搭建较为容易。

  3.1 创立端云一体化元服务项目

  1. 只需按上面抉择对应的我的项目模板进行创立。

  2. 创立项目名称为：arkTSDemo（这是我的案例名称，依照华为包命名标准自行起名即可）。
  留神：须要和上文中的云端创立包名雷同，否则会呈现上面检测不到的状况，只须要查看包名是否匹配即可解决。

  填写对应的参数要求，并且增加到刚刚创立的我的项目中去。

  3. 实现下面该有的配置之后，咱们再返回到 DevEco Studio，就能够看到咱们刚刚创立的。

  点击 finsh 之后咱们创立我的项目，急躁期待配置和主动下载所需资源包即可。
  4. 咱们的设置 SDK 也是无需手动配置的，咱们的云端一体化创立会帮咱们主动的创立好所需的文件和配置，为咱们节俭了大量的步骤。
  5. 创立我的项目，期待依赖配置实现即可开始咱们本次的我的项目实战了。

  四．元服务实战 - 在线答题

  4.1 我的项目构造

  咱们我的项目构造如下图所示：
  1.entryability：主利用的 Ability
  2.Entnyformability：卡片的 Ability
  3.Models：从云数据库导出的数据类型
  4.Pages：页面代码文件夹
  5.Widget->Pages: 卡片页面文件夹
  6.rawfile 下的俩个文件：
  ①agconnect-services.json：用于连贯 severless 的配置信息
  ②schema.json：云端配置信息

  4.2 我的项目开发计划

  我的项目接入 AGC 认证服务用于登录，蕴含展现集体账号信息的页面、在线答题页面、积分排行页面，用户能够在利用上进行常识练习，随时随地的坚固已学的常识，反对用户本人上传题目，不断完善题库丰盛度，构建多元化题库。利用华为云服务提供的高性能，高可用性云服务，能够轻松实现，用户答题展现问题和进度，依据用户最高问题进行排行，显示用户的排名，减少用户对学习的趣味，能够应用元服务卡片展现用户的成绩排名或者问题和进度均可。
  1. 构建柔美页面
  2. 应用云数据库存储题目，通过云数据库接口进行查问。
  3. 桌面卡片的刷新事件依赖于 postCardAction 接口的 message 事件。
  4. 点击跳转利用应用 postCardAction 接口的 router 事件。
  5.FormAbility 和利用页面点击后刷新卡片的性能应用 formProvider.updateForm 接口。

  4.3 登录页面构建

  1. 援用局部依赖如下：

  import router from '@ohos.router'
  import prompt from '@ohos.prompt'
  import promptAction from '@ohos.promptAction'
  import {Login, AuthMode} from "@ohos/agconnect-auth-component";

  2. 外围代码（已去特定我的项目链接块代码，展现供大家间接应用的本页通用外围代码）

  Login({modes: [AuthMode.PHONE_VERIFY_CODE, AuthMode.MAIL_VERIFY_CODE],
  onSuccess: (user) => {console.log('用户信息:', user.getPhone());
    this.phone=String(user.getPhone());
    router.replaceUrl({
      url: "page/homepage",
      params: {name: this.phone}
    })
  
  }
  
  }){Row() {Button('第三方登陆')
      .width("140vp")
      .height("80vp")
      .fontSize(20)
      .margin({
        bottom: 40,
        top: 60,
        right: 20
      })
    Button('立刻注册')
      .width("140vp")
      .height("80vp")
      .fontSize(20)
      .margin({
        bottom: 40,
        top: 60,
      })
  }
  Image($r("app.media.logo")).width(80)

  页面代码性能解释：

• 导入所需的模块和组件，包含路由 (router)、提醒 (prompt)、提醒操作 (promptAction) 以及身份验证相干的组件 (Login, AuthMode)。
• 定义一个名为 LoginPage 的页面组件，用于用户登录。
• 在 LoginPage 中定义了一些状态 (@State)，包含明码 (password)、用户名 (username) 以及电话号码 (phone)，用于存储用户输出的信息。
• 在 build 办法中，创立了页面的布局，包含题目、用户名输入框、明码输入框、遗记明码链接和登录按钮。
• 当点击登录按钮时，查看用户名和明码是否为空。如果为空，应用路由将用户重定向到 “page/hello” 页面，并传递用户名参数。否则，显示谬误提醒。
• 应用身份验证组件 (Login) 提供了第三方登录的选项，当用户胜利登录后，将用户的手机号码获取并重定向到 “page/homepage” 页面，同时传递手机号码参数。

• 页面布局中还蕴含了第三方登录按钮和立刻注册按钮，以及利用的标记图标。
  页面预览成果：

  4.4 首页性能构建

  首页是一个蕴含多个选项卡的页面，具体性能内容如下：

• 导入所需的模块和组件，包含路由 (router)、提醒操作 (promptAction)、Web 视图 (web_webview) 和网络申请 (http)。
• 在 Index 组件中，定义了一些状态 (@State)，包含从路由获取的参数 (paramsFromIndex)、播放器数据 (playerData)、当前页数 (mCurrentPage)，以及一些其余控制器和资源。
• 在 build 办法中，创立了一个蕴含多个选项卡的页面，每个选项卡代表不同的内容。
• 页面的第一个选项卡蕴含了一些图片、文字和按钮，以及一个用于观看视频的 Video 组件。还有一个按钮，当点击时会触发 HTTP 申请，获取排行榜数据，并在获取数据后跳转到另一个页面显示排行榜。
• 页面的第二个选项卡蕴含了一个视频播放器，用户能够点击按钮来开始播放视频或切换到下一个视频。
• 页面的第三个选项卡蕴含了一些个人信息和操作，包含退出登录、题目上传、告诉和排行榜。用户能够点击这些操作来执行相应的性能。

• 应用 Tabs 组件创立了蕴含选项卡的布局，并在每个选项卡中定义了不同的内容。

  外围代码 1：

  Tabs({barPosition: BarPosition.End, controller: this.mTabController}) {TabContent() {// ... 选项卡 1 的内容}
  .tabBar(this.TabBuilder(0));
  // TabContent2 和 TabContent3 同样形式创立
  }

  链接云端数据库要害代码

  mport formInfo from '@ohos.app.form.formInfo';
  import formBindingData from '@ohos.app.form.formBindingData';
  import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
  import formProvider from '@ohos.app.form.formProvider';
  import agconnect from '@hw-agconnect/api-ohos';
  import {AGConnectCloudDB, CloudDBZone, CloudDBZoneConfig, CloudDBZoneQuery} from '@hw-agconnect/database-ohos';

4.5 答题页面构建

答题页面是许多应用程序中的要害组成部分，尤其是在教育、娱乐和培训利用中。构建一个功能强大的答题页面，以提供用户敌对的答题体验。
页面设计需满足以下要求：

• 动静内容展现：页面能够动态显示多个问题和答案选项，依据用户的抉择和进度更新内容。
• 状态治理：应用 @State 装璜器申明了多个状态属性，用于存储题目、答案、用户抉择的答案、解析等信息。这有助于治理和更新页面的状态。
• 用户交互：用户能够点击答案选项按钮来抉择答案，并依据答案的正确与否进行相应的交互反馈。
• 页面导航：提供了页面导航性能，用户能够在答题实现后返回到主页。
• 动静解析显示：能够显示答案的解析，用户能够点击按钮来查看问题的解释。
• 灵便的页面布局：通过 Column、Row、Button 等组件来构建页面布局，提供了灵活性和可定制性。
• 按钮款式和交互设计：依据用户的抉择状态，按钮的色彩会扭转，以提供视觉反馈。

• 清晰的代码构造：代码构造清晰，应用了正文来解释各个局部的性能，便于了解和保护。
  外围代码：

  @State paramsFromIndex: object = router.getParams()
  @State currentQuestionIndex: number = 0;
  // @State any_go: Resource = $r('app.profile.timu')
  // @State questions: string[] = dati
  @State questions: string[] = this.paramsFromIndex?.['questions']
  @State answers: string[][] =  this.paramsFromIndex?.['answers']
  @State correctAnswers: string[] = this.paramsFromIndex?.['correctAnswers']
  @State explanations: string[] = this.paramsFromIndex?.['explanations'] // 每个问题的解析
  @State selectedAnswer: string = '';
  @State selectedAnswerList: string[] = [];   // 用于记录选过的答案
  @State selectedscore: number = 0;
  @State showExplanation: boolean = false; // 用于管制是否显示解析
  @State ende: boolean = false; // 用于管制是否完结
  onNextQuestion() {
    const nextIndex = this.currentQuestionIndex + 1;
    if (nextIndex < this.questions.length) {
      this.currentQuestionIndex = nextIndex;
      this.selectedAnswer = '';
      this.showExplanation = false; // 清空显示解析状态
      this.ende=false;
    } else {
      this.ende=true;
      console.info("------ 点击了网络申请")
                extraData: {
            'prapoints': this.selectedscore,
            'userid':3,
            'Numberquestions':this.questions.length
          },
          connectTimeout: 60000, // 可选，默认为 60s
          readTimeout: 60000, // 可选，默认为 60s
        }, (err, data) => {if (!err) {
          // data.result 为 http 响应内容，可依据业务须要进行解析
          // @ts-ignore
          const response = JSON.parse(data.result);
          console.info('Result:' + response);
  
        } else {console.info('error:' + JSON.stringify(err));
          // 该申请不再应用，调用 destroy 办法被动销毁。httpRequest.destroy();}
      }
      );
      AlertDialog.show({
        title: '答题实现',
        message: '祝贺您实现答题！本次问题：' + this.selectedscore,
      });
    }
  }

  成果展现

  4.5.6 答题卡片页面

  外围代码：

  onNextQuestion() {
  const nextIndex = this.currentQuestionIndex + 1;
  if (nextIndex < this.questions.length) {
    this.currentQuestionIndex = nextIndex;
    this.selectedAnswer = '';
    this.showExplanation = false; // 清空显示解析状态
    this.ende=false;
  } else {this.ende=true;}
  }
  
  .onClick(() => {
  postCardAction(this, {
    "action": this.ACTION_TYPE,
    "abilityName": this.ABILITY_NAME,
    "params": {"message": this.MESSAGE}
  });
  })
  
  .onClick(() => {
  this.selectedAnswer = answer;
  this.showExplanation = true; // 显示解析
  this.selectedAnswerList[this.currentQuestionIndex] = answer;
  if (String(index + 1) == this.correctAnswers[this.currentQuestionIndex]) {this.selectedscore = this.selectedscore + 1;}
  }
  

  成果展现

  4.6 排行榜页面构建

  排行榜页面在利用中起着至关重要的作用，它能够展现用户之间的较量问题、竞争和体现。无论是游戏、学习利用还是社交媒体平台，排行榜页面都具备宽泛的利用。

  外围代码：

  import router from '@ohos.router';
  @Entry
  @Component
  struct LeaderboardPage {
  // 玩家数据数组，每个元素蕴含玩家姓名和分数
  
  @State paramsFromIndex: object = router.getParams()
  @State playerData: string[][] = this.paramsFromIndex?.['playerData']
  
  build() {Column() {Row() {Button("<")
          .width("68.78vp")
          .height("46.26vp")
          // .margin({left: -60})
          .fontColor("#fffff")
          .type(ButtonType.Circle)
          .fontSize("27fp")
          .onClick(() => {
            router.replaceUrl({
              url: "page/homepage",
              params: {name: this.paramsFromIndex?.['name']
              }
            })
          });
  
        Text("排行榜")
          .width("80%")
          .height("60vp")
          .fontColor("#0654ef")
          .textAlign(TextAlign.Center)
          .fontSize("30fp");
      }
  
      Column() {Image($r('app.media.pai'))
          .width("350.42vp")
          .height("189.02vp")
          .margin({
            top:10,
            bottom:20
          })
      }
      Row() {Text("姓名")
          .width("45%")
          .fontSize("20fp")
          .fontColor(Color.Blue); // 能够调整表头的款式
  
        Text("问题")
          .width("35%")
          .fontSize("20fp")
          .fontColor(Color.Blue);
  
        Text("操作")
          .width("35%")
          .fontSize("20fp")
          .fontColor(Color.Blue);
      }
      // .width("50%")
      // 遍历玩家数据数组，创立玩家条目
      ForEach(this.playerData, (player, index) => {Row() {Text(`${index + 1}.`)
            .width("10%")
            .fontSize("18fp");
  
          Text(player[0]) // 玩家姓名
            .width("30%")
            .fontSize("18fp");
  
          Text(` 得分: ${player[1]}`) // 玩家得分
            .width("40%")
            .fontSize("18fp");
  
          Text("查看")
            .width("20%")
            .fontColor(Color.Red)
            .fontSize("18fp")
            .onClick(() => {// this.onCreate();
              // this.onCreate()
              // 在此解决查看详情的逻辑
              AlertDialog.show({
                title: "查看",
                message: ` 姓名: ${player[0]}\n 得分: ${player[1]}`,
              });
              // console.error('JSON 解析谬误:', this.playerData2);
            });
  
        }
        .width("95%")
        .margin({top: '10vp'})
        .margin(10)
      });
    }
    .width('100%')
  }
  }

  代码总结：
  1. 创立 LeaderboardPage 组件，用于显示排行榜数据
  2. 定义了一个页面组件，用于显示排行榜数据，并提供了返回按钮和查看按钮等交互性能。排行榜数据来自路由参数，并以表格的模式出现在页面上。用户能够点击查看按钮来查看玩家的详细信息。

  4.7 题库上传页面构建

  题库上传页面在教育、培训和娱乐利用中扮演着要害角色，它容许用户上传自定义题库，为学习和娱乐提供更多抉择。

  题库上传页面的外围是题库数据的构造，咱们须要设计和存储这些数据，包含问题、答案和其余相干信息。通常，这些数据能够存储在数据库中，以便后续应用。

• 应用 OHOS 框架：该页面显著是应用 OHOS 框架构建的，这是一种实用于 HarmonyOS 操作系统的利用开发框架。通过导入 @ohos.router 模块，你能够实现页面之间的导航。
• 页面布局：页面采纳嵌套的 Column 和 Row 布局，以创立页面的各个元素。这包含按钮、文本、文本输入框、图片等。
• 路由导航：通过按钮的 onClick 事件，页面实现了路由导航性能，容许用户返回到主页（”page/homepage”）。
• 状态属性：页面应用 @State 装璜器申明了多个状态属性，如 message、paramsFromIndex、questions、answers、correctAnswers、explanations、answersflag，这些状态属性用于存储和治理页面的数据。
• 数据处理：页面包含多个文本输入框，用于输出题目、选项 A、选项 B、选项 C、选项 D、答案和解析。每当用户输出文本时，相应的状态属性会更新以保留用户输出的内容。
• 提交性能：页面的最初局部包含一个 ” 提交 ” 按钮，当用户点击该按钮时，页面使将用户输出的题目、答案、正确答案和解析等数据传递到数据库。
• 图像元素：页面包含一个图像元素，通过应用 Image 组件来显示上传图标。图像的大小和地位都有指定的值。
• 文本元素：页面应用多个文本元素，如 ” 题目上传 ”、” 选项 A：”、” 选项 B：” 等，用于标识和领导用户在输入框中输出什么信息。
• 款式和排版：页面设置了文本的色彩、字体大小、文本对齐等款式属性，以加强页面的可读性和吸引力。

• 用户交互：通过文本输入框和按钮的交互，用户能够输出题目和答案，以及提交这些数据。
  数据更新：用户输出的数据通过 onChange 事件处理函数更新到相应的状态属性，这将容许后续的数据处理和提交。
  外围代码：

  @State message: string = 'Hello World'
  @State paramsFromIndex: object = router.getParams()
  @State questions: string[] = this.paramsFromIndex?.['questions']
  @State answers: string[][] =  this.paramsFromIndex?.['answers']
  @State correctAnswers: string[] = this.paramsFromIndex?.['correctAnswers']
  @State explanations: string[] = this.paramsFromIndex?.['explanations'] // 每个问题的解析
  @State answersflag: string[] =  []

  链接云端数据库要害代码

  mport formInfo from '@ohos.app.form.formInfo';
  import formBindingData from '@ohos.app.form.formBindingData';
  import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
  import formProvider from '@ohos.app.form.formProvider';
  import agconnect from '@hw-agconnect/api-ohos';
  import {AGConnectCloudDB, CloudDBZone, CloudDBZoneConfig, CloudDBZoneQuery} from '@hw-agconnect/database-ohos';

  要点：

• 确保数据的准确性和格局，以防止上传有效的题库数据。

• 优化页面性能，特地是在解决大量数据时，以确保页面响应迅速。

  4.8 真机运行

  真机运行必须先持续签名，只需到我的项目构造中配置即可。
  留神步骤如下：
  1. 用数据线连贯 HarmonyOS4.0 版本零碎的手机。
  2. 关上开发者模式和 USB 调试
  3. 抉择文件传输。
  4. 持续签名
  5. 运行我的项目到真机

  真机运行成果如下：

  五、总结

  5.1 我的项目总结

  在本文中，咱们介绍了一个对于在线答题利用的我的项目，其中包含我的项目构造和开发计划。以下是本文的次要要点：
  我的项目构造：

• 我的项目次要分为主利用的 Ability（entryability）、卡片的 Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。
• 应用了两个重要的配置文件，别离是 agconnect-services.json 和 schema.json，用于连贯 serverless 服务和云端配置信息。
  我的项目开发计划：
• 我的项目旨在接入 AGC 认证服务，以实现用户登录，展现个人账户信息，在线答题以及积分排行等性能。
• 用户能够在利用中进行常识练习，上传自定义题目以丰盛题库内容。
  利用华为云服务，实现用户答题展现问题和排名，减少用户对学习的趣味。
• 页面构建重点在于创立柔美的页面布局，应用云数据库存储题目，实现卡片的刷新和页面跳转等性能。

1. 登录页面构建：

• 登录页面应用 OHOS 框架构建，包含路由导航，文本输入框，按钮等元素。
• 应用身份验证组件（Login）提供了多种登录形式，胜利登录后将用户信息传递并跳转到主页。
  页面布局蕴含第三方登录按钮和立刻注册按钮，以及利用的标记图标。

2. 首页性能构建：

• 首页蕴含多个选项卡，别离展现不同内容，如图片、视频播放器、个人信息、退出登录、题目上传和排行榜等性能。
• 页面应用 Tabs 组件创立选项卡，数据来自云端数据库，并实现了排行榜的性能。

3. 答题页面构建：

• 答题页面用于用户进行常识练习，包含动静内容展现、状态治理、用户交互、页面导航等性能。
• 用户能够抉择答案，查看解析，依据答案是否正确进行得分计算，最初提交答题后果。

4. 排行榜页面构建：

• 排行榜页面用于展现用户之间的较量问题和竞争，用户能够查看其余玩家的问题。
• 页面应用路由导航，创立排行榜表格，包含玩家姓名、得分和查看按钮。

5. 题库上传页面构建：
题库上传页面容许用户上传自定义题库，包含问题、答案、正确答案和解析等数据。。

6. 真机运行：
最初，文章提到了如何在真机上运行利用，包含持续签名和运行我的项目的步骤。

总之，本文介绍了一个在线答题利用的我的项目构造和开发计划，涵盖了各个页面的性能和外围代码，为开发者提供了建设相似利用的领导。

5.2 元服务总结

1. 元服务的概念:
   元服务作为 HarmonyOS 的一个重要概念，具备独立入口、免装置的特点，为用户提供了更轻量化的服务拜访形式。通过万能卡片等状态，用户能够更不便地拜访重要信息和性能。这种模式使利用更具便捷性，尤其实用于将来的智能设施。
2. ArkTS 语言的劣势:
   ArkTS 语言是 HarmonyOS 的利用开发语言，它强调动态类型和申明式 UI，这有助于进步代码品质和可维护性。同时，它提供了丰盛的状态管理机制，容许在不同组件层级之间传递数据，这是构建简单利用所必须的。ArkTS 的一直迭代和欠缺，使其成为一种弱小的开发语言。
3. DevEco Studio 开发工具的便捷性: DevEco
   Studio 是一个功能强大的开发工具，反对 HarmonyOS 利用和服务的开发。其中，低代码开发性能为开发者提供了可视化界面，使 UI 开发更加高效。而端云一体化开发则容许开发者在本地和云端之间灵便开发和测试利用。这样的工具能够大大提高开发效率。
4. 端云一体化开发的劣势:
   端云一体化开发为开发者提供了弱小的云计算能力，并容许在本地进行代码调试。这使开发者可能更高效地利用云资源，并更轻松地发现和解决问题。此外，与应用程序之间的通信也失去了很好的反对，使得开发更加便捷。

总的来说，HarmonyOS 的元服务、ArkTS 语言和 DevEco Studio 开发工具以及端云一体化开发，为开发者提供了构建现代化、轻量化、高性能利用的便捷形式。这些技术和工具将帮忙开发者更好地适应将来的智能设施和服务提供形式。

六. 附录

元服务介绍
https://developer.huawei.com/consumer/cn/harmonyos/fa
ArkTS 语言介绍
https://developer.harmonyos.com/cn/develop/arkts/
端云一体化开发介绍
https://developer.harmonyos.com/cn/docs/documentation/doc-gui…
低代码开发介绍
https://developer.harmonyos.com/cn/docs/documentation/doc-gui…