HarmonyOS 自定义的CustomDialog如何在全局创建

PromptAction.opencustomdialog可以做，支持全局自定义弹框，不依赖UI组件依赖UIContext，支持在非页面文件中使用。参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-uicontext-V5#opencustomdialog12

参考示例如下：

index

import { GlobalContext } from '../uitls/GlobalContext';
import { testPromptDialog, testSubWindowDialog } from '../uitls/HttpUtil';

@Entry
@Component
struct Index {
  aboutToAppear(): void {
    GlobalContext.getContext().setObject('UIContext', this)
  }

  build() {
    Row() {
      Column() {
        Button("promptAction弹窗")
          .onClick(() => {
            testPromptDialog()
          })
        Button("子窗口弹窗")
          .margin({ top: 20 })
          .onClick(() => {
            testSubWindowDialog();
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

EntryAbility

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { Data } from '../uitls/CommonWindow';

export default class EntryAbility extends UIAbility {
  subWindowStage: window.WindowStage | null = null;

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

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

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

    this.subWindowStage = windowStage;
    const that: EntryAbility = this
    this.context.eventHub.on("createWindow", (data: Data) => {
      if (that.subWindowStage != undefined) {
        data.subWindowStage = that.subWindowStage
      } else {
        hilog.info(0x0000, 'testTag', '%{public}s', 'that.subWindowStage == undefined');
      }
    })

    windowStage.loadContent('pages/Index', (err) => {
      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.');
    });
  }

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

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

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

CommonWindow

import window from '@ohos.window';
import common from '@ohos.app.ability.common';
import { BusinessError } from '@ohos.base';
import { entryName } from './MainPage';

export class CommonWindow {
  private storage: LocalStorage | null = null;
  private subWindow: window.Window | null = null;
  private windowStage1: window.WindowStage | null = null
  private context: common.UIAbilityContext | null = null;

  private init() {
    this.context = getContext(this) as common.UIAbilityContext;
    let data: Data = { subWindowStage: null, storage: null };
    this.context.eventHub.emit("createWindow", data);
    this.windowStage1 = data.subWindowStage;
    this.storage = data.storage;
    console.log("aboutToAppear end createWindowStage");
    this.context.eventHub.on("closeWindow", (data: Data) => {
      this.destroySubWindow();
    })
  }

  showWindow() {
    this.init();
    if (this.subWindow) {
      console.log("subWindow is already exist");
      return;
    }
    try {
      if (!this.windowStage1) {
        console.error("this.windowStage1 is null");
        return;
      }
      this.windowStage1.createSubWindow('mySubWindow', (err: BusinessError, data) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to create the subWindow. Cause: ' + JSON.stringify(err));
          return;
        }
        this.subWindow = (data as window.Window);
        console.info('Succeeded in creating the subWindow. Data: ' + JSON.stringify(data));
        if (!this.subWindow) {
          console.info('Failed to load the content. Cause: windowClass is null');
        } else {
          let names: Array<'status' | 'navigation'> = [];
          this.subWindow.setWindowSystemBarEnable(names);
          this.subWindow.setWindowTouchable(false); //设置是否可以点击
          this.loadContent(entryName);
          this.showSubWindow();
        }
      });
    } catch (exception) {
      console.error('Failed to create the window. Cause: ' + JSON.stringify(exception));
    }
  }

  private showSubWindow() {
    if (this.subWindow) {
      this.subWindow.showWindow((err: BusinessError) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in showing the window.');
      });
    } else {
      console.info('showSubWindow subWindow not created.');
    }
  }

  destroySubWindow() {
    if (this.subWindow) {
      this.subWindow.destroyWindow((err) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to destroy the window. Cause:' + JSON.stringify(err));
          return;
        }
        this.subWindow = null
      });
    } else {
      console.info('showSubWindow subWindow not created.');
    }
  }

  private loadContent(path: string) {
    if (this.subWindow) {
      let that = this;
      let para: Record<string, number> = { 'PropA': 66 };
      that.storage = new LocalStorage(para);
      if (that.storage != null && this.subWindow != null) {
        that.storage.setOrCreate("windowObj", this.subWindow)
      }
      this.subWindow.loadContentByName(path, this.storage, (err: BusinessError) => {
        const errCode: number = err.code;
        if (errCode) {
          return;
        }
        if (this.subWindow) {
          this.subWindow.setWindowBackgroundColor('#cc000e03')
        }
      });
    } else {
      console.info('loadContent subWindow not created.');
    }
  }
}

export interface Data {
  subWindowStage: window.WindowStage | null,
  storage: LocalStorage | null
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.

GlobalContext

export class GlobalContext {
  private constructor() {
  }

  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

HttpUtil

import http from '@ohos.net.http';
import { CommonConstant, ContentType } from '../constants/CommonConstant';
import { ResponseResult } from '../model/Good';
import { BusinessError } from '@ohos.base';
import { GlobalContext } from './GlobalContext';
import { promptAction } from '@kit.ArkUI';
import { CommonWindow } from './CommonWindow';

let customDialogId: number = 0

export function httpRequestGet(url: string): Promise<Respons>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.