HarmonyOS从基础到实战-高性能华为在线答题元服务

近来看到美团、新浪、去哪儿多家互联网企业启动鸿蒙原生应用开辟，这个HarmonyOS NEXT越来越引人关注。怎样当前不面向个人开辟者开放，但是我们可以实行下鸿蒙新的应用形态——元服务的开辟。
元服务是基于HarmonyOS提供的一种面向未来的服务提供方式，有独立入口、免安装，以万能卡片等多种呈现形态，可提供一个或多个便捷、轻量化服务。在本文中，我将详细先容元服务、ArkTS 语言开辟以及 DevEco Studio 开辟工具的端云一体化开辟和低代码开辟等方面，并且带大家亲自实战元服务开辟-在线答题项目深度体验学习！
在线答题元服务主要功能：

• 接入AGC认证服务，以实现用户登录，展示个人账户信息，在线答题以及积分排行等功能。
  
• 用户可以在应用中举行知识练习，上传自定义标题以丰富题库内容。
  
• 利用华为云服务，实现用户答题展示成绩和排名，增加用户对学习的兴趣。
  
• 使用云数据库存储标题，实现卡片的刷新和页面跳转等功能。
  

项目运行演示视频


     HarmonyOS从基础到实战-高性能华为在线答题元视频演示
  
一．元服务焦点内容

本文偏重先容元服务元服务轻量化、信息外显的特性，由基础知识学习到项目实战，逐步深入的带大家学习，最后使用元服务技术开辟一套高性能，高可用性的在线答题元服务。
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->ages:卡片页面文件夹
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.引用部分依赖如下：

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

复制代码

2.焦点代码（已去特定项目链接块代码，展示供大家直接使用的本页通用焦点代码）

1. Login({
2.   modes: [AuthMode.PHONE_VERIFY_CODE, AuthMode.MAIL_VERIFY_CODE],
3.   onSuccess: (user) => {
4.     console.log('用户信息:', user.getPhone());
5.     this.phone=String(user.getPhone());
6.     router.replaceUrl({
7.       url: "page/homepage",
8.       params: {
9.         name: this.phone
10.       }
11.     })
13.   }
15. }){
16.   Row() {
17.     Button('第三方登陆')
18.       .width("140vp")
19.       .height("80vp")
20.       .fontSize(20)
21.       .margin({
22.         bottom: 40,
23.         top: 60,
24.         right: 20
25.       })
26.     Button('立即注册')
27.       .width("140vp")
28.       .height("80vp")
29.       .fontSize(20)
30.       .margin({
31.         bottom: 40,
32.         top: 60,
33.       })
34.   }
35.   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：
  

1. Tabs({ barPosition: BarPosition.End, controller: this.mTabController }) {
2.   TabContent() {
3.     // ... 选项卡1的内容
4.   }
5.   .tabBar(this.TabBuilder(0));
6.   // TabContent2 和 TabContent3 同样方式创建
7. }

复制代码

链接云端数据库关键代码

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

复制代码

4.5 答题页面构建

答题页面是许多应用步伐中的关键组成部分，尤其是在教诲、娱乐和培训应用中。构建一个功能强大的答题页面，以提供用户友好的答题体验。
页面设计需满意以下要求：

• 动态内容展示：页面可以动态体现多个问题和答案选项，根据用户的选择和进度更新内容。
  
• 状态管理：使用@State装饰器声明确多个状态属性，用于存储标题、答案、用户选择的答案、解析等信息。这有助于管理和更新页面的状态。
  
• 用户交互：用户可以点击答案选项按钮来选择答案，并根据答案的正确与否举行相应的交互反馈。
  
• 页面导航：提供了页面导航功能，用户可以在答题完成后返回到主页。
  
• 动态解析体现：可以体现答案的解析，用户可以点击按钮来检察问题的表明。
  
• 灵活的页面结构：通过Column、Row、Button等组件来构建页面结构，提供了灵活性和可定制性。
  
• 按钮样式和交互设计：根据用户的选择状态，按钮的颜色会改变，以提供视觉反馈。
  
• 清楚的代码结构：代码结构清楚，使用了表明来表明各个部分的功能，便于明确和维护。
  焦点代码：
  

1.   @State paramsFromIndex: object = router.getParams()
2.   @State currentQuestionIndex: number = 0;
3.   // @State any_go: Resource = $r('app.profile.timu')
4.   // @State questions: string[] = dati
5.   @State questions: string[] = this.paramsFromIndex?.['questions']
6.   @State answers: string[][] =  this.paramsFromIndex?.['answers']
7.   @State correctAnswers: string[] = this.paramsFromIndex?.['correctAnswers']
8.   @State explanations: string[] = this.paramsFromIndex?.['explanations'] // 每个问题的解析
9.   @State selectedAnswer: string = '';
10.   @State selectedAnswerList: string[] = [];   //用于记录选过的答案
11.   @State selectedscore: number = 0;
12.   @State showExplanation: boolean = false; // 用于控制是否显示解析
13.   @State ende: boolean = false; // 用于控制是否结束
14.   onNextQuestion() {
15.     const nextIndex = this.currentQuestionIndex + 1;
16.     if (nextIndex < this.questions.length) {
17.       this.currentQuestionIndex = nextIndex;
18.       this.selectedAnswer = '';
19.       this.showExplanation = false; // 清空显示解析状态
20.       this.ende=false;
21.     } else {
22.       this.ende=true;
23.       console.info("------点击了网络请求")
24.                 extraData: {
25.             'prapoints': this.selectedscore,
26.             'userid':3,
27.             'Numberquestions':this.questions.length
28.           },
29.           connectTimeout: 60000, // 可选，默认为60s
30.           readTimeout: 60000, // 可选，默认为60s
31.         }, (err, data) => {
33.         if (!err) {
34.           // data.result为http响应内容，可根据业务需要进行解析
35.           // @ts-ignore
36.           const response = JSON.parse(data.result);
37.           console.info('Result:' + response);
39.         } else {
40.           console.info('error:' + JSON.stringify(err));
41.           // 该请求不再使用，调用destroy方法主动销毁。
42.           httpRequest.destroy();
43.         }
44.       }
45.       );
46.       AlertDialog.show({
47.         title: '答题完成',
48.         message: '恭喜您完成答题！本次成绩：' + this.selectedscore,
49.       });
50.     }
51.   }

复制代码

效果展示

4.5.6 答题卡片页面

焦点代码：

1. onNextQuestion() {
2.   const nextIndex = this.currentQuestionIndex + 1;
3.   if (nextIndex < this.questions.length) {
4.     this.currentQuestionIndex = nextIndex;
5.     this.selectedAnswer = '';
6.     this.showExplanation = false; // 清空显示解析状态
7.     this.ende=false;
8.   } else {
9.     this.ende=true;
10.   }
11. }
13. .onClick(() => {
14.   postCardAction(this, {
15.     "action": this.ACTION_TYPE,
16.     "abilityName": this.ABILITY_NAME,
17.     "params": {
18.       "message": this.MESSAGE
19.     }
20.   });
21. })
23. .onClick(() => {
24.   this.selectedAnswer = answer;
25.   this.showExplanation = true; // 显示解析
26.   this.selectedAnswerList[this.currentQuestionIndex] = answer;
27.   if (String(index + 1) == this.correctAnswers[this.currentQuestionIndex]) {
28.     this.selectedscore = this.selectedscore + 1;
29.   }
30. }

复制代码

效果展示

4.6 排行榜页面构建

排行榜页面在应用中起着至关重要的作用，它可以展示用户之间的比赛成绩、竞争和体现。无论是游戏、学习应用还是交际媒体平台，排行榜页面都具有广泛的应用。

焦点代码：

1. import router from '@ohos.router';
2. @Entry
3. @Component
4. struct LeaderboardPage {
5.   // 玩家数据数组，每个元素包含玩家姓名和分数
7.   @State paramsFromIndex: object = router.getParams()
8.   @State playerData: string[][] = this.paramsFromIndex?.['playerData']
10.   build() {
12.     Column() {
13.       Row() {
14.         Button("<")
15.           .width("68.78vp")
16.           .height("46.26vp")
17.           // .margin({ left: -60 })
18.           .fontColor("#fffff")
19.           .type(ButtonType.Circle)
20.           .fontSize("27fp")
21.           .onClick(() => {
22.             router.replaceUrl({
23.               url: "page/homepage",
24.               params: {
25.                 name: this.paramsFromIndex?.['name']
26.               }
27.             })
28.           });
30.         Text("排行榜")
31.           .width("80%")
32.           .height("60vp")
33.           .fontColor("#0654ef")
34.           .textAlign(TextAlign.Center)
35.           .fontSize("30fp");
36.       }
38.       Column() {
39.         Image($r('app.media.pai'))
40.           .width("350.42vp")
41.           .height("189.02vp")
42.           .margin({
43.             top:10,
44.             bottom:20
45.           })
46.       }
47.       Row() {
49.         Text("   姓名")
50.           .width("45%")
51.           .fontSize("20fp")
52.           .fontColor(Color.Blue); // 可以调整表头的样式
54.         Text("成绩")
55.           .width("35%")
56.           .fontSize("20fp")
57.           .fontColor(Color.Blue);
59.         Text("操作")
60.           .width("35%")
61.           .fontSize("20fp")
62.           .fontColor(Color.Blue);
63.       }
64.       // .width("50%")
65.       // 遍历玩家数据数组，创建玩家条目
66.       ForEach(this.playerData, (player, index) => {
67.         Row() {
68.           Text(`${index + 1}.`)
69.             .width("10%")
70.             .fontSize("18fp");
72.           Text(player[0]) // 玩家姓名
73.             .width("30%")
74.             .fontSize("18fp");
76.           Text(`得分: ${player[1]}`) // 玩家得分
77.             .width("40%")
78.             .fontSize("18fp");
80.           Text("查看")
81.             .width("20%")
82.             .fontColor(Color.Red)
83.             .fontSize("18fp")
84.             .onClick(() => {
85.               // this.onCreate();
86.               // this.onCreate()
87.               // 在此处理查看详情的逻辑
88.               AlertDialog.show({
89.                 title: "查看",
90.                 message: `姓名: ${player[0]}\n得分: ${player[1]}`,
91.               });
92.               // console.error('JSON解析错误:', this.playerData2);
93.             });
95.         }
96.         .width("95%")
97.         .margin({ top: '10vp' })
98.         .margin(10)
99.       });
100.     }
101.     .width('100%')
102.   }
103. }

复制代码

代码总结：
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变乱处置惩罚函数更新到相应的状态属性，这将答应后续的数据处置惩罚和提交。
  焦点代码：
  

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

复制代码

链接云端数据库关键代码

1. mport formInfo from '@ohos.app.form.formInfo';
2. import formBindingData from '@ohos.app.form.formBindingData';
3. import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
4. import formProvider from '@ohos.app.form.formProvider';
5. import agconnect from '@hw-agconnect/api-ohos';
6. 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 元服务总结

• 元服务的概念:
  元服务作为HarmonyOS的一个重要概念，具有独立入口、免安装的特点，为用户提供了更轻量化的服务访问方式。通过万能卡片等形态，用户可以更方便地访问重要信息和功能。这种情势使应用更具便捷性，尤其适用于未来的智能装备。
  
• ArkTS语言的优势:
  ArkTS语言是HarmonyOS的应用开辟语言，它强调静态范例和声明式UI，这有助于提高代码质量和可维护性。同时，它提供了丰富的状态管理机制，答应在差别组件层级之间传递数据，这是构建复杂应用所必需的。ArkTS的不停迭代和美满，使其成为一种强大的开辟语言。
  
• DevEco Studio开辟工具的便捷性: DevEco
  Studio是一个功能强大的开辟工具，支持HarmonyOS应用和服务的开辟。此中，低代码开辟功能为开辟者提供了可视化界面，使UI开辟更加高效。而端云一体化开辟则答应开辟者在本地和云端之间灵活开辟和测试应用。这样的工具可以大大提高开辟服从。
  
• 端云一体化开辟的优势:
  端云一体化开辟为开辟者提供了强大的云盘算能力，并答应在本地举行代码调试。这使开辟者可以或许更高效地利用云资源，并更轻松地发现和办理问题。此外，与应用步伐之间的通信也得到了很好的支持，使得开辟更加便捷。
  

总的来说，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-guides-V3/agc-harmonyos-clouddev-overview-0000001443209792-V3
低代码开辟先容
https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ide-low-code-overview-0000001480179573-V3

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。