【精华+1】HarmonyOS官方模板优秀案例(第3期:教育行业 · 教育备考)
为支持开发者单独获取特定场景的页面和功能,本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块,不依赖公共基础能力包,开发者可以单独集成,开箱即用,降低使用难度。基于以上行业分析,本期将介绍鸿蒙生态市场教育行业模板——教育备考应用模板,为行业提供常用功能的开发案例,模板主要分练习、课程和我的三大模块。行业组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块,支持开发者在开发中单独集成使用,
鸿蒙生态为开发者提供海量的HarmonyOS模板/组件,助力开发效率原地起飞
一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板
第三期-教育行业的案例加急发布啦!
覆盖20+行业,本帖以汇总形式持续更新中,点击收藏!一键三连!常看常新!
【第3期】教育行业 · 教育备考
一、概述
1.行业洞察
1)行业诉求:
- 精准分发:面对不同的受众教育类应用有不同的业务场景,产出适配内容、精准题库等,并以高效且契合场景的方式进行分发,最终实现优质教育资源的有效传递。
- 高效流畅、操作敏捷是教育类应用不同场景重要诉求,在线学习、考试等场景出现卡顿会严重影响学习、考试的。
- 需具备智能刷题与精准辅导能力:基于大数据和算法,依据答题情况判断用户知识掌握状况,动态调整出题难度,推送契合的学习内容。
- 多端协同能力:实现手机、平板、PC 端数据实时互通,提供离线功能,便于用户利用碎片化时间用于刷题或知识点复习,并可在线后同步学习进度。
2)行业常用三方SDK
分类 |
三方库名称 |
功能 |
SDK链接 |
第三方登录类 |
创蓝闪验SDK、阿里一键登录SDK、中国移动号码认证服务、中国联通号码认证服务、中国电信号码认证服务 |
一键登录和验证用户手机号码与本机流量卡是否一致的服务 |
|
数据分析 |
com.umeng(友盟)SDK、百度统计SDK、com.efs SDK、GrowingIO SDK、阿里云数据分析 |
移动统计 |
|
浏览引擎 |
腾讯X5浏览内核SDK |
用于展现html页面 |
|
文档浏览 |
com.tencent.tbs(腾讯浏览服务)SDK、福昕SDK |
本地文档浏览 |
|
第三方应用开发支持 |
微信开放SDK |
支持微信授权登录、微信分享和微信支付以及ApplePay支付 |
|
三方支付 |
阿里支付 SDK、微信支付SDK、京东支付SDK、招商支付SDK |
支持支付宝支付 |
|
应用维护 |
阿里云热修复SDK、Logan、腾讯Bugly SDK |
线上问题修复、日志分析、提高服务稳定性,服务崩溃后快速定位问题 |
|
应用安全 |
阿里云HttpDNS SDK、网易易盾SDK、数盟、同盾业务安全 SDK、阿里APP防护 SDK |
防止域名劫持、提升应用安全;登录验证码 ;检测是否为风险设备;提供应用安全防护 |
|
地图 |
高德定位 SDK、百度地图SDK |
实现定位 |
|
推送 |
极光推送SDK、腾讯Push SDK、七陌Push SDK |
推送消息 |
|
互动小游戏 |
org.cocos2dx.lib(Cocos) SDK |
互动题目引擎 |
|
分享 |
腾讯QQ分享 SDK、QQ分享、小红书分享、抖音分享 |
动态分享 |
|
图片识别 |
科大讯飞SDK、随时问SDK、人教点读SDK |
文字转语音、图片识别、点读 |
|
APP投屏 |
乐播SDK |
APP投屏 |
|
音视频 |
火山引擎SDK、声网SDK、即构SDK、声通语音SDK |
在线直播、观看录播视频、语音识别 |
|
课堂管理 |
腾讯云课堂SDK |
课程列表、课程详情、在线直播、互动白板、聊天室等功能 |
说明:“以上三方库及链接仅为示例,三方库由三方开发者独立提供,以其官方内容为准”
2.行业案例概览(下载模板)
基于以上行业分析,本期将介绍鸿蒙生态市场教育行业模板——教育备考应用模板,为行业提供常用功能的开发案例,模板主要分练习、课程和我的三大模块。
- Stage开发模型 + 声明式UI开发范式。
- 分层架构设计 + 组件化拆分,支持开发者在开发时既可以选择完整使用模板,也可以根据需求单独选用其中的业务组件。
- 本模板已集成华为账号服务,只需做少量配置和定制即可快速实现华为账号的登录等功能。
本模板主要页面及核心功能如下所示:
题库模板
|-- 开屏页
|-- 练习
| |-- banner
| |-- 搜索
| └-- 答题练习
|-- 课程
| |-- 分类列表
| |-- 精选课程
| | |-- 课程详情
| | └-- 支付购买
| └-- 已购我的课程
| |-- 练习模式
| |-- 考试模式
| |-- 错题记录
| └-- 收藏记录
| └-- 笔记记录
└-- 我的
|-- 用户信息
| |-- 登录
| |-- 用户信息
|-- 我的订单
|-- 我的错题
|-- 我的收藏
|-- 练习记录
|-- 浏览记录
└-- 设置
|-- 个人信息
|-- 意见反馈
|-- 反馈记录
|-- 隐私协议
|-- 清除缓存
└-- 退出登录
二、应用架构设计
1.分层模块化设计
- 产品定制层:专注于满足不同设备或使用场景的个性化需求,作为应用的入口,是用户直接互动的界面。
本实践暂时只支持直板机,为单HAP包形式,包含路由根节点、底部导航栏等。
- 基础特性层:用于存放相对独立的功能UI和业务逻辑实现。
本实践的基础特性层将应用功能拆分成6个相对独立的业务功能模块。
每个功能模块都具备高内聚、低耦合、可定制的特点,支持产品的灵活部署。
- 公共能力层:存放公共能力,包括公共UI组件、数据管理、外部交互和工具库等共享功能。
本实践的公共能力层分为公共基础能力和行业组件,均打包为HAR包被基础特性层的业务模块引用。
公共基础能力包含账号管理、动态布局等工具,公共类型定义,网络库,以及弹窗、加载等公共组件。
行业组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块,支持开发者在开发中单独集成使用,详见业务组件设计章节。
2.业务组件设计
为支持开发者单独获取特定场景的页面和功能,本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块,不依赖公共基础能力包,开发者可以单独集成,开箱即用,降低使用难度。
三、行业场景技术方案
1.一键搜题
1)场景说明
用户可在首页-搜题进入一键搜题页面,可输入、语音输入,拍照识别,粘贴和清除功能。
2)技术方案
- 语音输入
根据语音识别可实现功能。
- 拍照识别
根据拍照可实现拍照功能,
图片获取后参考recognizeText获取具体结果。
3)代码参考
- 部分核心代码参见搜题组件实现章节。
2.多级分栏
1)场景说明
- 用户可通过首页右上角的按钮拉起多级选择界面,可进行多级别职称的选择。
2)技术方案
采用左右两个List做为基础组件来实现业务,三级、多级目录采用数据源刷新特性实现具体业务。
3.答题
1)场景说明
用户可通过首页点击每日一练可进入答题练习页面,可添加笔记、收藏、答题等相关业务,答题这块只做了单选业务。
2)技术方案
- 核心是状态变量的使用@ObservedV2通过首选项记录相关操作业务。
四、模板代码
1.工程结构(下载模板)
详细代码结构如下所示:
Exam
├─commons/commonLib/src/main
│ ├─ets
│ │ ├─components
│ │ │ CommonHeader.ets // 一级页面标题组件
│ │ │ TopBar.ets // 标题菜单内容组件
│ │ ├─utils
│ │ │ Logger.ets // 日志
│ │ │ PreferenceUtil.ets // 首选项
│ │ ├─viewModel
│ │ │ BrowsingHistoryModel.ets // 记录模块数据模型
│ │ │ OrderInfo.ets // 订单数据模型
│ │ │ PracticeRecordModel.ets // 练习数据模型
│ └─resources
├─commons/router_module/src/main
│ ├─ets
│ │ ├─routerModule
│ │ │ │ RouterModule.ets // 路由
│ │ │ │ ├─constants
│ │ │ │ │ │ RouterMap.ets // 路由Key
│ └─resources
│─components/aggregated_payment/src/main
│ ├─ets
│ │ ├─common
│ │ │ Constant.ets // 常量类
│ │ ├─components
│ │ │ AggregatedPaymentPicker.ets // 支付组件
│ │ ├─model
│ │ │ Index.ets // 数据类型
│ │ │ WXApiWrap.ets // 微信支付数据类型
│ │ └─viewmodel
│ │ AggregatedPaymentVM.ets // 支付组件数据模型
│ └─resources
│─components/answer_questions/src/main
│ ├─ets
│ │ ├─components
│ │ │ AnswerQuestionsPage.ets // 答题组件
│ │ │ AddNotePage.ets // 添加笔记组件
│ │ │ AnswerSheetPage.ets // 答题卡组件
│ │ ├─dialog
│ │ │ AddNoteDialog.ets // 添加笔记弹框
│ │ │ AnswerSheetDialog.ets // 答题卡弹框
│ │ └─viewModel
│ │ TopicItemModel.ets // 答题选项模型
│ │ TopicPageModel.ets // 答题模型
│ └─resources
│─components/feed_back/src/main
│ ├─ets
│ │ ├─components
│ │ │ Feedback.ets // 意见反馈功能组件
│ │ ├─model
│ │ │ FeedbackRecordModel.ets // 数据类型
│ │ ├─utils
│ │ │ FileSelect.ets // 意见反馈功工具类
│ └─resources
│─components/select_category/src/main
│ ├─ets
│ │ ├─components
│ │ │ MainPage.ets // 二级分类组件
│ │ │ ThirdcatePage.ets // 三级分类组件
│ │ ├─model
│ │ │ SelectCateModel.ets // 数据类型
│ └─resources
│─components/login_info/src/main
│ ├─ets
│ │ ├─components
│ │ │ AgreementDialog.ets // 同意协议弹窗组件
│ │ │ QuickLogin.ets // 一键登录组件
│ │ ├─model
│ │ │ ErrorCode.ets // 错误码类型
│ │ │ UserInfo.ets // 用户类型
│ │ └─utils
│ │ AccountUtil.ets // 账户工具类
│ └─resources
│─components/search/src/main
│ ├─ets
│ │ ├─components
│ │ │ SearchPage.ets // 搜索组件
│ └─resources
│─components/search_question/src/main
│ ├─ets
│ │ ├─components
│ │ │ SearchQuestionPage.ets // 一键搜题组件
│ └─resources
│─components/base_select/src/main
│ ├─ets
│ │ ├─components
│ │ │ MainPage.ets // 基础通用组件
│ │ ├─model
│ │ │ SelectModel.ets // 选项数据模型
│ └─resources
│─features/homePage/src/main
│ ├─ets
│ │ ├─components // 封装组件
│ │ │ CourseBookComponent.ets // 资料卡片组件
│ │ │ CourseComponent.ets // 课程卡片
│ │ ├─model
│ │ │ ChapterPractice.ets // 分类页面数据模型
│ │ │ CommonTopic.ets // 分类数据模型
│ │ │ Course.ets // 课程数据模型
│ │ │ CourseArray.ets // 课程数组模型
│ │ │ CourseBook.ets // 资料模型
│ │ │ CourseQuestions.ets // 科目数据模型
│ │ │ PracticeMode.ets // 业务类型数据模型
│ │ │ TopicItemModel.ets // 答题类型数据模型
│ │ │ TopicModel.ets // 分类数据源
│ │ ├─pages
│ │ │ ChapterPractice.ets // 科目页面
│ │ │ FeaturedCourses.ets // 精选课程页面
│ │ │ MainPage.ets // 练习首页面
│ │ │ MaterialDownload.ets // 资料页面
│ │ │ SearchIndexPage.ets // 搜索页面
│ │ │ SearchInputPage.ets // 搜索输入框页面
│ │ │ SecondListPage.ets // 2级分类
│ │ │ ThirdListPage.ets // 3级分类
│ │ │ TopicHomePage.ets // 1级分类
│ │
│ └─resources
│─features/topicPage/src/main
│ ├─ets
│ │ ├─views
│ │ │ AnswerQuestionsPage.ets // 答题模式一页面
│ │ │ AnswerQuestionsTwoPage.ets // 答题模式二页面
│ │ │ CourseHomePage.ets // 课程页面
│ │ │ CourseIntroductionPage.ets // 课程详情页面
│ │ │ ExamResultPage.ets // 答题结果页面
│ │ │ GoodCourseDetailPage.ets // 精选课程页面
│ │ │ MockTestPage.ets // 科目练习页面
│ │ │ MyCollectionPage.ets // 收藏页面
│ │ │ MyNotesPage.ets // 笔记页面
│ │ │ MyWrongPage.ets // 错题页面
│ │ │ TestReportPage.ets // 测试报告页面
│ │ │ ViewNotePage.ets // 笔记组件
│ │ └─viewModel
│ │ │ CourseHomeModel.ets // 课程页面数据模型
│ │ │ PracticeMode.ets // 科目数据模型
│ │ │ SecondListModel.ets // 选项类型数据模型
│─features/minePage/src/main
│ ├─ets
│ │ ├─components
│ │ │ Header.ets // Header组件
│ │ ├─viewModel // 数据类型
│ │ │ MessageModel.ets
│ │ │ setUpModel.ets // 设置相关模型数据模型
│ │ │ MineModel.ets // 用户资料信息数据模型
│ │ ├─views
│ │ │ AboutPage.ets // 关于页面
│ │ │ AuthenticationPage.ets // 用户认证协议页面
│ │ │ BrowsingHistoryPage.ets // 浏览页面
│ │ │ CollectionPage.ets // 课程收藏页面
│ │ │ CoursePage.ets // 课程精选页面
│ │ │ EditPersonalCenterPage.ets // 个人信息详情页面
│ │ │ FeedbackPage.ets // 意见反馈页面
│ │ │ FeedbackRecordPage.ets // 反馈记录页面
│ │ │ MessageCenterPage.ets // 消息页面
│ │ │ MinePage.ets // 我的页面
│ │ │ MyOrderPage.ets // 订单首页页面
│ │ │ OneDayPracticeRecordsPage.ets // 单个练习记录页面
│ │ │ OrderDetailPage.ets // 订单详情页面
│ │ │ OrderListPage.ets // 订单页面
│ │ │ PracticeDetailsPage.ets // 反馈页面
│ │ │ PracticeRecordsPage.ets // 练习记录页面
│ │ │ PrivacyAgreementPage.ets // 同意
│ │ │ PrivacyPage.ets // 协议
│ │ │ PrivacyStatementPage.ets // 隐私页面
│ │ │ SetupPage.ets // 设置页面
│ │ │ TermsOfServicePage.ets // 用户服务页面
└─products/entry/src/main
├─ets
│ ├─entryability
│ │ EntryAbility.ets // 应用程序入口
│ ├─entrybackupability
│ │ EntryBackupAbility.ets // Backup配置入口
│ ├─pages
│ │ Index.ets // 入口页面
│ │ LoginPage.ets // login页面
│ ├─model
│ │ TabListItem.ets // 数据声明
│ ├─viewmodels
│ │ MainVM.ets // 页面数据模型
│ ├─common // 常量及Tab数据源
│ TabConstants.ets
└─resources
2.关键代码解读
本篇代码非应用的全量代码,只包括应用的部分能力的关键代码。
若需获取全量代码,请查看模板集成章节。
1)一键搜题
// 语音识别
// 请求权限后创建服务并监听
this.atManager.requestPermissionsFromUser(this.context, ['ohos.permission.MICROPHONE'])
.then(async (data) => {
if (data.authResults[0] === 0) {
await this.createSREngine()
this.startListener()
}
})
.catch(() => {
//在此处进行异常处理
});
async createSREngine() {
const extraParams: Record<string, Object> = {
'locate': 'CN',
'recognizerMode': 'short'
}
const initParamsInfo: speechRecognizer.CreateEngineParams = {
language: 'zh-CN',
online: 1,
extraParams
}
try {
this.asrEngine = await speechRecognizer.createEngine(initParamsInfo)
this.setListener()
} catch (e) {
//在此处进行异常处理
}
}
startListener() {
const audioParam: speechRecognizer.AudioInfo = {
audioType: 'pcm',
sampleRate: 16000,
soundChannel: 1,
sampleBit: 16
};
const extraParam: Record<string, Object> = { 'maxAudioDuration': 40000, 'recognitionMode': 0 };
this.sessionId = new Date().getTime().toString()
const recognizerParams: speechRecognizer.StartParams = {
sessionId: this.sessionId,
audioInfo: audioParam,
extraParams: extraParam
};
this.asrEngine?.startListening(recognizerParams)
}
setListener() {
let that = this
// 创建回调对象
let setListener: speechRecognizer.RecognitionListener = {
// 开始识别成功回调
onStart() {
},
// 事件回调
onEvent() {
},
// 识别结果回调,包括中间结果和最终结果
onResult(_sessionId: string, result: speechRecognizer.SpeechRecognitionResult) {
that.textInput = that.textInputPre + result.result
},
// 识别完成回调
onComplete() {
that.textInputPre = that.textInput
},
// 错误回调,错误码通过本方法返回
// 返回错误码1002200002,开始识别失败,重复启动startListening方法时触发
// 更多错误码请参考错误码参考
onError() {
},
}
// 设置回调
this.asrEngine?.setListener(setListener);
};
// 拍照识别
async startCameraPicker() {
let pickerProfile: picker.PickerProfile = {
cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK,
};
let result: picker.PickerResult =
await picker.pick(getContext(), [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO],
pickerProfile);
let uri = result.resultUri;
let imageSource: image.ImageSource;
let chooseImage: PixelMap;
setTimeout(async () => {
let fileSource = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY);
imageSource = image.createImageSource(fileSource.fd);
chooseImage = await imageSource.createPixelMap();
if (!chooseImage) {
return;
}
// 获取图片后调用文本识别接口
let visionInfo: textRecognition.VisionInfo = {
pixelMap: chooseImage
};
let textConfiguration: textRecognition.TextRecognitionConfiguration = {
isDirectionDetectionSupported: true
};
await textRecognition.recognizeText(visionInfo, textConfiguration).then((textRecognitionResult) => {
if (textRecognitionResult.value !== '') {
this.search(textRecognitionResult.value)
}
})
}, 100)
}
2)系统路由封装及使用
// 1、定义路由工具类
import { RouterMap } from './constants/RouterMap';
export default interface NavRouterInfo {
url: string; // 跳转路由名
mode?: NavDestinationMode; // NavDestination类型
param?: Object; // 传递参数
onPop?: Callback<PopInfo>; // 回调事件
}
class RouterModule {
public static stack: NavPathStack = new NavPathStack();
static builderMap: Map<string, WrappedBuilder<[object]>> = new Map<string, WrappedBuilder<[object]>>();
// 页面跳转(指定页面)
public static push(info: NavRouterInfo, animated?: boolean) {
try {
RouterModule.stack.pushPathByName(info.url, info.param, info.onPop, animated);
} catch (err) {
}
}
// 页面替换(指定页面)
public static replace(info: NavRouterInfo) {
try {
RouterModule.stack.replacePathByName(info.url, info.param);
} catch (err) {
}
}
// 页面回退(上个页面)
public static pop<T = boolean>(result?: T, animated?: boolean) {
try {
RouterModule.stack.pop(result, animated);
} catch (err) {
}
}
// 页面回退(携带参数)
public static popWithRes(res: ESObject, animated?: boolean) {
try {
RouterModule.stack.pop(res, animated);
} catch (err) {
}
}
// 页面回退(至对应页面名)
public static popToName(name: string, animated?: boolean) {
try {
RouterModule.stack.popToName(name, animated);
} catch (err) {
}
}
// 页面栈清空(回Navigation)
public static clear(animated?: boolean) {
try {
RouterModule.stack.clear(animated);
} catch (err) {
}
}
// 获取页面栈大小
public static size(): number {
return RouterModule.stack.size();
}
// 获取参数(指定页面)
public static getNavParam<T = Object>(info: NavRouterInfo): T | undefined {
try {
const paramsArr = RouterModule.stack.getParamByName(info.url) as T[] | undefined[];
return paramsArr.pop();
} catch (err) {
}
return undefined;
}
// 获取页面名(页面栈前一个)
public static getSourcePage(): string | undefined {
const pathNames = RouterModule.stack.getAllPathName();
pathNames.pop();
return pathNames.pop();
}
}
export { RouterModule, RouterMap };
// 2、定义RouterMap 注册路由表时用
export enum RouterMap {
// 主页
MAIN_PAGE = 'MainPage',
}
// 3、注册路由表
export class RouterTable {
static builderMap: Map<string, WrappedBuilder<[object]>> = new Map<string, WrappedBuilder<[object]>>();
// 初始化路由表
public static routerInit() {
RouterTable.builderMap.set(RouterMap.MAIN_PAGE, wrapBuilder(MainPageBuilder));
}
// 通过名称获取builder
public static getBuilder(builderName: string): WrappedBuilder<[]> {
let builder = RouterTable.builderMap.get(builderName);
return builder as WrappedBuilder<[]>;
}
}
4、使用前需先init注册
// 初始化路由表
RouterTable.routerInit()
// 创建导航Navigation
@Builder
pageMap(name: string) {
NavDestination() {
RouterTable.getBuilder(name).builder()
}
.mode(NavDestinationMode.STANDARD)
.hideTitleBar(true)
.onBackPressed(() => {
return this.backPress(name)
})
}
build() {
Column() {
Navigation(RouterModule.stack) {
}
.hideNavBar(true)
.hideToolBar(true)
.hideTitleBar(true)
.hideBackButton(true)
.mode(NavigationMode.Stack)
.navDestination(this.pageMap)
}
}
3.模板集成
本模板提供了两种代码集成方式,供开发者自由选用。
1)整体集成(下载模板)
开发者可以选择直接基于模板工程开发自己的应用工程。
- 模板代码获取:
通过IDE插件创建模板工程,开发指导。
通过生态市场下载源码, 下载模板。
通过开源仓访问源码,仓库地址。
- 打开模板工程,根据README说明中的快速入门章节,将自己的应用信息配置在模板工程内,即可运行并查看模板效果。
根据自己的业务内容修改模板,进行定制化开发。
2)按需集成
若开发者已搭建好自己的应用工程,但暂未实现其中的部分场景能力,可以选择取用其中的业务组件,集成在自己的工程中。
- 组件代码获取:
通过IDE插件下载组件源码。开发指导
通过生态市场下载组件源码。 下载地址
- 下载组件源码,根据README中的说明,将组件包配置在自己的工程中。
- 根据API参考和示例代码,将组件集成在自己的对应场景中。
以上是第三期“教育行业-教育备考”行业优秀案例的内容,更多行业敬请期待~
欢迎下载使用行业模板“点击下载”,若您有体验和开发问题,或者迫不及待想了解XX行业的优秀案例,欢迎在评论区留言,小编会快马加鞭为您解答~
同时诚邀您添加下方二维码加入“组件模板活动社群”,精彩上新&活动不错过!
期数 |
帖子 |
链接 |
第1期 |
HarmonyOS官方模板优秀案例 | 便捷生活行业 · 购物中心 |
|
第2期 |
HarmonyOS官方模板优秀案例 | 新闻行业 · 综合新闻 |
|
第3期 |
HarmonyOS官方模板优秀案例 | 教育行业 · 教育备考 |
|
第4期 |
HarmonyOS官方模板优秀案例 | 餐饮行业 · 美食菜谱 |
马上发布 |
第5期 |
HarmonyOS官方模板优秀案例 | 工具行业 · 日历应用 |
马上发布 |
第6期 |
小编加急整理中,敬请期待 |
HarmonyOS组件模板相关推荐
更多推荐
所有评论(0)