鸿蒙 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

相关文章

linux生产者,消费者问题

pthread_cond_wait() :用于阻塞当前线程,等待别的线程使用pthread_cond_signal()或pthread_cond_broadcast来唤醒它。 pthread_cond_wait() 必须与pthread_mutex 配套使用。pthread_cond_wait()函数一进入wait状态就会自动release mutex。当其他线程通过pthread

问题:第一次世界大战的起止时间是 #其他#学习方法#微信

问题:第一次世界大战的起止时间是 A.1913 ~1918 年 B.1913 ~1918 年 C.1914 ~1918 年 D.1914 ~1919 年 参考答案如图所示

2024.6.24 IDEA中文乱码问题(服务器 控制台 TOMcat)实测已解决

1.问题产生原因: 1.文件编码不一致:如果文件的编码方式与IDEA设置的编码方式不一致,就会产生乱码。确保文件和IDEA使用相同的编码,通常是UTF-8。2.IDEA设置问题:检查IDEA的全局编码设置和项目编码设置是否正确。3.终端或控制台编码问题:如果你在终端或控制台看到乱码,可能是终端的编码设置问题。确保终端使用的是支持你的文件的编码方式。 2.解决方案: 1.File -> S

JAVA读取MongoDB中的二进制图片并显示在页面上

1:Jsp页面: <td><img src="${ctx}/mongoImg/show"></td> 2:xml配置: <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001

vcpkg安装opencv中的特殊问题记录(无法找到opencv_corexd.dll)

我是按照网上的vcpkg安装opencv方法进行的(比如这篇:从0开始在visual studio上安装opencv(超详细,针对小白)),但是中间出现了一些别人没有遇到的问题,虽然原因没有找到,但是本人给出一些暂时的解决办法: 问题1: 我在安装库命令行使用的是 .\vcpkg.exe install opencv 我的电脑是x64,vcpkg在这条命令后默认下载的也是opencv2:x6

问题-windows-VPN不正确关闭导致网页打不开

为什么会发生这类事情呢? 主要原因是关机之前vpn没有关掉导致的。 至于为什么没关掉vpn会导致网页打不开,我猜测是因为vpn建立的链接没被更改。 正确关掉vpn的时候,会把ip链接断掉,如果你不正确关掉,ip链接没有断掉,此时你vpn又是没启动的,没有域名解析,所以就打不开网站。 你可以在打不开网页的时候,把vpn打开,你会发现网络又可以登录了。 方法一 注意:方法一虽然方便,但是可能会有

JavaScript全屏,监听页面是否全屏

在JavaScript中,直接监听浏览器是否进入全屏模式并不直接支持,因为全屏API主要是关于请求和退出全屏模式的,而没有直接的监听器可以告知页面何时进入或退出全屏模式。但是,你可以通过在你的代码中跟踪全屏状态的改变来模拟这个功能。 以下是一个基本的示例,展示了如何使用全屏API来请求全屏模式,并在请求成功或失败时更新一个状态变量: javascriptlet isInFullscreen =

vue同页面多路由懒加载-及可能存在问题的解决方式

先上图,再解释 图一是多路由页面,图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应,并且图二的路由层在跟图一对应的页面中要加上components层,多一个s结尾,里面的的方法名就是图一路由的name值,里面还可以照样用懒加载的方式。 页面上其他的路由在路由文件中也跟图二是一样的写法。 附送可能存在

vue+elementui分页输入框回车与页面中@keyup.enter事件冲突解决

解决这个问题的思路只要判断事件源是哪个就好。el分页的回车触发事件是在按下时,抬起并不会再触发。而keyup.enter事件是在抬起时触发。 so,找不到分页的回车事件那就拿keyup.enter事件搞事情。只要判断这个抬起事件的$event中的锚点样式判断不等于分页特有的样式就可以了 @keyup.enter="allKeyup($event)" //页面上的//js中allKeyup(e

vue子路由回退后刷新页面方式

最近碰到一个小问题,页面中含有 <transition name="router-slid" mode="out-in"><router-view></router-view></transition> 作为子页面加载显示的地方。但是一般正常子路由通过 this.$router.go(-1) 返回到上一层原先的页面中。通过路由历史返回方式原本父页面想更新数据在created 跟mounted