鸿蒙 navigation路由跳转,页面struct 下的生命周期、onShow、onHidden等不会触发问题

本文主要是介绍鸿蒙 navigation路由跳转,页面struct 下的生命周期、onShow、onHidden等不会触发问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

经常用安卓思维考虑问题,用习惯了Router方式跳转,但是官方推荐用 navigation,当然它有它的有点, 也有小瑕疵,用了api11 后 发现 navigation路由跳转 ,只要被它包裹的跳转到下页面的,有些生命周期是拿不到的,比如onShow,onHidden等 ,估计小伙伴们也遇到了。庆幸的是api12 更新了,上面可以了哈,下面是以前的和现在的实例代码,对比就知道了哈

以前:

 @BuilderpageMap(name: string, param: object) {NavDestination() {// 根据模块名,获取WrappedBuilder对象,通过builder接口创建页面DfRouter.getBuilder(name).builder(param);}.hideTitleBar(true)}build() {Navigation(this.navPathStack) {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}.hideTitleBar(true).navBarWidth('50%').navDestination(this.pageMap).mode(NavigationMode.Auto)}
}
export class DfRouter {....省略代码/*** @param builderName* @param builder*/public static getBuilder(builderName: string): WrappedBuilder<[object]> {let builder = DfRouter.builderMap.get(builderName);return builder as WrappedBuilder<[object]>;}....省略代码
}

上面代码  根据模块名,获取WrappedBuilder对象,通过builder接口创建页面
      DfRouter.getBuilder(name).builder(param)   方法是返回了个一个WrapeedBudilder

注册页面路由原来是这样的

export default class DfAbilityStage extends AbilityStage{onCreate(): void {GlobalContext.getContext().setObject("appContext", this.context.getApplicationContext());this.initRouter();}/*** 将entry中所有页面一次性注册进来*/initRouter() {let navPathStack: NavPathStack = new NavPathStack()GlobalContext.getContext().setObject('entryPageStack', navPathStack);DfRouter.createNavPathStack(navPathStack);// 加载页面import('./pages/AdPage');import('./pages/HomePage');import('./pages/TestAPage');import('./webContainer/pages/WebPage');}}
  static readonly PAGE_AD: RouterInfo = new RouterInfo('entry', 'AdPage');static readonly PAGE_TEST: RouterInfo = new RouterInfo('entry', 'TestPage');

DfRouter.registerRouterPage(RouterInfo.PAGE_WEB, wrapBuilder(getWebPage));

而下面api12 更新了,变成了让人舒服的 理想状态,同时哪些生命周期也有了

// 该示例演示NavDestination的生命周期时序。
@Builder
export function PageOneBuilder(name: string, param: Object) {PageOneComponent()
}@Component
struct PageOneComponent {private stack: NavPathStack | null = null;@State eventStr: string = "";build() {NavDestination() {Column() {Text("event: " + this.eventStr)Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }).width('80%').height(40).margin(20).onClick(() => {if (this.stack) {this.stack.pushPath({name: "pageOne"});}})Button('pop', { stateEffect: true, type: ButtonType.Capsule }).width('80%').height(40).margin(20).onClick(() => {this.stack?.pop()})}.width('100%').height('100%')}.title('pageOne').onAppear(() => { this.eventStr += "<onAppear>"; }).onDisAppear(() => { this.eventStr += "<onDisAppear>"; }).onShown(() => { this.eventStr += "<onShown>"; }).onHidden(() => { this.eventStr += "<onHidden>"; }).onWillAppear(() => { this.eventStr += "<onWillAppear>"; }).onWillDisappear(() => { this.eventStr += "<onWillDisappear>"; }).onWillShow(() => { this.eventStr += "<onWillShow>"; }).onWillHide(() => { this.eventStr += "<onWillHide>"; })// onReady会在onAppear之前调用.onReady((ctx: NavDestinationContext) => {try {this.eventStr += "<onReady>";this.stack = ctx.pathStack;} catch (e) {console.log(`testTag onReady catch exception: ${JSON.stringify(e)}`)}})}
}@Entry
@Component
struct NavigationExample3 {private stack : NavPathStack = new NavPathStack();build() {Navigation(this.stack) {Stack({alignContent: Alignment.Center}) {Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }).width('80%').height(40).margin(20).onClick(() => {this.stack.pushPath({ name: "pageOne" })})}.width('100%').height('100%')}.width('100%').height('100%').title('Navigation')}
}

注册路由方式也改变了

// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"}
// route_map.json
{"routerMap": [{"name": "pageOne","pageSourceFile": "src/main/ets/pages/Index.ets","buildFunction": "PageOneBuilder","data": {"description": "this is pageOne"}}
,{"name": "/modules/scan","pageSourceFile": "src/main/ets/pages/scan/ScanViewPage.ets","buildFunction": "getScanPage","data": {"description": "this is pageOne"}},]
}

版本api12 加了配置文件的映射表不再是动态的了

是不是看着舒服多了,详细内容看api12 文档哈,感觉有用记得点个赞,感谢了!!

这篇关于鸿蒙 navigation路由跳转,页面struct 下的生命周期、onShow、onHidden等不会触发问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1054073

相关文章

IDEA和GIT关于文件中LF和CRLF问题及解决

《IDEA和GIT关于文件中LF和CRLF问题及解决》文章总结:因IDEA默认使用CRLF换行符导致Shell脚本在Linux运行报错,需在编辑器和Git中统一为LF,通过调整Git的core.aut... 目录问题描述问题思考解决过程总结问题描述项目软件安装shell脚本上git仓库管理,但拉取后,上l

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢?... 目录1. 早期的解决方案2. 交叉观察者:IntersectionObserver2.1 Inter

Spring Gateway动态路由实现方案

《SpringGateway动态路由实现方案》本文主要介绍了SpringGateway动态路由实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随... 目录前沿何为路由RouteDefinitionRouteLocator工作流程动态路由实现尾巴前沿S

idea npm install很慢问题及解决(nodejs)

《ideanpminstall很慢问题及解决(nodejs)》npm安装速度慢可通过配置国内镜像源(如淘宝)、清理缓存及切换工具解决,建议设置全局镜像(npmconfigsetregistryht... 目录idea npm install很慢(nodejs)配置国内镜像源清理缓存总结idea npm in

pycharm跑python项目易出错的问题总结

《pycharm跑python项目易出错的问题总结》:本文主要介绍pycharm跑python项目易出错问题的相关资料,当你在PyCharm中运行Python程序时遇到报错,可以按照以下步骤进行排... 1. 一定不要在pycharm终端里面创建环境安装别人的项目子模块等,有可能出现的问题就是你不报错都安装

idea突然报错Malformed \uxxxx encoding问题及解决

《idea突然报错Malformeduxxxxencoding问题及解决》Maven项目在切换Git分支时报错,提示project元素为描述符根元素,解决方法:删除Maven仓库中的resolv... 目www.chinasem.cn录问题解决方式总结问题idea 上的 maven China编程项目突然报错,是

Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题

《Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题》在爬虫工程里,“HTTPS”是绕不开的话题,HTTPS为传输加密提供保护,同时也给爬虫带来证书校验、... 目录一、核心问题与优先级检查(先问三件事)二、基础示例:requests 与证书处理三、高并发选型:

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,:本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1:直接下载(推荐)方案 2:手动构造

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫(Navigation Guards)本质上就是 在路

C#自动化实现检测并删除PDF文件中的空白页面

《C#自动化实现检测并删除PDF文件中的空白页面》PDF文档在日常工作和生活中扮演着重要的角色,本文将深入探讨如何使用C#编程语言,结合强大的PDF处理库,自动化地检测并删除PDF文件中的空白页面,感... 目录理解PDF空白页的定义与挑战引入Spire.PDF for .NET库核心实现:检测并删除空白页