【鸿蒙生态共建】一文讲清窗口（window）的基础用法-《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》读者福利

在鸿蒙（HarmonyOS）系统中使用ArkTS开发中，window（窗口）模块是实现多窗口管理、灵活交互和系统资源优化的核心机制，尤其对需要复杂交互（如分屏、悬浮操作）或跨设备适配的应用不可或缺。

同时，使用window来承载UI组件的展示及交互，具备更好的独立性，更适合于三方库中的UI组件的实现，减少对于宿主App的UI环境的依赖。

本篇内容是《精通HarmonyOS NEXT ：鸿蒙App开发入门与项目化实战》这本书第7章内容的延续，是咱这本书读者的福利，内容以window组件的使用为主体，包括window的创建、加载内容、存储及销毁。

对本书感兴趣的同学可以点击以下链接进行购买，及参加我的班级（华为官方）共同学习

转存失败，建议直接上传图片文件

往期福利：

1.创建示例工程及基础配置

在开始之前，我们创建一个名称为TextWindow的工程，如下图所示

之后在工程中，创建子窗口所需要加载的页面SubWindowPage，如下图所示

在main_pages.json中增加SubWindowPage的路径。如下图所示

内容为

{
"src": [
"pages/Index",
"pages/SubWindowPage" // 新增
]
}

2.实现子窗口的创建，加载及存储

在工程的Index文件中，实现以下代码，在该页面中实现用户可点击窗口展示按钮，创建子窗口并加载SubWindowPage页面的能力。因为在SubWindowPage中需要实现关闭window的操作，故将当前创建的window实例存储至AppStorage中。

import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
      Button("窗口展示")
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(async() => {
          let subWindow: window.Window | undefined = undefined;
          let config: window.Configuration = {
            name: "testsub_window",
            windowType: window.WindowType.TYPE_DIALOG,
            ctx: this.getUIContext().getHostContext()
          };

          try {
            window.createWindow(config, (err, data) => {
              const errCode: number = err.code;
              if (errCode) {
                console.error(`俩毛豆 Failed to create the window. Cause code: ${err.code}, message: ${err.message}`);
                return;
              }
              subWindow = data;
              // 加载子页面
              subWindow.setUIContent("pages/SubWindowPage");
              subWindow.showWindow();
              // 存储子窗口实例
              AppStorage.setOrCreate('subWindowInstance', subWindow);
              console.info('俩毛豆  Succeeded in creating the window. Data: ' + JSON.stringify(data));
            });
          } catch (exception) {
            console.error(`俩毛豆 Failed to create the window. Cause code: ${exception.code}, message: ${exception.message}`);
          }
        })
    }
    .height('100%')
    .width('100%')
  }
}

3.实现子窗口页面展示及关闭

接下来我们实现子窗口加载的页面，在SubWindowPage中实现以下代码，在该页面中实现用户可点击回到父窗口按钮，关闭子窗口返回父窗口的能力。先取取子窗口的实例，之后调和该实例的destroyWindow方法销毁子窗口，之后对AppStorage中的子窗口实例进行置空操作。

import { window } from '@kit.ArkUI';

@Entry
@Component
struct SubWindowPage {
  // 取出存储的子窗口实例
  windowClass: window.Window | undefined = AppStorage.get('subWindowInstance');
  build() {
    RelativeContainer() {
      Button("回到父窗口")
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(async() => {
          if (this.windowClass) {
            this.windowClass.destroyWindow((err) => {
              const errCode: number = err.code;
              // 更新子窗口实例
              AppStorage.setOrCreate('subWindowInstance', null);
              if (errCode) {
                console.error(`俩毛豆 Failed to destroy the window. Cause code: ${err.code}, message: ${err.message}`);
                return;
              }
              console.info('俩毛豆 Succeeded in destroying the window.');
            });
          }
        })
    }
    .height('100%')
    .width('100%')
  }
}

4.运行效果

编译运行示例工程，之后的App页面为主窗口，如下图所示

点击窗口展示后，进入子窗口，如下图所示

之后点击回到父窗口，就可回到主窗口页面

总结：

本文介绍鸿蒙系统ArkTS开发中window模块的使用，包括窗口创建、内容加载和销毁。通过示例工程演示了主窗口创建子窗口并加载指定页面，以及子窗口关闭返回主窗口的完整流程。重点讲解了使用window.createWindow创建窗口、setUIContent加载内容、destroyWindow销毁窗口等核心方法，以及通过AppStorage实现窗口实例的存储管理。文章提供了详细代码示例，帮助开发者掌握鸿蒙多窗口交互开发技术。

对本书感兴趣的同学可以点击以下链接进行购买，及参加我的班级（华为官方）共同学习

转存失败，建议直接上传图片文件