【HarmonyOS】【鸿蒙应用开发】DevEco Studio小白必看开发项目中UI结构框架。模块module、UIAbility、page页面三者的关系及其创建构建和跳转。

知识点：

模块module、UIAbility、page页面三者的创建 跳转 结构关系

概括

在鸿蒙开发中，一个项目中可以存在多个模块，然后会在模块中定义UIAbility，并在UIAbility中创建和配置Page页面。Page页面则通过组合和配置不同的组件来构建复杂的用户界面，实现与用户的交互。这种结构框架使得鸿蒙的UI开发更加灵活和高效。

创建并简单介绍

模块module 

项目创建的时候会默认创建一个模块，但是也可以另外创建多个模块。像entry、entry2就是两个不同的模块，模块是项目下最基本的单位，在手机APP中，不同的模块在APP的后台可以独立存在，同一个项目中，只有模块可以在手机后台互相独立存在。如下所示

UIAbility

UIAbility在创建项目时也默认创建了，其作为一种界面能力，在同一个模块内，不同的UIAbility可以共享相同的Page页面。这种设计方式允许开发者在不重复编写相同页面代码的情况下，实现多个界面能力的复用。这极大地减少了开发成本，提高了开发效率。

page页面

page是在UI直接展示的界面，其也是最基础最直观展示的部分。

实现跳转

模块间跳转：

entry跳转到自己新建的entry2模块

import { common, Want } from '@kit.AbilityKit';

@Entry
@Component
struct Index {
  @State message: string = 'entry';
  //获取当前上下文
  private context = getContext(this) as common.UIAbilityContext;
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('跳转entry2模块')
          .onClick(()=>{
            // context为Ability对象的成员，在非Ability对象内部调用需要
            // 将Context对象传递过去
            let wantInfo: Want = {
              //不用填
              deviceId: '', // deviceId为空表示本设备
              //应用标识符 在AppScope路径下的app.json5文件里面可以找到自己项目对应的应用标识符
              bundleName: 'com.example.firforstage',
              //填写要跳转到的模块的名字
              moduleName: 'entry2', // moduleName非必选
              //填写要跳转到的模块下的UIAbility 因为既然跳转其实在UI显示上直观切换的是page页面，而page页面也在UIAbility下
              abilityName: 'Entry2Ability',
              parameters: {
                // 自定义信息
                info: '来自EntryAbility Page_UIAbilityComponentsInteractive页面'
              },
            }
            this.context.startAbility(wantInfo)
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

项目内UIAbility跳转：

在项目内每个UIAbility有自己的默认打开页面，可以在如下每个UIAbility中对应的文件中找到

跳转方法与模块间跳转相同，只不过没有模块的变化，只需要填写UIAbility的变化即可

页面Page的跳转：

用router组件实现即可，具体可以翻阅文档OpenAtom OpenHarmony

import router from '@ohos.router';

@Entry
@Component
struct Index2Page {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Button('页面跳转')
          .onClick(()=>{
          router.pushUrl({
            url:'pages/Index'
          })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}