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

​​腾讯浏览服务​​​​SDK​​​

​​高德定位​​​​SDK​​​

​​百度地图​​​​SDK ​​​

​​极光​​​​Push SDK​​​

​​火山引擎​​​​SDK​​​

​​同盾​​​​SDK​​​

​​友盟​​​​SDK​​​

​​微信支付​​​​SDK​​​

​​支付宝​​​​SDK​​​

​​听云​​​​SDK​​​

​​福昕​​​​ PDF SDK​​​

​​网易云信​​​​ IM SDK​​​

​​保利威视频直播​​​​webSDK​​​

​​支付宝分享​​​​SDK​​​

题库模板

|-- 开屏页

|-- 练习

| |-- banner

| |-- 搜索

| └-- 答题练习

|-- 课程

| |-- 分类列表

| |-- 精选课程

| | |-- 课程详情

| | └-- 支付购买

| └-- 已购我的课程

| |-- 练习模式

| |-- 考试模式

| |-- 错题记录

| └-- 收藏记录

| └-- 笔记记录

└-- 我的

|-- 用户信息

| |-- 登录

| |-- 用户信息

|-- 我的订单

|-- 我的错题

|-- 我的收藏

|-- 练习记录

|-- 浏览记录

└-- 设置

|-- 个人信息

|-- 意见反馈

|-- 反馈记录

|-- 隐私协议

|-- 清除缓存

└-- 退出登录

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

// 语音识别

// 请求权限后创建服务并监听

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)

}

// 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)

}

}