003、应用程序框架-UIAbility

之——UIAbility

目录

之——UIAbility

杂谈

正文

1.UIAbility

2.基本使用

2.1 创建Ability工程

2.2 添加基础功能

2.3 新建页面

2.4 页面间的跳转

3.生命周期

总结


杂谈

        UIAbility,其中的页面创建、页面间的跳转、数据传递、生命周期。


正文

1.UIAbility

        UIAbility是一种包含用户界面的应用组件,主要用于和用户进行交互。UIAbility也是系统调度的单元,为应用提供窗口在其中绘制界面。

        每一个UIAbility实例,都对应于一个最近任务列表中的任务。 

        它是应用程序的入口:

003、应用程序框架-UIAbility_第1张图片

        它是应用间的跳转方式:

003、应用程序框架-UIAbility_第2张图片

         一个UIAbility实例对应一个任务栏任务:

003、应用程序框架-UIAbility_第3张图片

        一个应用可以有一个UIAbility,也可以有多个UIAbility。例如浏览器应用可以通过一个UIAbility结合多页面的形式让用户进行的搜索和浏览内容;而聊天应用增加一个“外卖功能”的场景,则可以将聊天应用中“外卖功能”的内容独立为一个UIAbility,当用户打开聊天应用的“外卖功能”,查看外卖订单详情,此时有新的聊天消息,即可以通过最近任务列表切换回到聊天窗口继续进行聊天对话。

        一个UIAbility可以对应于多个页面,建议将一个独立的功能模块放到一个UIAbility中,以多页面的形式呈现。例如新闻应用在浏览内容的时候,可以进行多页面的跳转使用。

003、应用程序框架-UIAbility_第4张图片


2.基本使用

2.1 创建Ability工程

        打开DevEco Studio,选择一个Empty Ability工程模板,创建一个工程,例如命名为MyApplication。

  • 在src/main/ets/entryability目录下,初始会生成一个UIAbility文件EntryAbility.ts。可以在EntryAbility.ts文件中根据业务需要实现UIAbility的生命周期回调内容。
  • 在src/main/ets/pages目录下,会生成一个Index页面。这也是基于UIAbility实现的应用的入口页面。可以在Index页面中根据业务需要实现入口页面的功能。

003、应用程序框架-UIAbility_第5张图片

2.2 添加基础功能

        为index页面添加基础样式,添加button按钮,添加onClick事件:

003、应用程序框架-UIAbility_第6张图片

2.3 新建页面

        为了实现页面的跳转和数据传递,需要新建一个页面。在原有Index页面的基础上,新建一个页面,例如命名为Second.ets。在src/main/ets/pages目录下,右键New->Page,新建一个Second页面,用于实现页面间的跳转和数据传递。 

003、应用程序框架-UIAbility_第7张图片

        可根据用户需要定义second页面的功能。

2.4 页面间的跳转

        两个页面间的跳转和数据传递:

003、应用程序框架-UIAbility_第8张图片

         参数传递:

003、应用程序框架-UIAbility_第9张图片

003、应用程序框架-UIAbility_第10张图片

        API9及以上,router.pushUrl()方法新增了mode参数,使得目前可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。

        在单实例模式下:如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近同url页面会被移动到栈顶,移动后的页面为新建页,原来的页面仍然存在栈中,页面栈的元素数量不变;如果目标页面的url在页面栈中不存在同url页面,按多实例模式跳转,页面栈的元素数量会加1。

        当页面栈的元素数量较大或者超过32时,可以通过调用router.clear()方法清除页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。

        但如果是不想生成新页面是想替换掉目前的同url页面,那么就是用:

003、应用程序框架-UIAbility_第11张图片

        router.replaceUrl()方法,在单实例模式下:如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近同url页面会被移动到栈顶,替换当前页面,并销毁被替换的当前页面,移动后的页面为新建页,页面栈的元素数量会减1;如果目标页面的url在页面栈中不存在同url页面,按多实例模式跳转,页面栈的元素数量不变。

        state修饰是表示页面创建刷新时候的状态修饰,表示页面创建刷新时候就会给src赋值,而当second回到index时候如果有消息传递,index的state是不会刷新触发的。 后文有相应解决办法。

003、应用程序框架-UIAbility_第12张图片

         返回跳转:

        例如调用router.clear()方法清空了页面栈中所有历史页面,仅保留当前页面,此时则无法通过调用router.back()方法返回到上一个页面。

        另外还可以返回指定页面:

router.back({ url: 'pages/Index' });

         页面返回可以根据业务需要增加一个询问对话框。

         即在调用router.back()方法之前,可以先调用router.enableBackPageAlert()方法开启页面返回询问对话框功能。

003、应用程序框架-UIAbility_第13张图片

router.enableBackPageAlert({
  message: 'Message Info'
});

router.back();

003、应用程序框架-UIAbility_第14张图片

         在Second页面中,调用router.back()方法返回上一个页面或者返回指定页面时,根据需要继续增加自定义参数,例如在返回时增加一个自定义参数src。

router.back({
  url: 'pages/Index',
  params: {
    src: 'Second页面传来的数据',
  }
})

        从Second页面返回到Index页面。在Index页面通过调用router.getParams()方法,获取Second页面传递过来的自定义参数。

        

import router from '@ohos.router';
@Entry
@Component
struct Index {
  @State src: string = '';
  onPageShow() {
    this.src = (router.getParams() as Record)['src'];
  }
  // 页面刷新展示
  ...
}

        调用router.back()方法,不会新建页面,返回的是原来的页面,在原来页面中@State声明的变量不会重复声明,以及也不会触发页面的aboutToAppear()生命周期回调,因此无法直接在变量声明以及页面的aboutToAppear()生命周期回调中接收和解析router.back()传递过来的自定义参数。需要用到router.getParams()方法。

  • 这行代码是在获取路由参数,并将其赋值给 this.src。
  • router.getParams() 是 HarmonyOS 中获取路由参数的方法,它返回一个包含所有路由参数的对象。
  • (router.getParams() as Record) 这部分代码是将获取到的路由参数对象强制类型转换为 Record 类型。Record 是 TypeScript 中的一个工具类型,用于创建一个对象类型,其属性的键是 K 类型,属性的值是 T 类型。在这个例子中,K 和 T 都是 string,所以 Record 表示一个所有属性的键和值都是字符串的对象。
  • ['src'] 是在访问这个对象的 src 属性。这个属性的值就是路由参数 src 的值。
  • 所以,this.src = (router.getParams() as Record)['src']; 这行代码的意思是获取路由参数 src 的值,并将其赋值给 this.src。

3.生命周期

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

        UIAbility类提供了很多回调,通过这些回调可以知晓当前UIAbility的某个状态已经发生改变:例如UIAbility的创建和销毁,或者UIAbility发生了前后台的状态切换。

        为了实现多设备形态上的裁剪和多窗口的可扩展性,系统对组件管理和窗口管理进行了解耦。UIAbility的生命周期包括Create、Foreground、Background、Destroy四个状态,WindowStageCreate和WindowStageDestroy为窗口管理器(WindowStage)在UIAbility中管理UI界面功能的两个生命周期回调,从而实现UIAbility与窗口之间的弱耦合。

003、应用程序框架-UIAbility_第15张图片

003、应用程序框架-UIAbility_第16张图片


总结

003、应用程序框架-UIAbility_第17张图片

你可能感兴趣的:(harmony,javascript,前端,开发语言)