HarmonyOS鸿蒙NEXT开发案例：教育行业官方模板介绍（Part1：教育备考应用模板）

鸿蒙生态市场

💡摘要： 本模板来自华为生态市场（Huawei Partner Market），本文选取了教育行业的一个官方模板——教育备考应用模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！

一、概述

1. 行业洞察（待补充）

   1）行业痛点

2. 优秀案例概览

   基于以上行业分析，本期将介绍鸿蒙生态市场教育行业模板——教育备考应用模板，为行业提供常用功能的开发案例，模板主要分练习、课程和我的三大模块

   • Stage开发模型 + 声明式UI开发范式
   • 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件
   • 本模板已集成华为账号服务，只需做少量配置和定制即可快速实现华为账号的登录等功能

练习	课程	我的

本模板主要页面及核心功能如下所示：

题库模板
 |-- 开屏页
 |-- 练习
 |    |-- banner
 |    |-- 搜索
 |    └-- 答题练习
 |-- 课程
 |    |-- 分类列表
 |    |-- 精选课程
 |    |    |-- 课程详情
 |    |    └-- 支付购买
 |    └-- 已购我的课程
 |         |-- 练习模式
 |         |-- 考试模式
 |         |-- 错题记录
 |         └-- 收藏记录
 |         └-- 笔记记录
 └-- 我的
      |-- 用户信息
      |    |-- 登录
      |    |-- 用户信息
      |-- 我的订单
      |-- 我的错题
      |-- 我的收藏
      |-- 练习记录
      |-- 浏览记录
      └-- 设置
           |-- 个人信息
           |-- 意见反馈
           |-- 反馈记录
           |-- 隐私协议
           |-- 清除缓存
           └-- 退出登录

二、应用架构设计

1. 分层模块化设计

• **产品定制层：**专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。

  • 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。

• **基础特性层：**用于存放相对独立的功能UI和业务逻辑实现。

  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。

• **公共能力层：**存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。

  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
  • 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

本模板详细工程结构可见工程结构章节。

2. 业务组件设计

为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。

三、行业场景技术方案（待补充）

1. 账号管理

   1）场景说明

   2）技术方案

2. 答题练习

   1）场景说明

   2）技术方案

3. 精选课程

   1）场景说明

   2）技术方案

4. 我的错题

   1）场景说明

   2）技术方案

四、模板代码

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                     // 设置页面
  │  │  │