当前位置: 首页 > news >正文

鸿蒙 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 文档哈,感觉有用记得点个赞,感谢了!!

http://www.lryc.cn/news/381874.html

相关文章:

  • BUUCTF [CISCN2019 华北赛区 Day2 Web1] Hack World
  • wsl2平台鸿蒙全仓docker编译环境快速创建方法
  • 商业秘密侵权
  • 高通安卓12-固件升级
  • 我的常见问题记录
  • Python 3.12 环境搭建(Windows版)
  • 植物大战僵尸杂交版如何手动修改金币钻石数
  • Salia PLCC cPH2 远程命令执行漏洞(CVE-2023-46359)
  • 路由表操作
  • 羊大师:拒绝心灵内耗:走向高效与平和
  • IOS Swift 从入门到精通:Swift 简介,Swift中变量和常量,Swift中字符串,Swift中整数和浮点数
  • 聚焦AIoT最后一公里:EasyCVR+AI视频技术在各领域的创新应用
  • 怎样利用 Groovy 的元编程特性来创建自定义的 DSL(领域特定语言)?
  • 自动预约申购 i茅台工具完善
  • Jitter Injection详解
  • 基于SSM+Jsp的校园餐厅管理
  • 无线麦克风哪个品牌音质最好,一文告诉你无线领夹麦克风怎么挑选
  • Docker配置国内镜像加速-2
  • 前后端分离项目面试总结
  • 力扣刷题笔记
  • 【JS逆向百例】某点数据逆向分析,多方法详解
  • windows系统docker镜像导出
  • selenium前期准备
  • [Python人工智能] 四十六.PyTorch入门 (1)环境搭建、神经网络普及和Torch基础知识
  • 示例:推荐一个应用Adorner做的通知和提示消息对话框
  • nvdiadocker相关配置S3Gaussian
  • 【科技前沿】电子设计新贵SmartEDA:为何它引领行业风潮?
  • 免费悬浮翻译器哪个好?测评5款悬浮翻译器
  • 压缩文件解压方法总结
  • 探索Elastic Search:强大的开源搜索引擎,详解及使用