【精华+1】HarmonyOS官方模板优秀案例（第3期：教育行业 · 教育备考）

小子期 發表於 2025-8-20 15:39:00

【精华+1】HarmonyOS官方模板优秀案例（第3期：教育行业 · 教育备考）

💡 鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发效率原地起飞 💡
★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★
<h3 style="text-align: center">前两期案例介绍了便捷生活、新闻行业，大家是不是意犹未尽？</h3>
<h3 style="text-align: center">第三期-教育行业的案例加急发布啦！</h3>
👉 覆盖20+行业，本帖以汇总形式持续更新中，点击收藏！一键三连！常看常新！
<h1 style="text-align: center">【第3期】教育行业 · 教育备考</h1>
<h1>一、概述</h1>
<h2>1. 行业洞察</h2>
<h3>1）行业诉求：</h3>
<ul>
<li>精准分发：面对不同的受众教育类应用有不同的业务场景，产出适配内容、精准题库等，并以高效且契合场景的方式进行分发，最终实现优质教育资源的有效传递。</li>
<li>高效流畅、操作敏捷是教育类应用不同场景重要诉求，在线学习、考试等场景出现卡顿会严重影响学习、考试的。</li>
<li>需具备智能刷题与精准辅导能力：基于大数据和算法，依据答题情况判断用户知识掌握状况，动态调整出题难度，推送契合的学习内容。</li>
<li>多端协同能力：实现手机、平板、PC 端数据实时互通，提供离线功能，便于用户利用碎片化时间用于刷题或知识点复习，并可在线后同步学习进度。</li>
</ul>
<h3>2）行业常用三方SDK</h3>
<table style="width: 100%; height: 973px">
<tbody>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
分类
</td>
<td style="width: 46.359361%; height: 49px">
三方库名称
</td>
<td style="width: 29.800827%; height: 49px">
功能
</td>
<td style="width: 10.311367%; height: 49px">
SDK链接
</td>
</tr>
<tr style="height: 70px">
<td style="width: 8.4443%; height: 70px">
第三方登录类
</td>
<td style="width: 46.359361%; height: 70px">
创蓝闪验SDK、阿里一键登录SDK、中国移动号码认证服务、中国联通号码认证服务、中国电信号码认证服务
</td>
<td style="width: 29.800827%; height: 70px">
一键登录和验证用户手机号码与本机流量卡是否一致的服务
</td>
<td style="width: 10.311367%; height: 924px" rowspan="16">
腾讯浏览服务SDK
高德定位SDK
百度地图SDK 
极光Push SDK
火山引擎SDK
同盾SDK
友盟SDK
微信支付SDK
支付宝SDK
听云SDK
福昕 PDF SDK
网易云信 IM SDK
保利威视频直播webSDK
支付宝分享SDK
</td>
</tr>
<tr style="height: 70px">
<td style="width: 8.4443%; height: 70px">
数据分析
</td>
<td style="width: 46.359361%; height: 70px">
com.umeng(友盟）SDK、百度统计SDK、com.efs SDK、GrowingIO SDK、阿里云数据分析
</td>
<td style="width: 29.800827%; height: 70px">
移动统计
</td>
</tr>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
浏览引擎
</td>
<td style="width: 46.359361%; height: 49px">
腾讯X5浏览内核SDK
</td>
<td style="width: 29.800827%; height: 49px">
用于展现html页面
</td>
</tr>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
文档浏览
</td>
<td style="width: 46.359361%; height: 49px">
com.tencent.tbs（腾讯浏览服务）SDK、福昕SDK
</td>
<td style="width: 29.800827%; height: 49px">
本地文档浏览
</td>
</tr>
<tr style="height: 70px">
<td style="width: 8.4443%; height: 70px">
第三方应用开发支持
</td>
<td style="width: 46.359361%; height: 70px">
微信开放SDK
</td>
<td style="width: 29.800827%; height: 70px">
支持微信授权登录、微信分享和微信支付以及ApplePay支付
</td>
</tr>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
三方支付
</td>
<td style="width: 46.359361%; height: 49px">
阿里支付 SDK、微信支付SDK、京东支付SDK、招商支付SDK
</td>
<td style="width: 29.800827%; height: 49px">
支持支付宝支付
</td>
</tr>
<tr style="height: 70px">
<td style="width: 8.4443%; height: 70px">
应用维护
</td>
<td style="width: 46.359361%; height: 70px">
阿里云热修复SDK、Logan、腾讯Bugly SDK
</td>
<td style="width: 29.800827%; height: 70px">
线上问题修复、日志分析、提高服务稳定性，服务崩溃后快速定位问题
</td>
</tr>
<tr style="height: 84px">
<td style="width: 8.4443%; height: 84px">
应用安全
</td>
<td style="width: 46.359361%; height: 84px">
阿里云HttpDNS SDK、网易易盾SDK、数盟、同盾业务安全 SDK、阿里APP防护 SDK
</td>
<td style="width: 29.800827%; height: 84px">
防止域名劫持、提升应用安全；登录验证码
；检测是否为风险设备；提供应用安全防护
</td>
</tr>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
地图
</td>
<td style="width: 46.359361%; height: 49px">
高德定位 SDK、百度地图SDK
</td>
<td style="width: 29.800827%; height: 49px">
实现定位
</td>
</tr>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
推送
</td>
<td style="width: 46.359361%; height: 49px">
极光推送SDK、腾讯Push SDK、七陌Push SDK
</td>
<td style="width: 29.800827%; height: 49px">
推送消息
</td>
</tr>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
互动小游戏
</td>
<td style="width: 46.359361%; height: 49px">
org.cocos2dx.lib(Cocos) SDK
</td>
<td style="width: 29.800827%; height: 49px">
互动题目引擎
</td>
</tr>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
分享
</td>
<td style="width: 46.359361%; height: 49px">
腾讯QQ分享 SDK、QQ分享、小红书分享、抖音分享
</td>
<td style="width: 29.800827%; height: 49px">
动态分享
</td>
</tr>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
图片识别
</td>
<td style="width: 46.359361%; height: 49px">
科大讯飞SDK、随时问SDK、人教点读SDK
</td>
<td style="width: 29.800827%; height: 49px">
文字转语音、图片识别、点读
</td>
</tr>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
APP投屏
</td>
<td style="width: 46.359361%; height: 49px">
乐播SDK
</td>
<td style="width: 29.800827%; height: 49px">
APP投屏
</td>
</tr>
<tr style="height: 49px">
<td style="width: 8.4443%; height: 49px">
音视频
</td>
<td style="width: 46.359361%; height: 49px">
火山引擎SDK、声网SDK、即构SDK、声通语音SDK
</td>
<td style="width: 29.800827%; height: 49px">
在线直播、观看录播视频、语音识别
</td>
</tr>
<tr style="height: 70px">
<td style="width: 8.4443%; height: 70px">
课堂管理
</td>
<td style="width: 46.359361%; height: 70px">
腾讯云课堂SDK
</td>
<td style="width: 29.800827%; height: 70px">
课程列表、课程详情、在线直播、互动白板、聊天室等功能
</td>
</tr>
</tbody>
</table>
说明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”
<h2>2. 行业案例概览（下载模板）</h2>
基于以上行业分析，本期将介绍鸿蒙生态市场教育行业模板——教育备考应用模板，为行业提供常用功能的开发案例，模板主要分练习、课程和我的三大模块。
<ul>
<li>Stage开发模型 + 声明式UI开发范式。</li>
<li>分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件。</li>
<li>本模板已集成华为账号服务，只需做少量配置和定制即可快速实现华为账号的登录等功能。</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/3637060/202508/3637060-20250820110840621-1929125380.png">
本模板主要页面及核心功能如下所示：
<pre class="language-armasm highlighter-hljs"><code>题库模板

|-- 开屏页

|-- 练习

| |-- banner

| |-- 搜索

| └-- 答题练习

|-- 课程

| |-- 分类列表

| |-- 精选课程

| | |-- 课程详情

| | └-- 支付购买

| └-- 已购我的课程

| |-- 练习模式

| |-- 考试模式

| |-- 错题记录

| └-- 收藏记录

| └-- 笔记记录

└-- 我的

|-- 用户信息

| |-- 登录

| |-- 用户信息

|-- 我的订单

|-- 我的错题

|-- 我的收藏

|-- 练习记录

|-- 浏览记录

└-- 设置

|-- 个人信息

|-- 意见反馈

|-- 反馈记录

|-- 隐私协议

|-- 清除缓存

└-- 退出登录</code></pre>
<h1>二、应用架构设计</h1>
<h2>1. 分层模块化设计</h2>
<ul>
<li>产品定制层：专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
<ul>
<li>本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。</li>
</ul>
</li>
<li>基础特性层：用于存放相对独立的功能UI和业务逻辑实现。
<ul>
<li>本实践的基础特性层将应用功能拆分成6个相对独立的业务功能模块。</li>
<li>每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。</li>
</ul>
</li>
<li>公共能力层：存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
<ul>
<li>本实践的公共能力层分为公共基础能力和行业组件，均打包为HAR包被基础特性层的业务模块引用。</li>
<li>公共基础能力包含账号管理、动态布局等工具，公共类型定义，网络库，以及弹窗、加载等公共组件。</li>
<li>行业组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。</li>
</ul>
</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/3637060/202508/3637060-20250820110840638-564894760.png" alt="http://image.huawei.com/tiny-lts/v1/images/hi3ms/edf690f19332784457ac85f9514db6d1_1226x503.png">
<h2>2. 业务组件设计</h2>
为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。
<img src="https://img2024.cnblogs.com/blog/3637060/202508/3637060-20250820110840551-1500916428.png" alt="http://image.huawei.com/tiny-lts/v1/images/hi3ms/0b4b99b97dd7af53b8f480b111944486_1160x399.png">
<h1>三、行业场景技术方案</h1>
<h2>1. 一键搜题</h2>
<h3>1）场景说明</h3>
用户可在首页-搜题进入一键搜题页面，可输入、语音输入，拍照识别，粘贴和清除功能。
<img src="https://img2024.cnblogs.com/blog/3637060/202508/3637060-20250820110840592-1342743112.png">
<h3>2）技术方案</h3>
<ul>
<li>语音输入
<ul>
<li>根据语音识别可实现功能。</li>
</ul>
</li>
<li>拍照识别
<ul>
<li>根据拍照可实现拍照功能，</li>
<li>图片获取后参考recognizeText获取具体结果。</li>
</ul>
</li>
</ul>
<h3>3）代码参考</h3>
<ul>
<li>部分核心代码参见搜题组件实现章节。</li>
</ul>
<h2>2. 多级分栏</h2>
<h3>1）场景说明</h3>
<ul>
<li>用户可通过首页右上角的按钮拉起多级选择界面，可进行多级别职称的选择。</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/3637060/202508/3637060-20250820110840620-838337492.png">
<h3>2）技术方案</h3>
采用左右两个List做为基础组件来实现业务，三级、多级目录采用数据源刷新特性实现具体业务。
<h2>3. 答题</h2>
<h3>1）场景说明</h3>
用户可通过首页点击每日一练可进入答题练习页面，可添加笔记、收藏、答题等相关业务，答题这块只做了单选业务。
<img src="https://img2024.cnblogs.com/blog/3637060/202508/3637060-20250820110840612-1461817787.png">
<h3>2）技术方案</h3>
<ul>
<li>核心是状态变量的使用@ObservedV2通过首选项记录相关操作业务。</li>
</ul>
<h1>四、模板代码</h1>
<h2>1. 工程结构（下载模板）</h2>
详细代码结构如下所示：
<pre class="language-armasm highlighter-hljs"><code>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</code></pre>
 
<h2>2. 关键代码解读</h2>
本篇代码非应用的全量代码，只包括应用的部分能力的关键代码。
若需获取全量代码，请查看模板集成章节。
<h3>1）一键搜题</h3>
<pre class="language-armasm highlighter-hljs"><code>// 语音识别
// 请求权限后创建服务并监听
this.atManager.requestPermissionsFromUser(this.context, ['ohos.permission.MICROPHONE'])
 .then(async (data) => {
 if (data.authResults === 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(), ,
 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)
}</code></pre>
<h3>2）系统路由封装及使用</h3>
<pre class="language-armasm highlighter-hljs"><code>
// 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<>> = new Map<string, WrappedBuilder<>>();

// 页面跳转(指定页面)
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<>> = new Map<string, WrappedBuilder<>>();

// 初始化路由表
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)
}
}</code></pre>
<h2>3. 模板集成</h2>
本模板提供了两种代码集成方式，供开发者自由选用。
<h3>1）整体集成（下载模板）</h3>
开发者可以选择直接基于模板工程开发自己的应用工程。
<ul>
<li>模板代码获取：
<ul>
<li>通过IDE插件创建模板工程，开发指导。</li>
<li>通过生态市场下载源码，下载模板。</li>
<li>通过开源仓访问源码，仓库地址。</li>
</ul>
</li>
<li>打开模板工程，根据README说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/3637060/202508/3637060-20250820110840585-1795006564.png">
根据自己的业务内容修改模板，进行定制化开发。
<h3>2）按需集成</h3>
若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。
<ul>
<li>组件代码获取：
<ul>
<li>通过IDE插件下载组件源码。开发指导</li>
<li>通过生态市场下载组件源码。下载地址</li>
</ul>
</li>
<li>下载组件源码，根据README中的说明，将组件包配置在自己的工程中。</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/3637060/202508/3637060-20250820110840567-176746592.png">
<ul>
<li>根据API参考和示例代码，将组件集成在自己的对应场景中。</li>
</ul>
以上是第三期“教育行业-教育备考”行业优秀案例的内容，更多行业敬请期待~
欢迎下载使用行业模板“点击下载”，若您有体验和开发问题，或者迫不及待想了解XX行业的优秀案例，欢迎在评论区留言，小编会快马加鞭为您解答~
同时诚邀您添加下方二维码加入“组件模板活动社群”，精彩上新&活动不错过！
<img src="https://img2024.cnblogs.com/blog/3637060/202508/3637060-20250820110840639-1633871754.png" width="600" style="display: block; margin-left: auto; margin-right: auto">
👉 本系列持续更新，欢迎点击帖子末尾左下角“<img src="https://img2024.cnblogs.com/blog/3637060/202508/3637060-20250820110840532-1499024617.png" width="30">”收藏本帖！
<table style="border-collapse: collapse; width: 80%">
<tbody>
<tr>
<td style="width: 12.593735%; text-align: center">
期数
</td>
<td style="width: 66.827235%; text-align: center">
帖子
</td>
<td style="width: 20.534711%; text-align: center">
链接
</td>
</tr>
<tr>
<td style="width: 12.593735%; text-align: center">
第1期
</td>
<td style="width: 66.827235%; text-align: center">
HarmonyOS官方模板优秀案例 | 便捷生活行业 · 购物中心
</td>
<td style="width: 20.534711%; text-align: center">
点击查看
</td>
</tr>
<tr>
<td style="width: 12.593735%; text-align: center">
第2期
</td>
<td style="width: 66.827235%; text-align: center">
HarmonyOS官方模板优秀案例 | 新闻行业 · 综合新闻
</td>
<td style="width: 20.534711%; text-align: center">
点击查看
</td>
</tr>
<tr>
<td style="width: 12.593735%; text-align: center">
第3期
</td>
<td style="width: 66.827235%; text-align: center">
HarmonyOS官方模板优秀案例 | 教育行业 · 教育备考
</td>
<td style="width: 20.534711%; text-align: center">
点击查看
</td>
</tr>
<tr>
<td style="width: 12.593735%; text-align: center">
第4期
</td>
<td style="width: 66.827235%; text-align: center">
HarmonyOS官方模板优秀案例 | 餐饮行业 · 美食菜谱
</td>
<td style="width: 20.534711%; text-align: center">
马上发布
</td>
</tr>
<tr>
<td style="width: 12.593735%; text-align: center">
第5期
</td>
<td style="width: 66.827235%; text-align: center">
HarmonyOS官方模板优秀案例 | 工具行业 · 日历应用
</td>
<td style="width: 20.534711%; text-align: center">
马上发布
</td>
</tr>
<tr>
<td style="width: 12.593735%; text-align: center">
第6期
</td>
<td style="width: 66.827235%; text-align: center">
小编加急整理中，敬请期待
</td>
<td style="width: 20.534711%; text-align: center"> </td>
</tr>
</tbody>
</table>
<h2>👉 HarmonyOS组件模板相关推荐</h2>
<ul>
<li>【活动ing】HarmonyOS组件/模板集成创新活动，报名时间截止2025年8月30日，点击查看</li>
<li>鸿蒙应用开发者激励计划2025，点击查看</li>
</ul> 
来源：https://www.cnblogs.com/HarmonyOS5/p/19048168

頁: [1]

琼殿技术论坛's Archiver

【精华+1】HarmonyOS官方模板优秀案例（第3期：教育行业 · 教育备考）