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

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() 中释放的资源。

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老皮！！！欢迎大家来找我探讨交流👀