HarmonyOS 应用开发进阶案例（一）：Stage模型下Abliity的创建和使用

Raink
41 阅读6分钟

本案例基于Stage模型，对Ability的创建和使用进行讲解。首先使用DevEco Studio创建一个Stage模型Ability，并使用UIAbilityContext启动另一个Ability，然后借助Want，在Ability之间传递参数，最后使用HiLog打印Ability的生命周期。效果如下图所示：

图7-24 案例效果图

1. 案例运用到的知识点

1.1. 核心知识点

  • UIAbility：UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口；一个UIAbility组件中可以通过多个页面来实现一个功能模块。每一个UIAbility组件实例，都对应于一个最近任务列表中的任务。
  • UIAbilityContext：UIAbilityContext模块提供允许访问特定Ability的资源的能力，包括对Ability的启动、停止的设置、获取caller通信接口、拉起弹窗请求用户授权等。
  • Want：Want是对象间信息传递的载体, 可以用于应用组件间的信息传递。 Want的使用场景之一是作为startAbility的参数, 其包含了指定的启动目标, 以及启动时需携带的相关数据。
  • HiLog：HiLog日志系统，让应用可以按照指定类型、指定级别、指定格式字符串输出日志内容，帮助开发者了解应用的运行状态，更好地调试程序。

1.2. 其他知识点

  • ArkTS 语言基础
  • V2版状态管理：@ComponentV2/@Local/@Param
  • 自定义组件和组件生命周期
  • @Builder装饰器：自定义构建函数
  • @BuilderParam装饰器：引用@Builder函数
  • @Extend装饰器：定义扩展组件样式
  • @Styles装饰器：定义组件重用样式
  • ForEach：循环渲染
  • 内置组件：Column/Row/Flex/Scroll/List/Swiper/Tabs/Stack/Text/Span/TextInput/Image/Button/Blank/Divider
  • 日志管理类的编写
  • 常量与资源分类的访问
  • 组件导航 (Navigation)
  • MVVM模式

2. 代码结构

├──entry/src/main/ets             // 代码区
│  ├──common                      // 公共资源目录
│  ├──DetailsAbility
│  │  └──DetailsAbility.ets       // 关联详情页面的UIAbility
│  ├──entryability
│  │  └──EntryAbility.ets         // 程序入口类
│  ├──model
│  │  └──DataModel.ets            // 业务逻辑文件
│  ├──pages
│  │  ├──DetailsPage.ets          // 详情页面
│  │  └──NavPage.ets              // 导航页面
│  ├──view                        // 自定义组件目录
│  └──viewmodel                   // 视图业务逻辑文件目录
└──entry/src/main/resources       // 资源文件目录

3. 核心代码解读

3.1. 创建Ability和Page页面

在本案例中，我们需要创建两个Ability：EntryAbility，DetailsAbility。其中EntryAbility是由工程默认创建的，这里我们只讲如何创建DetailsAbility。

  • 使用DevEco Studio，选中对应的模块，单击鼠标右键，选择New > Ability，在对话框中修改名字后，即可创建相关的Ability。

图7-25 新建Ability

这里填入Ability的名字，会自动生成目录和ets文件。

图7-26 命名Ability

图7-27 创建好的Ablility

  • 创建完Ability后，需要我们为Ability设置page页面，选中pages目录，单击鼠标右键，选择New > Page，在对话框中修改名字后，即可创建相关的Page页面。

图7-28 为Ability设置page页面

图7-29 命名页面

图7-30 创建好的页面

DetailsPage.ets的主要代码如下：

// entry/src/main/ets/pages/DetailsPage.ets
...
@Entry
@ComponentV2
struct DetailsPage {
  private goodsDetails: GoodsData = new GoodsData()

  aboutToAppear() {
    if (position) {
      this.goodsDetails = viewModel.loadDetails(position)
    }
  }
  ...
  build() {
    Column() {
      Scroll() {
        Column() {
          Stack({ alignContent: Alignment.Top }) {
            // GoodsPreviewer 显示商品图片
            PreviewerComponent({ goodsImg: this.goodsDetails.goodsImg })
            this.topBarLayout()
          }
          .height(DetailsPageStyle.TOP_LAYOUT_HEIGHT)
          .width(PERCENTAGE_100)
          .backgroundColor($r('app.color.background1'))
          // 关于商品信息的卡片布局样式
          this.cardsLayout()
        }
        .width(PERCENTAGE_100)
      }
      .height(DetailsPageStyle.SCROLL_LAYOUT_WEIGHT)
      .backgroundColor($r('app.color.background'))
      // 底部工具栏
      BottomBarComponent()
        .height(DetailsPageStyle.TOOLBAR_WEIGHT)
    }
    .height(PERCENTAGE_100)
    .width(PERCENTAGE_100)
  }
  ...
}

使用windowStage.loadContent为指定Ability设置相关的Page页面。

// entry/src/main/ets/detailsability/DetailsAbility.ets
...
export default class DetailsAbility extends UIAbility {
  ...
  onWindowStageCreate(windowStage: window.WindowStage) {
    ...
    windowStage.loadContent('pages/DetailsPage', (err, data) => {
      if (err.code) {
        hilog.error(
          DETAIL_ABILITY_DOMAIN, TAG, 
          'Failed. Cause: %{public}s', 
          JSON.stringify(err) ?? ''
        )
        return
      }
      hilog.info(
        DETAIL_ABILITY_DOMAIN, TAG, 
        'Succeeded. Data: %{public}s', 
        JSON.stringify(data) ?? ''
      )
    })
  }
  ...
}

3.2. UIAbilityContext模块启动Ability的能力

UIAbilityContext模块提供允许访问特定Ability的资源的能力，包括对Ability的启动、停止的设置、获取caller通信接口、拉起弹窗请求用户授权等。

在本案例中，我们点击首页商品列表中的某一项商品，即可跳转到商品的详情页面。此处使用到UIAbilityContext模块的启动Ability的能力。关于获取UIAbilityContext的方法，推荐使用getContext(this)方式来获取UIAbilityContext。

HomePage.ets的主要代码如下：

// entry/src/main/ets/view/home/HomePage.ets
...
  build() {
    Column() {
      Blank()
        .height(HomePageStyle.BLANK_HEIGHT)
      // Logo和二维码区域
      TopBarComponent()
        .padding({
          top: HomePageStyle.PADDING_VERTICAL,
          bottom: HomePageStyle.PADDING_VERTICAL,
          left: HomePageStyle.PADDING_HORIZONTAL,
          right: HomePageStyle.PADDING_HORIZONTAL
        })
      SearchComponent()
      TabsComponent({ tabMenus: this.tabMenus })
      BannerComponent({ bannerList: this.bannerList })
      MenusComponent({ menus: this.menus })
      // 商品列表组件
      GoodsComponent({
        goodsList: this.goodsList, startPage: (index) => {
          let handler = getContext(this) as common.UIAbilityContext
          viewModel.startDetailsAbility(handler, index)
        }
      })
    }
    .width(PERCENTAGE_100)
    .height(PERCENTAGE_100)
    .backgroundImage(
      $rawfile('index/index_background.png'), 
      ImageRepeat.NoRepeat
    )
    .backgroundImageSize(ImageSize.Cover)
  }
...

startDetailsAbility方法调用了UIAbilityContext模块启动Ability的能力。

// entry/src/main/ets/viewmodel/HomeViewModel.ets
... 
  public startDetailsAbility(
    context: common.UIAbilityContext, 
    index: number
  ): void {
    const want: Want = {
      bundleName: getContext(context).applicationInfo.name,
      abilityName: DETAILS_ABILITY_NAME,
      parameters: {
        position: index
      }
    }
    try {
      context.startAbility(want)
    } catch (error) {
      hilog.error(HOME_PAGE_DOMAIN, TAG, '%{public}s', error)
    }
  }
...

3.3. 信息传递载体Want

Want是对象间信息传递的载体, 可以用于应用组件间的信息传递。Want的使用场景之一是作为startAbility的参数, 其包含了指定的启动目标, 以及启动时需携带的相关数据。

在本案例的EntryAbility中，我们使用startDetailsAbility方法启动DetailsAbility，并在代码中指定了Want的具体参数，并使用parameters参数传递商品信息。

在DetailsAbility中通过AppStorage来存储detailWant对象。

// entry/src/main/ets/detailsability/DetailsAbility.ets
...
export default class DetailsAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
    let index: number = want?.parameters?.position as number
    hilog.info(
      DETAIL_ABILITY_DOMAIN, 
      TAG, '新页面参数：bundle name', 
      want?.bundleName, 
      want?.abilityName, 
      index
    )
    AppStorage.setOrCreate(KEY, index)
    hilog.info(
      DETAIL_ABILITY_DOMAIN,
      TAG, 
      '%{public}s', 'Ability onCreate'
    )
  }
  ...
}

在DetailsPage页面中，使用AppStorage来获取detailWant对象，解析detailWant对象中的商品信息参数，调用loadDetails方法来展示商品详情。

// entry/src/main/ets/pages/DetailsPage.ets
...
let viewModel: DetailsViewModel = new DetailsViewModel()
const KEY: string = 'GoodsPosition'
let position = AppStorage.get<number>(KEY)
...
@Entry
@ComponentV2
struct DetailsPage {
  private goodsDetails: GoodsData = new GoodsData()

  aboutToAppear() {
    if (position) {
      this.goodsDetails = viewModel.loadDetails(position)
    }
  }
 ...
}

3.4. 使用HiLog打印生命周期函数

我们在编写日志管理类时学习过HiLog，这里我们再回顾一下。HiLog日志系统可以让应用按照指定类型、指定级别、指定格式字符串打印日志内容，帮助开发者了解应用/服务的运行状态，更好地调试程序。

HiLog提供了debug、info、warn、error以及fatal接口，在本案例中，我们使用hilog打印EntryAbility 、DetailsAbility的生命周期。

在打印之前，我们需要了解三个参数：

  • domain：日志对应的领域标识，范围是0x0~0xFFFF。建议开发者在应用内根据需要自定义划分。
  • tag：指定日志标识，可以为任意字符串，建议用于标识调用所在的类或者业务行为。
  • level：日志级别。
  • format：格式字符串，用于日志的格式化输出。格式字符串中可以设置多个参数，参数需要包含参数类型、隐私标识。隐私标识分为{public}和{private}，缺省为{private}。标识{public}的内容明文输出，标识{private}的内容以过滤回显。

下面我们在EntryAbility中演示如何使用hilog对象打印Ability的生命周期函数 onBackground。

// entry/src/main/ets/entryability/EntryAbility.ets
...
export default class EntryAbility extends UIAbility {
  ...
  onBackground() {
    // Ability 已返回后台
    hilog.isLoggable(ENTRY_ABILITY_DOMAIN, TAG, hilog.LogLevel.INFO)
    hilog.info(
      ENTRY_ABILITY_DOMAIN, 
      TAG, 
      '%{public}s', 'Ability onBackground'
    )
  }
}

✋ 需要参加鸿蒙认证的请点击 鸿蒙认证链接

avatar
文章
阅读
粉丝