鸿蒙应用开发-路由与生命周期

1. 路由-常用API

如何新建页面,如何跳转和回退操作

  • 新建页面 pages/DetailPage.ets
ts 复制代码
@Entry
@Component
struct DetailPage {
 build() {
   Column({ space: 15 }) {
     Text('Detail Page')
       .fontSize(40)
     Button('Back')
   }
   .height('100%')
   .width('100%')
   .justifyContent(FlexAlign.Center)
 }
}
  • profile 目录创建 main_pages
ts 复制代码
#src/main/resources/base/profile/main_pages.json
{
 "src": [
   "pages/Index",
+    "pages/DetailPage"
 ]
}
TIP
  • 手动新建一个页面(ets)文件,需要在 main_pages.json 中手动配置

  • 可以自动创建

  • 跳转与后退 API

    1. 跳转 router.pushUrl()

    2. 后退router.back()

    3.替换跳转 router.replaceUrl()

ts 复制代码
import router from '@ohos.router'
@Entry
@Component
struct Index {
 build() {
   Column({ space: 15 }) {
     Text('Index Page')
       .fontSize(40)
     Button('Jump To Detail Page')
       .onClick(() => {
         // 1. 跳转,压入页面栈顶部
         // router.pushUrl({
         //   url: 'pages/DetailPage'
         // })

         // 2. 跳转,替换当前页面栈
         // router.replaceUrl({
         //   url: 'pages/DetailPage'
         // })

         // 3. 返回
         // router.back()
       })
   }
   .height('100%')
   .width('100%')
   .justifyContent(FlexAlign.Center)
 }
}

页面栈的最大容量为32个页面。如果超过这个限制,可以调用 router.clear() 方法清空历史页面栈,释放内存空间。

2. 路由-参数传递
  • 传参
ts 复制代码
import router from '@ohos.router'

class User {
 name: string
 age: number
}

@Entry
@Component
struct Index {

 @State
 user: User = {
   name: 'jack',
   age: 18
 }

 build() {
   Column({ space: 15 }) {
     Text('Index Page')
       .fontSize(40)
     Button('Jump To Detail Page')
       .onClick(() => {
         router.pushUrl({
           url: 'pages/DetailPage',
           params: this.user
         })
       })
   }
   .height('100%')
   .width('100%')
   .justifyContent(FlexAlign.Center)
 }
}
  • 获取
ts 复制代码
import router from '@ohos.router'
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct DetailPage {

 aboutToAppear() {
   const params = router.getParams()
   promptAction.showToast({ message: params['name'] + params['age'] })
 }

 build() {
   Column({ space: 15 }) {
     Text('Detail Page')
       .fontSize(40)
     Button('Back')
       .onClick(() => {
         router.back()
       })
   }
   .height('100%')
   .width('100%')
   .justifyContent(FlexAlign.Center)
 }
}
3. UIAbility-生命周期

当用户打开、切换和返回到对应应用时,应用中的UIAbility实例会在其生命周期的不同状态之间转换。

1.UIAbility实例创建完成时触发,系统会调用 onCreate() 回调。

  • 可以在该回调中进行应用初始化操作,例如变量定义资源加载等,用于后续的UI界面展示。

2.onForeground() 回调,在 UIAbility 的UI界面可见之前,如 UIAbility切换至前台时触发。

  • 可以在 onForeground() 回调中申请系统需要的资源,或者重新申请在 onBackground() 中释放的资源。
  1. onBackground()回调,在 UIAbility 的UI界面完全不可见之后,如 UIAbility 切换至后台时候触发。
  • 可以在 onBackground() 回调中释放UI界面不可见时无用的资源,或者在此回调中执行较为耗时的操作,例如状态保存等

4.Destroy 状态在UIAbility 实例销毁时触发,系统会调用 onDestroy() 回调。

  • 可以在该回调中进行系统资源的释放、数据的保存等操作。
4. UIAbility跳转
  • UIAbility组件是系统调度的基本单元,为应用提供绘制界面的窗口;
  • 一个UIAbility组件中可以通过多个页面来实现一个功能模块;
  • 每一个UIAbility组件实例,都对应于一个最近任务列表中的任务。
ts 复制代码
Button('Jump To PayAbility Page')
 .onClick(() => {
   const context = getContext(this) as common.UIAbilityContext
   const want: Want = {
     bundleName: 'com.itcast.myapplication',
     abilityName: 'PayAbility'
   }
   context.startAbility(want)
 })

Button('Back')
 .onClick(() => {
   router.back()
 })

👀关注公众号:Android老皮!!!欢迎大家来找我探讨交流👀

相关推荐
coder_pig9 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶10 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
前端世界11 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor12 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
zhanshuo13 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos
HMSCore13 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
zhanshuo13 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
HarmonyOS小助手14 小时前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
xq952714 小时前
flutter 鸿蒙化插件开发横空出世
harmonyos
HarmonyOS_SDK14 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos