圆咕噜咕噜 发表于 2025-1-10 14:35:26

探索HarmonyOS NEXT实战应用【元服务实战-在线答题】

HarmonyOS NEXT

HarmonyOS NEXT 是华为推出的一个新阶段的操纵系统,它继承并扩展了之前版本HarmonyOS的理念和技术架构,旨在为多设备生态提供更为流畅的体验。HarmonyOS的核心思想是实现不同设备之间的无缝毗连和协同工作,推动智能设备的全面互联。随着技术的进步,HarmonyOS NEXT更加注重将来科技的趋势,例如人工智能、边缘盘算和增强实际(AR)的深度融合。
https://i-blog.csdnimg.cn/direct/1ddf57da490e43f0b566aabe94f62d2f.png

[*]全场景智能体验
HarmonyOS NEXT的目标是打造一个涵盖更多设备的智能生态圈。华为的愿景是,用户无论是利用手机、平板、电视、智能穿戴设备还是车载系统,都能在一个统一的操纵系统环境下实现跨设备的无缝体验。这意味着设备之间不再是孤立的,而是可以在共享一个智能生态下协同工作。
多设备协同:HarmonyOS NEXT引入了“分布式技术架构”,可以让多个设备同时执行任务并相互之间共享盘算资源。例如,手机和电视可以共享表现内容,或者手表可以接管手机的部门操纵任务。
无缝互联:无论是开启不同的设备之间的流媒体播放,还是文件在设备之间的实时传输,HarmonyOS NEXT都提供了非常顺畅的过渡体验,简化了用户操纵的复杂性。
https://i-blog.csdnimg.cn/direct/6cd8d9887ea340febae2c02a8076e0c7.png

[*]智能化与AI深度整合
随着人工智能技术的敏捷发展,HarmonyOS NEXT深入整合了AI本事,能够提供更加智能化的服务和应用体验。
智能助手与语音控制:AI语音助手被大幅优化,用户可以通过语音指令在不同设备之间进行操纵。更强大的语音识别和天然语言处理技术使得系统能够明确更复杂的指令。
增强实际和虚拟实际:HarmonyOS NEXT支持更丰富的AR/VR体验,尤其在智能家居、游戏和远程协作范畴具有广泛的应用。用户可以通过AR技术获取即时的环境数据反馈,提升交互性和沉浸感。

[*]全新UI/UX设计
HarmonyOS NEXT不光关注硬件和技术的突破,同时还在用户界面(UI)和用户体验(UX)方面进行了重大改进。
跨设备UI一致性:HarmonyOS NEXT力图在不同设备上提供一致的视觉和操纵体验。无论是在手机、智能穿戴设备还是大屏幕电视上,用户都能够感受到无缝的操纵过渡。
简化的交互方式:得益于AI的加持,HarmonyOS NEXT能够根据用户风俗自动优化界面设计,并通过智能保举来提升用户操纵效率。

[*]安全性和隐私保护
在现代操纵系统中,用户的数据安全和隐私保护至关重要。HarmonyOS NEXT在安全性上做了多方面的增强。
分布式隐私保护:通太过布式技术,HarmonyOS NEXT能够确保数据在设备之间传输时加密和匿名化处理,低沉隐私泄露的风险。
智能反欺诈技术:系统通过AI模型实时监控和分析数据流,检测非常行为,帮助用户规避潜在的安全威胁。
1.1 元服务

HarmonyOS是一款面向万物互联期间的、全新的分布式操纵系统。运行在HarmonyOS的应用分为两种形态:


[*]传统方式的必要安装的应用(即传统概念中的HarmonyOS应用,可简称应用)。
[*]提供特定功能、免安装的应用(即元服务,原名为原子化服务)。
本文则重要利用元服务形态进行介绍及其开辟实战。
1.1.1元服务的呈现形态

鸿蒙全能卡片是元服务的重要显现形式之一(其他形式包括语音和图标等)。每个全能卡片都是一种始终可见的元服务或应用,将重要信息以卡片的形式展示在桌面上,通过轻量交互实现服务的便捷访问。
https://i-blog.csdnimg.cn/blog_migrate/d4984ed48a117e7f60497525287b392b.png
1.1.2 元服务的特点

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

ArkTS是鸿蒙生态的应用开辟语言。它在保持TypeScript(简称TS)基本语法风格的基础上,对TS的动态范例特性施加更严格的约束,引入静态范例。同时,提供了声明式UI、状态管理等相应的本事,让开辟者可以以更简洁、更天然的方式开辟高性能应用。
1.2.1 ArkTS语言特点

ArkTS语言通过不断的迭代升级有了许多更新和改进,一年前我第一次接触这个技术,发现许多地方都不完善,相比其他语言(TS,JS)相比有许多不敷。但是经过一年的迭代更新,其功能现在已经非常完善且强大。让开辟者能够更高效地编写和开辟应用程序。
https://i-blog.csdnimg.cn/blog_migrate/219f25f0545ff79a026d02ac8033317e.png
ArkTS提供了简洁天然的声明式语法、组件化机制、数据-UI自动关联等本事,实现了贴近天然语言,书写效率更高的编程方式,为开辟者带来易学、易懂、极简开辟的优质体验。
在利用ArkTS语言开辟应用时,状态管理是一个重要的概念。状态管理是指管理应用中的各种状态,包括组件状态、全局状态等。状态管理可以帮助开辟者更好地构造和管理应用中的数据,使得应用更加稳固和高效。ArkTS提供了多维度的状态管理机制,可以在ArkUI开辟框架中利用。和UI相干联的数据,不光可以在组件内利用,还可以在不同组件层级间通报,好比父子组件之间、爷孙组件之间,也可以是应用全局范围内的通报。
1.2.2 本事扩展

ArkTS在TS的基础上重要扩展了如下本事:


[*]基本语法:ArkTS界说了声明式UI描述、自界说组件和动态扩展UI元素的本事,再配合ArkUI开辟框架中的系统组件及其相干的事件方法、属性方法等共同构成了UI开辟的主体。
[*]状态管理:ArkTS提供了多维度的状态管理机制。在UI开辟框架中,与UI相干联的数据可以在组件内利用,也可以在不同组件层级间通报,好比父子组件之间、爷孙组件之间,还可以在应用全局范围内通报或跨设备通报。别的,从数据的通报形式来看,可分为只读的单向通报和可变更的双向通报。开辟者可以灵活的利用这些本事来实现数据和UI的联动。
[*]渲染控制:ArkTS提供了渲染控制的本事。条件渲染可根据应用的不同状态,渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。
二.项目云端设置

2.1 AppGallery Connect服务创建

AppGallery Connect(以下简称AGC)是华为应用市场推出的应用一站式服务平台,致力于为开辟者提供应用创意、开辟、分发、运营、分析全生命周期服务,构建全场景智慧化的应用生态。
https://i-blog.csdnimg.cn/blog_migrate/a0ab816d99d10b1b8d1e98187f29878d.png
1.我们必要进入AppGallery Connect服务中心,创建新的项目,并且填入项目名称。
https://i-blog.csdnimg.cn/blog_migrate/15e902ae481302eab04308d81de3d279.png
2.进入如下页面,并在Serverless里,找得手机号码,将其设置为启用状态。
https://i-blog.csdnimg.cn/blog_migrate/cf8e8df3e16c7e5f50edca62fd77b4f2.png
https://i-blog.csdnimg.cn/blog_migrate/0c19191c7a4dcdb8013f293d75a2d7e0.png
3.关于SDK设置,因为我们是云端一体化项目,不必要我们额外设置SDK,在创建项目时会自动设置。
4.到我的应用,创建对应的应用,如下:
https://i-blog.csdnimg.cn/blog_migrate/837fd43691e0a6d25f7d403a13f03c58.png
必要注意:软件包范例选择HarmonyOS应用,是否元服务选择是。
5.到Serverless里开通创建云函数和云数据库,如下图。这样提前开通的好处是后续无需更新开通后的设置文件,对新手极为友好。
https://i-blog.csdnimg.cn/blog_migrate/2743e6f340473e47cf50f1fdaca3262c.png
三.项目环境本地搭建

提前做完云端设置后,对于项目环境本地搭建较为容易。
3.1 创建端云一体化元服务项目

1.只需按下面选择对应的项目模板进行创建。
https://i-blog.csdnimg.cn/blog_migrate/9bf51bff51e6fbbbc8479643b536eb82.png
2.创建项目名称为:arkTSDemo(这是我的案例名称,按照华为包定名规范自行起名即可)。
注意:必要和上文中的云端创建包名相同,否则会出现下面检测不到的情况,只必要查抄包名是否匹配即可办理。
https://i-blog.csdnimg.cn/blog_migrate/1ae930e12fa14ff46fa312479b3fd0ff.png
填写对应的参数要求,并且添加到刚刚创建的项目中去。
https://i-blog.csdnimg.cn/blog_migrate/21ecde48a07eb95c7bfeb8aefdbccad9.png
3.完成上面该有的设置之后,我们再返回到 DevEco Studio,就可以看到我们刚刚创建的。
https://i-blog.csdnimg.cn/blog_migrate/fa842673c0d94804353c755db0a104d4.png
点击finsh之后我们创建项目,耐心等待设置和自动下载所需资源包即可。
4.我们的设置SDK也是无需手动设置的,我们的云端一体化创建会帮我们自动的创建好所需的文件和设置,为我们节省了大量的步骤。
5.创建项目,等待依赖设置完成即可开始我们本次的项目实战了。
https://i-blog.csdnimg.cn/blog_migrate/cee9554d92ea4c3cfa447ccee6aa19f4.png
四.元服务实战-在线答题

4.1 项目结构

我们项目结构如下图所示:
1.entryability:主应用的Ability
2.Entnyformability:卡片的Ability
3.Models:从云数据库导出的数据范例
4.Pages:页面代码文件夹
5.Widget->Pages:卡片页面文件夹
6.rawfile下的俩个文件:
①agconnect-services.json:用于毗连severless的设置信息
②schema.json:云端设置信息
https://i-blog.csdnimg.cn/blog_migrate/97065e34eb1978f4c01c811490242082.png
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: ,
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” 页面,同时通报手机号码参数。
[*]页面结构中还包罗了第三方登录按钮和立即注册按钮,以及应用的标志图标。
页面预览效果:
https://i-blog.csdnimg.cn/blog_migrate/574fcc4dc33c9d7ccdbbf31298fbba80.png
4.4 首页功能构建

首页是一个包罗多个选项卡的页面,详细功能内容如下:


[*]导入所需的模块和组件,包括路由 (router)、提示操纵 (promptAction)、Web视图 (web_webview) 和网络请求 (http)。
[*]在 Index 组件中,界说了一些状态 (@State),包括从路由获取的参数 (paramsFromIndex)、播放器数据 (playerData)、当前页数 (mCurrentPage),以及一些其他控制器和资源。
[*]在 build 方法中,创建了一个包罗多个选项卡的页面,每个选项卡代表不同的内容。
[*]页面的第一个选项卡包罗了一些图片、文字和按钮,以及一个用于观看视频的 Video 组件。还有一个按钮,当点击时会触发 HTTP 请求,获取排行榜数据,并在获取数据后跳转到另一个页面表现排行榜。
[*]页面的第二个选项卡包罗了一个视频播放器,用户可以点击按钮来开始播放视频或切换到下一个视频。
[*]页面的第三个选项卡包罗了一些个人信息和操纵,包括退出登录、标题上传、通知和排行榜。用户可以点击这些操纵来执行相应的功能。
[*]利用 Tabs 组件创建了包罗选项卡的结构,并在每个选项卡中界说了不同的内容。
https://i-blog.csdnimg.cn/blog_migrate/2ebf8d733b2176b7076898f52b78021e.png
核心代码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,
      });
    }
}
效果展示
https://i-blog.csdnimg.cn/blog_migrate/00b299c723222e1f915909ad7700b649.png
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 = answer;
if (String(index + 1) == this.correctAnswers) {
    this.selectedscore = this.selectedscore + 1;
}
}

效果展示
https://i-blog.csdnimg.cn/blog_migrate/d74e64ab5ef348896f9af4ac1156c001.png
4.6 排行榜页面构建

排行榜页面在应用中起着至关重要的作用,它可以展示用户之间的比赛成绩、竞争和体现。无论是游戏、学习应用还是交际媒体平台,排行榜页面都具有广泛的应用。
https://i-blog.csdnimg.cn/blog_migrate/a43cfe66ad0fddc2011e6692b536cfe6.png
核心代码:
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) // 玩家姓名
            .width("30%")
            .fontSize("18fp");

          Text(`得分: ${player}`) // 玩家得分
            .width("40%")
            .fontSize("18fp");

          Text("查看")
            .width("20%")
            .fontColor(Color.Red)
            .fontSize("18fp")
            .onClick(() => {
            // this.onCreate();
            // this.onCreate()
            // 在此处理查看详情的逻辑
            AlertDialog.show({
                title: "查看",
                message: `姓名: ${player}\n得分: ${player}`,
            });
            // console.error('JSON解析错误:', this.playerData2);
            });

      }
      .width("95%")
      .margin({ top: '10vp' })
      .margin(10)
      });
    }
    .width('100%')
}
}
代码总结:
1.创建 LeaderboardPage 组件,用于表现排行榜数据
2.界说了一个页面组件,用于表现排行榜数据,并提供了返回按钮和检察按钮等交互功能。排行榜数据来自路由参数,并以表格的形式呈现在页面上。用户可以点击检察按钮来检察玩家的详细信息。
4.7 题库上传页面构建

题库上传页面在教育、培训和娱乐应用中扮演着关键角色,它允许用户上传自界说题库,为学习和娱乐提供更多选择。
https://i-blog.csdnimg.cn/blog_migrate/c4143b90a0272058cd89a1c5ea07e3a1.png
题库上传页面的核心是题库数据的结构,我们必要设计和存储这些数据,包括题目、答案和其他相干信息。通常,这些数据可以存储在数据库中,以便后续利用。
https://i-blog.csdnimg.cn/blog_migrate/7d20b4f7a3d2b811ca2ea63b67fb0fda.png


[*]利用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.运行项目到真机
https://i-blog.csdnimg.cn/blog_migrate/66624cc36d87d42a4268107ab5adfeae.png
真机运行效果如下:
https://i-blog.csdnimg.cn/blog_migrate/a6f45686f4cad1008a148bbcadc175d0.png
五、总结

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应用和服务的开辟。而端云一体化开辟则允许开辟者在本地和云端之间灵活开辟和测试应用。这样的工具可以大大提高开辟效率。
[*]端云一体化开辟的上风:
端云一体化开辟为开辟者提供了强大的云盘算本事,并允许在本地进行代码调试。这使开辟者能够更高效地利用云资源,并更轻松地发现和办理题目。别的,与应用程序之间的通讯也得到了很好的支持,使得开辟更加便捷。
总的来说,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

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 探索HarmonyOS NEXT实战应用【元服务实战-在线答题】