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

HarmonyOS 鸿蒙Next从基础到实战-高性能华为在线答题元服务 最近看到美团、新浪、去哪儿多家互联网企业启动鸿蒙原生应用开发，这个HarmonyOS NEXT越来越引人关注。奈何当前不面向个人开发者开放，但是我们可以尝试下鸿蒙新的应用形态——元服务的开发。

元服务是基于HarmonyOS提供的一种面向未来的服务提供方式，有独立入口、免安装，以万能卡片等多种呈现形态，可提供一个或多个便捷、轻量化服务。在本文中，我将详细介绍元服务、ArkTS 语言开发以及 DevEco Studio 开发工具的端云一体化开发和低代码开发等方面，并且带大家亲自实战元服务开发-在线答题项目深度体验学习！

在线答题元服务主要功能：

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

项目运行演示

在线答题元服务主要功能：

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

项目运行演示

一.元服务核心内容

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

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）相比会出现很多意想不到的bug。但是经过一年的迭代更新，其功能现在已经十分完善且强大。让开发者能够更高效地编写和开发应用程序。

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服务中心，创建新的项目，并且填入项目名称。

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

1. 关于SDK配置，因为我们是云端一体化项目，不需要我们额外配置SDK，在创建项目时会自动配置。

2. 到我的应用，创建对应的应用，如下：

需要注意：软件包类型选择HarmonyOS应用，是否元服务选择是。

• 到Serverless里开通创建云函数和云数据库，如下图。这样提前开通的好处是后续无需更新开通后的配置文件，对新手极为友好。

三.项目环境本地搭建

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

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

1. 只需按下面选择对应的项目模板进行创建。

1. 创建项目名称为：arkTSDemo（这是我的案例名称，按照华为包命名规范自行起名即可）。

注意：需要和上文中的云端创建包名相同，否则会出现下面检测不到的情况，只需要检查包名是否匹配即可解决。

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

1. 完成上面该有的配置之后，我们再返回到 DevEco Studio，就可以看到我们刚刚创建的。

点击finsh之后我们创建项目，耐心等待配置和自动下载所需资源包即可。

1. 我们的设置SDK也是无需手动配置的，我们的云端一体化创建会帮我们自动的创建好所需的文件和配置，为我们节省了大量的步骤。

2. 创建项目，等待依赖配置完成即可开始我们本次的项目实战了。

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

4.1 项目结构

我们项目结构如下图所示：

• entryability：主应用的Ability
• Entnyformability：卡片的Ability
• Models：从云数据库导出的数据类型
• Pages：页面代码文件夹
• Widget->Pages:卡片页面文件夹
• rawfile下的俩个文件：
• agconnect-services.json：用于连接severless的配置信息
• schema.json：云端配置信息

4.2 项目开发计划

项目接入AGC认证服务用于登录，包含展示个人账号信息的页面、在线答题页面、积分排行页面，用户可以在应用上进行知识练习，随时随地的巩固已学的知识，支持用户自己上传题目，不断完善题库丰富度，构建多元化题库。利用华为云服务提供的高性能，高可用性云服务，可以轻松实现，用户答题展示成绩和进度，根据用户最高成绩进行排行，显示用户的排名，增加用户对学习的兴趣，可以使用元服务卡片展示用户的成绩排名或者成绩和进度均可。

• 构建优美页面
• 使用云数据库存储题目，通过云数据库接口进行查询。
• 桌面卡片的刷新事件依赖于postCardAction接口的message事件。
• 点击跳转应用使用postCardAction接口的router事件。
• 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";

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

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
      }
    })
  }
})

页面代码功能解释：

• 导入所需的模块和组件，包括路由 (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) {
  tabBar(this.TabBuilder(0));
}

链接云端数据库关键代码

import 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](/user/State) paramsFromIndex: object = router.getParams()
[@State](/user/State) currentQuestionIndex: number = 0;
[@State](/user/State) questions: string[] = this.paramsFromIndex?.['questions']
[@State](/user/State) answers: string[][] = this.paramsFromIndex?.['answers']
[@State](/user/State) correctAnswers: string[] = this.paramsFromIndex?.['correctAnswers']
[@State](/user/State) explanations: string[] = this.paramsFromIndex?.['explanations'] // 每个问题的解析
[@State](/user/State) selectedAnswer: string = '';
[@State](/user/State) selectedAnswerList: string[] = []; // 用于记录选过的答案
[@State](/user/State) selectedscore: number = 0;
[@State](/user/State) showExplanation: boolean = false; // 用于控制是否显示解析
[@State](/user/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;
  }
}

效果展示

4.5.6 答