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

基于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' })

javascript 复制代码

// 跳转时传参（参数直接合并到配置对象）
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; //安全健壮的写法
}

JavaScript 复制代码

// 全局前置守卫
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}`);
});

启动模式

与安卓的4种不同,只有2种标准启动模式还有一种自定义

singleton->单例模式

multiton ->对应安卓标准模式

specified->自定义逻辑,通过 AbilityStage.onAcceptWant()动态决定实例复用或新建，需开发者自定义逻辑,这个就不展开研究了