目錄

• 路由-常用API

• 路由-參數(shù)傳遞

• UIAbility-生命周期

• UIAbility跳轉(zhuǎn)

1. 路由-常用API

如何新建頁面，如何跳轉(zhuǎn)和回退操作

• 新建頁面 pages/DetailPage.ets

@Entry
@Component
struct DetailPage {
 build() {
   Column({ space: 15 }) {
     Text('Detail Page')
       .fontSize(40)
     Button('Back')
   }
   .height('100%')
   .width('100%')
   .justifyContent(FlexAlign.Center)
 }
}

• profile 目錄創(chuàng)建 main_pages

#src/main/resources/base/profile/main_pages.json
{
 "src": [
   "pages/Index",
+    "pages/DetailPage"
 ]
}

TIP

• 手動新建一個頁面（ets）文件，需要在 main_pages.json 中手動配置

• 可以自動創(chuàng)建

  
  
  WechatIMG331.png

• 跳轉(zhuǎn)與后退 API
  1. 跳轉(zhuǎn) router.pushUrl()
  2. 后退router.back()
  3.替換跳轉(zhuǎn) router.replaceUrl()

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. 跳轉(zhuǎn)，壓入頁面棧頂部
         // router.pushUrl({
         //   url: 'pages/DetailPage'
         // })

         // 2. 跳轉(zhuǎn)，替換當(dāng)前頁面棧
         // router.replaceUrl({
         //   url: 'pages/DetailPage'
         // })

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

頁面棧的最大容量為32個頁面。如果超過這個限制，可以調(diào)用 router.clear() 方法清空歷史頁面棧，釋放內(nèi)存空間。

2. 路由-參數(shù)傳遞

• 傳參

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)
 }
}

• 獲取

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-生命周期

當(dāng)用戶打開、切換和返回到對應(yīng)應(yīng)用時，應(yīng)用中的UIAbility實(shí)例會在其生命周期的不同狀態(tài)之間轉(zhuǎn)換。

WechatIMG332.png

• 可以在該回調(diào)中進(jìn)行應(yīng)用初始化操作，例如變量定義資源加載等，用于后續(xù)的UI界面展示。

2.onForeground() 回調(diào)，在 UIAbility 的UI界面可見之前，如 UIAbility切換至前臺時觸發(fā)。

• 可以在 onForeground() 回調(diào)中申請系統(tǒng)需要的資源，或者重新申請?jiān)?onBackground() 中釋放的資源。

3. onBackground()回調(diào)，在 UIAbility 的UI界面完全不可見之后，如 UIAbility 切換至后臺時候觸發(fā)。

• 可以在 onBackground() 回調(diào)中釋放UI界面不可見時無用的資源，或者在此回調(diào)中執(zhí)行較為耗時的操作，例如狀態(tài)保存等

4.Destroy 狀態(tài)在UIAbility 實(shí)例銷毀時觸發(fā)，系統(tǒng)會調(diào)用 onDestroy() 回調(diào)。

• 可以在該回調(diào)中進(jìn)行系統(tǒng)資源的釋放、數(shù)據(jù)的保存等操作。

4. UIAbility跳轉(zhuǎn)

• UIAbility組件是系統(tǒng)調(diào)度的基本單元，為應(yīng)用提供繪制界面的窗口；
• 一個UIAbility組件中可以通過多個頁面來實(shí)現(xiàn)一個功能模塊；
• 每一個UIAbility組件實(shí)例，都對應(yīng)于一個最近任務(wù)列表中的任務(wù)。

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()
 })