第1.6篇页面路由与生命周期——多页面应用导航难度⭐ 入门 |前置知识1.3 State 与状态管理涉及源文件products/default/src/main/ets/pages/Index.etsproducts/default/src/main/ets/pages/PhotoRecognitionPage.etsproducts/default/src/main/ets/pages/RecognitionWaitingPage.ets1. 引言一个完整的应用很少只有一个页面。在「画伴梦工厂」中用户从首页可以导航到拍照识别页、自由涂鸦页、AI 等待页、结果展示页等多个页面。这一篇我们就来学习 ArkUI 的页面路由与生命周期管理。2. ArkUI 页面生命周期ArkUI 为每个Component提供了生命周期的回调接口。理解这些回调在什么时候触发是避免内存泄漏、确保数据正确初始化的关键。2.1 核心生命周期方法方法触发时机用途aboutToAppear()组件即将显示时初始化数据、注册监听、启动定时器aboutToDisappear()组件即将销毁时清理资源、取消注册、停止定时器onPageShow()页面每次显示时刷新数据、恢复状态onPageHide()页面每次隐藏时暂停不需要的操作其中aboutToAppear和aboutToDisappear是最常用的两个方法。2.2 aboutToAppear初始化战场在Index.ets中aboutToAppear负责了多项初始化工作aboutToAppear(){// 1. 注册断点响应系统this.breakpointSystem.register(this.getUIContext());// 2. 注册碰一碰分享监听this.registerKnockShare();// 3. 刷新作品列表this.refreshWorks();// 4. 读取路由参数如果需要constparamsthis.getUIContext().getRouter().getParams()asIndexParams;if(paramsparams.tabworks){// 根据路由参数跳转到指定作品this.openWorkDetail(this.selectedWorkIndex);}// 5. 启动动画定时器if(this.animationTimer0){this.animationTimersetInterval((){if(this.isPlayingthis.secondaryPageSECONDARY_WORKS){this.animationFrame(this.animationFrame1)%8;}},650);}}要点aboutToAppear中可以做异步操作吗可以调用 async 方法但不会等它完成再渲染 UI。如果需要在 UI 显示前准备好数据推荐在aboutToAppear中同步赋值初始值异步数据通过State驱动 UI 更新。2.3 aboutToDisappear善后清理与初始化对应aboutToDisappear是清理的时机aboutToDisappear():void{// 1. 取消碰一碰分享监听this.unregisterKnockShare();// 2. 清除动画定时器if(this.animationTimer0){clearInterval(this.animationTimer);this.animationTimer-1;}// 3. 注销断点系统this.breakpointSystem.unregister();// 4. 销毁语音识别服务this.voiceRecognitionService.destroy();}最佳实践在aboutToDisappear中一定要清理所有setInterval、addEventListener等注册的资源否则组件被销毁后回调仍会执行造成内存泄漏和不可预期的错误。3. Router API页面导航ArkUI 通过getUIContext().getRouter()获取路由实例提供了pushUrl、back等方法进行页面导航。3.1 pushUrl正向导航导航到新页面并可携带参数// 导航到等待页面携带多个参数privatenavigateToGeneration(){this.getUIContext().getRouter().pushUrl({url:pages/RecognitionWaitingPage,params:{source:图片生成,workSource:photo,prompt:this.buildVideoPrompt(),imageUri:this.capturedImageUri,coverUri:this.capturedImageUri}});}不同创作模式导航到不同页面privateopenCreationFlow(index:number){this.selectCreationMode(index);if(index0){// 拍照识别页this.getUIContext().getRouter().pushUrl({url:pages/PhotoRecognitionPage});}elseif(index1){// 自由涂鸦页this.getUIContext().getRouter().pushUrl({url:pages/FreeDoodlePage});}elseif(index3){// 3D 模型浏览页this.getUIContext().getRouter().pushUrl({url:pages/ModelViewerPage});}}生成完成后从等待页跳转到结果页// RecognitionWaitingPage → RecognitionResultPagethis.getUIContext().getRouter().pushUrl({url:pages/RecognitionResultPage,params:{source:this.source,workSource:this.workSource,prompt:this.prompt,imageUri:this.imageUri,coverUri:this.coverUri,videoUri:this.videoUri,workId:this.workId,recognitionResult:this.recognitionResult}});3.2 back返回上一页返回上一页使用back()方法// 等待页的返回按钮Text().fontSize(24).onClick((){this.getUIContext().getRouter().back();})3.3 getParams接收参数目标页面通过aboutToAppear中调用getParams()接收参数// 定义参数类型接口interfaceWaitingParams{source?:string;workSource?:string;prompt?:string;imageUri?:string;coverUri?:string;recognitionResult?:string;}aboutToAppear(){constparamsthis.getUIContext().getRouter().getParams()asWaitingParams;// 逐一提取参数带默认值保护if(paramsparams.source){this.sourceparams.source;}if(paramsparams.workSource){if(params.workSourcedoodle){this.workSourcedoodle;}elseif(params.workSourceai-chat){this.workSourceai-chat;}else{this.workSourcephoto;}}if(paramsparams.prompt){this.promptparams.prompt;}// ... 更多的参数提取// 参数解析完成后启动业务逻辑this.startWaitingTimer();this.startGeneration();}类型安全通过as WaitingParams进行类型断言可以安全访问参数对象的属性。注意参数可能为undefined需要做空值检查。4. 项目中路由表概览所有页面需要在main_pages.json中注册才能被路由系统识别和跳转{src:[pages/Index,pages/PhotoRecognitionPage,pages/FreeDoodlePage,pages/RecognitionWaitingPage,pages/RecognitionResultPage,pages/HarmonyFeaturesPage,pages/ModelViewerPage,creationcard/pages/CreationCard,pages/AdaptiveIndex,pages/ResponsiveIndex,pages/SystemCapabilitiesIndex]}这个配置告诉系统应用共有 11 个页面入口其中Index是主入口页面PhotoRecognitionPage、FreeDoodlePage等是独立功能页面RecognitionWaitingPage→RecognitionResultPage构成一个完整的生成流程AdaptiveIndex、ResponsiveIndex是布局适配演示页面5. 综合示例完整的页面导航流程下面是一个典型用户操作的导航流程Index (首页) │ ├─ 点击拍照识别 → pushUrl → PhotoRecognitionPage │ │ │ 拍摄/选择图片后 │ │ │ │ pushUrl → RecognitionWaitingPage │ │ │ 生成完成后 │ │ │ │ pushUrl → RecognitionResultPage │ │ │ 查看完成后 │ │ back() → Index (回到首页) │ ├─ 点击创作 Tab → currentTab 1 (非路由组件内切换) │ └─ 点击我的 → currentTab 2 (非路由组件内切换)6. 小结本篇学习了知识点说明aboutToAppear页面初始化时调用适合注册监听、启动定时器aboutToDisappear页面销毁时调用必须清理资源pushUrl导航到新页面支持传递 params 参数back()返回上一页面getParams()在目标页面接收路由参数main_pages.json注册所有路由页面下篇预告第1.7篇 资源管理与国际化——$r与resource体系。我们将学习如何管理应用中的图片、字符串和多媒体资源以及如何利用资源目录结构支持国际化。思考题如果要从 RecognitionResultPage 返回 Index 时同时把 Index 的 Tab 切换到创作页应该怎么做提示可以通过AppStorage或路由参数的组合方式实现。