HarmonyOS应用开发——页面

我们将对于多页面以及更多有趣的功能展开叙述，这次我们对于 HarmonyOS 的很多有趣常用组件并引出一些其他概念以及解决方案、页面跳转传值、生命周期、启动模式（UiAbility），样式的书写、状态管理以及动画等方面进行探讨

页面之间的跳转以及数据传递

页面之间的跳转需要用到 router 模块的 pushUrl 方法，所以第一步是要导入 router 模块，然后在用户交互 API 中使用该方法进行页面的跳转（我这里使用的是按钮点击）

import router from '@ohos.router'

---

router.pushUrl({
  url: 'pages/Second'
})

然后我们需要将要跳转的到的目标页面进行一个页面路由配置（main_pages.json），忽略掉这一步的话页面跳转时会报错的，报错会提示让你去查看日志，而日志是说路由有问题，没办法跳转，如果你的路径书写的没问题的话，那么就是没有配置了

• 路由配置

{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

完整代码如下：

• 主页面

// 导入 router 路由模块
import router from '@ohos.router'
@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Text("主页面")
          .fontSize(32)
          .fontColor('#404040')
          .fontWeight(FontWeight.Bold)
        Button("点击去往第二个页面")
          .margin(32)
          .padding(12)
          .backgroundColor('#ff21b88d')
          .onClick(()=> {
            // 路由跳转指定页面
            router.pushUrl({
              url: 'pages/Second'
            })
          })
      }.width('100%')
    }.height('100%')
  }
}

• 目标页面

@Entry
@Component
struct Second {
  build() {
  Row() {
    Column() {
      Text("Hello ArkTs")
        .fontWeight(FontWeight.Bold)
    }.width('100%')
  }.height('100%')
  }
}

页面之间传值

页面之间的传值还是靠 pushUrl 方法的 params 参数来传值

router.pushUrl({
  url: 'pages/Second',
  params: {title:'页面之间的传值'}
})

接收方需要使用 router 实例的 getParams 方法来进行接收

@State message:string = router.getParams()?.["title"]

tip: PI9及以上，router.pushUrl()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。

 router.pushUrl({
     url: 'pages/Second',
     params: {
         src: '数据',
     }
 }, router.RouterMode.Single)

除了我们上面所说的 pushUrl 方法，其实还有一种方法可以进行页面跳转:router.replaceUrl()，该方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近同url页面会被移动到栈顶，替换当前页面，并销毁被替换的当前页面，移动后的页面为新建页，页面栈的元素数量会减1；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量不变。

还是那句话，具体问题具体方案，因为应用是有一个页面栈的，如果用户在进入目标页面之后通过一些途径再次重复进入页面，而页面栈或者说我们开发者不进行分辨以及预知的话，就会出现重复跳转、找不到跳转前页面，页面将会出现无法返回或者陷入一个页面的死循环等问题

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

UIAbilIty - 应用程序入口

uiability 就是我们的应用程序入口，是系统调度单元，可以有多个也可以在一个入口中进行所有操作，具体情况具体方案，就比如我们经常使用的聊天工具，里面会内置小游戏等，如果我们通过该聊天工具进入了小游戏，那么该小游戏会重新开一个 uiability，这样我们通过任务管理器即可进行两个应用的互相切换而不影响用户的体验

它的意思相当于 Vue 或者 Uniapp中的 main 程序入口文件，是一个应用程序入口

在这个入口文件中，我们可以通过它的生命周期来做很多的事情，当应用程序打开创建、当他进入了后台、退出后台等等，但WindowStageCreate和WindowStageDestroy也就是使用虚线标明的两个只能算是状态，uiability生命周期只有四个

• Create:Create状态为在应用加载过程中，UIAbility实例创建完成时触发，系统会调用onCreate()回调。可以在该回调中进行应用初始化操作，例如变量定义资源加载等，用于后续的UI界面展示。
• WindowStageCreate、WindowStageDestroy:UIAbility实例创建完成之后，在进入Foreground之前，系统会创建一个WindowStage。WindowStage创建完成后会进入onWindowStageCreate()回调，可以在该回调中设置UI界面加载、设置WindowStage的事件订阅。官网给我们提供了这样一张生命周期图

• Foreground、Background:Foreground和Background状态分别在UIAbility实例切换至前台和切换至后台时触发，对应于onForeground()回调和onBackground()回调
• Destroy:Destroy状态在UIAbility实例销毁时触发。可以在onDestroy()回调中进行系统资源的释放、数据的保存等操作。

我们可以打开应用入口文件查看这些生命周期：

import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  onWindowStageDestroy() {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground() {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground() {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

UIAbility启动模式

UIAbility当前支持singleton（单实例模式）、multiton（多实例模式）和specified（指定实例模式）3种启动模式

• 在单例模式中，每次调用startAbility()方法时，如果应用进程中该类型的UIAbility实例已经存在，则复用系统中的UIAbility实例，系统中只存在唯一一个该UIAbility实例。即在最近任务列表中只存在一个该类型的UIAbility实例
• 在多实例模式中，每次调用startAbility()方法时，都会在应用进程中创建一个该类型的UIAbility实例。即在最近任务列表中可以看到有多个该类型的UIAbility实例
• 在指定实例模式中，UIAbility实例新创建之前，允许开发者为该实例创建一个字符串Key，新创建的UIAbility实例绑定Key之后，后续每次调用startAbility方法时，都会询问应用使用哪个Key对应的UIAbility实例来响应startAbility请求。如果匹配有该UIAbility实例的Key，则直接拉起与之绑定的UIAbility实例，否则创建一个新的UIAbility实例。运行时由UIAbility内部业务决定是否创建多实例。

然后我们在module.json5文件中的“launchType”字段配置为对应实例模式即可。

如多实例模式：

{
   "module": {
     "abilities": [
       {
         "launchType": "multiton"
       }
     ]
  }
}

image

单独介绍这个图片的用意就是想要说它的资源引用特点以及和常见前端开发的不同之处

1. 网络图片引用

Image("https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0")
  .alt($r('app.media.icon'))// 使用alt，在网络图片加载成功前使用占位图
  .width("264vp")
 // 像素单位有4中表示单位 vp、px、fp、lpx

网络图片引用官网说是要在module.json5中配置访问网络权限，我就在网上随便找了一张图片，然后我发现没有配置也可以用，这个的话，能用就用，不能用就配置上，后续慢慢了解这个小东西

"requestPermissions": [{
  "name": "ohos.permission.INTERNET"
}],

2.第二种是使用PixelMap数据加载图片，读取写入图像数据以及获取图像信息

大多用于图形解码等需求的，这个我也不是很懂，我就不阐述了

3.第三种是使用Resource数据加载图片，这个需要将图片放在指定目录下

Image($r("app.media.todolist"))
  .width(64)

resource 可以新建引用资源文件，我们右击 resource 文件夹新建引用资源json文件

这样我们可以写一些常用宽度高度等来提高复用性，便于修改维护

Image($r("app.media.todolist"))
  .width($r("app.float.image"))

harmonyOS的样式怎么使用

对于习惯组件式开发且逻辑层、样式层、架构层分离开发的我来说，这个样式的绘画有点不习惯，写个样式还真得看看官网，所以针对样式的使用我写了一个登陆页面来练习，开发起来倒也是方便，没用多少代码，一个视觉上过的去的页面就开发出来了，尤其是它的 Row 和 Column 容器，掌握了真的很好用，用来做横向竖向布局很舒服

下面的代码没有写注释，但是不难理解，一定可以帮你解决一些样式上的困扰

import router from '@ohos.router'

@Builder function ImageBuilder(src) {
  Image(src)
    .width(32)
    .height(32)
}
@Entry
@Component
struct Index {
  @State username:string = ''
  @State password:string = ''
  build() {
    Row() {
      Column() {
        Image($r("app.media.icon"))
          .width($r("app.float.image_size"))
          .height($r("app.float.image_size"))
          .margin(32)
        Text("登录系统")
          .fontSize(24)
          .fontColor('#404040')
          .fontWeight(700)
          .margin(12)
        Text("登录系统以使用更多功能")
        TextInput({text:this.username,placeholder:'请输入用户名'})
          .margin(32)
          .padding({top:12,left:24})
        TextInput({text:this.password,placeholder:'请输入用户密码'})
          .type(InputType.Password)
          .margin({top:0,left:32,right:32})
          .padding({top:12,left:24})

        Row() {
          Text("验证码登录")
            .fontColor("#ff1a81d0")
            .fontWeight(500)

          Text("忘记密码")
            .fontColor("#ff1a81d0")
            .fontWeight(500)
        }.width("75%")
        .margin({top:24})
        .justifyContent(FlexAlign.SpaceBetween)

        Button("登录")
          .width("90%")
          .margin(64)
          .padding(12)
          .backgroundColor('#ff1a81d0')
          .fontWeight(700)
          .onClick(()=> {
            // 路由跳转指定页面
            router.pushUrl({
              url: 'pages/Second',
              params: {title:'页面之间的传值'}
            })
          })

        Row({space: 32}) {
          ImageBuilder($r("app.media.icon"))
          ImageBuilder($r("app.media.icon"))
          ImageBuilder($r("app.media.icon"))
        }.margin({top:32})

        Text("其他方式登录")
          .margin({top:24})
          .fontSize(12)
          .fontColor("#ff1a81d0")
      }.width('100%')
    }.height('100%')
  }
}

获取 input 的用户输入字符可以使用 Input 内置的 onChange 方法，该方法会自己接受 value 也就是用户输入值，然后相应的对其进行操作即可

.onChange((value: string) => {
    
})

顺便说个有趣的加载组件 :

• LoadingProgress：

LoadingProgress()
  .color(Color.Blue)
  .height(60)
  .width(60)

我们把刚才页面的logo图标使用这个加载logo替换一下

这是一个动态的加载图标，我截图所以看不出来，挺好看的，我们可以在登录等待时间使用它撑一段时间，让用户不那么尴尬

harmonyOS的组件还是很多很棒的，其他有趣的组件我们可以去其官网学习

List

HarmonyOS同样也有 list 滚动列表组件便于我们开发

该组件有三个重要可选参数：

• space:列表间距
• scroller：控制列表滚动
• initiallndex：初次加载 list 所显示的 item

@Entry
@Component
struct Second {
  @Builder listItemComponent(item:string) {
    Row({space:12}) {
      Image($r("app.media.icon"))
        .width(32)
      Text(item).fontWeight(FontWeight.Bold)
    }.width("100%")
    .justifyContent(FlexAlign.SpaceBetween)
  }
  @State list:Array