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

安卓开发者自学鸿蒙开发2页面高级技巧

news 2025/8/18 5:45:01

基于uiAbility最新的Stage 模型,旧版本的FA不再讨论

所有 Page 需在 module.json5中注册

这没什么说的,安卓,vue项目等,几乎所有的类似项目都需要注册,包括 name、label和 actions

生命周期只有四个方法,安卓有6个

aboutToAppear() 页面即将显示
onPageShow()页面完全显示
onPageHide()页面完全不可见(不会因半屏弹窗或局部遮挡触发)
aboutToDisappear()页面即将不可见

数据加载建议:

aboutToAppear() 加载,但要判断是否需要加载,一些不必要实时刷新的数据,可以判断如果加载完成了就不需要再次加载了,当然,所有的网络加载都建议使用异步加载
页面消失前取消加载,可以在aboutToDisappear()里面

注意:build()里面不要加载数据

而应该像vue.js里面提供数据加载的结构体方法,在结构体方法里面去加载.build()里面全部处理ui相关的事务.build就像安卓的xml布局文件一样用就行了.官方推荐的方式,我们也应该区分开,让代码更加整洁,同时官方的说法是性能更高

页面跳转控制

新版路由 API 核心方法

跳转到新页面，保留当前页面（压栈）router.push({ url: ‘pages/DetailPage’ })

替换当前页面，销毁原页面（无法返回）router.replace({ url: ‘pages/LoginPage’ })

返回上一页（可传参）router.back({ url: ‘pages/HomePage’ })

清空页面栈并跳转到指定页面router.clear({ url: ‘pages/HomePage’ })

// 跳转时传参（参数直接合并到配置对象）
router.push({url: 'pages/DetailPage',params: { id: 123,mode: 'single' // 指定路由模式（single/standard）这个特殊的key必须注意一下}
});// 目标页面获取参数
aboutToAppear() {const params = router.getParams(); // { id: 123, mode: 'single' }const id = Number(params.id||0; //安全健壮的写法
}

// 全局前置守卫
router.addBeforeHook((to, from, next) => {if (to.url === Routes.Detail && !isLogin) {next({ url: Routes.Login }); // 重定向} else {next();}
});
//监听路由变化
router.addObserver((to, from) => {console.log(`从 ${from?.url} 跳转到 ${to.url}`);
});