展示型网站企业网站建设,建设新网站,免费网站推广2023,wordpress首页等待画面最近看到美团、新浪、去哪儿多家互联网企业启动鸿蒙原生应用开发#xff0c;这个HarmonyOS NEXT越来越引人关注。奈何当前不面向个人开发者开放#xff0c;但是我们可以尝试下鸿蒙新的应用形态——元服务的开发。 元服务是基于HarmonyOS提供的一种面向未来的服务提供方式这个HarmonyOS NEXT越来越引人关注。奈何当前不面向个人开发者开放但是我们可以尝试下鸿蒙新的应用形态——元服务的开发。 元服务是基于HarmonyOS提供的一种面向未来的服务提供方式有独立入口、免安装以万能卡片等多种呈现形态可提供一个或多个便捷、轻量化服务。在本文中我将详细介绍元服务、ArkTS 语言开发以及 DevEco Studio 开发工具的端云一体化开发和低代码开发等方面并且带大家亲自实战元服务开发-在线答题项目深度体验学习
在线答题元服务主要功能
接入AGC认证服务以实现用户登录展示个人账户信息在线答题以及积分排行等功能。用户可以在应用中进行知识练习上传自定义题目以丰富题库内容。利用华为云服务实现用户答题展示成绩和排名增加用户对学习的兴趣。使用云数据库存储题目实现卡片的刷新和页面跳转等功能。
项目运行演示视频 一元服务核心内容
本文着重介绍元服务元服务轻量化、信息外显的特性由基础知识学习到项目实战逐步深入的带大家学习最后使用元服务技术开发一套高性能高可用性的在线答题元服务。
1.1 元服务
HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。运行在HarmonyOS的应用分为两种形态
传统方式的需要安装的应用即传统概念中的HarmonyOS应用可简称应用。提供特定功能、免安装的应用即元服务原名为原子化服务。
本文则主要使用元服务形态进行介绍及其开发实战。
1.1.1元服务的呈现形态
鸿蒙万能卡片是元服务的主要展现形式之一其他形式包括语音和图标等。每个万能卡片都是一种始终可见的元服务或应用将重要信息以卡片的形式展示在桌面上通过轻量交互实现服务的便捷访问。
1.1.2 元服务的特点
① 免安装更轻量化地将服务带给用户 ② 一键服务直达将用户感兴趣的内容前置、外显 ③ 跨端转移多终端设备间无缝流转 ④ 情景智能卡片推荐随心定制、更懂用户
1.2 ArkTS语言
ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript简称TS基本语法风格的基础上对TS的动态类型特性施加更严格的约束引入静态类型。同时提供了声明式UI、状态管理等相应的能力让开发者可以以更简洁、更自然的方式开发高性能应用。
1.2.1 ArkTS语言特点
ArkTS语言通过不断的迭代升级有了许多更新和改进一年前我第一次接触这个技术发现很多地方都不完善相比其他语言TSJS相比有很多不足。但是经过一年的迭代更新其功能现在已经十分完善且强大。让开发者能够更高效地编写和开发应用程序。 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 ControlUI控件栏可以将相应的组件选中并拖动到画布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.phoneString(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[] datiState 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.endefalse;} else {this.endetrue;console.info(------点击了网络请求)extraData: {prapoints: this.selectedscore,userid:3,Numberquestions:this.questions.length},connectTimeout: 60000, // 可选默认为60sreadTimeout: 60000, // 可选默认为60s}, (err, data) {if (!err) {// data.result为http响应内容可根据业务需要进行解析// ts-ignoreconst 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.endefalse;} else {this.endetrue;}
}.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项目总结
在本文中我们介绍了一个关于在线答题应用的项目其中包括项目结构和开发计划。以下是本文的主要要点 项目结构
项目主要分为主应用的Abilityentryability、卡片的AbilityEntnyformability、从云数据库导出的数据类型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
