如何解决HarmonyOS鸿蒙Next中Web组件设置透明背景失效问题

【问题现象】

在Web组件中，通过router跳转到PageA，再次跳转到PageB，PageA与PageB只有半屏，并且设置了页面的半透明状态，但是透明部分的背景不是上一个页面，而是桌面。

• 预期效果： 跳转后页面的透明部分是上一个页面。
• 实际效果： 跳转后页面的透明部分是桌面，如下图：

问题代码如下：

Index.ets
import { router } from '@kit.ArkUI';

[@Entry](/user/Entry)
@Component
struct Index {
  @State message: string = 'Index';
  build() {
    Column() {
      Button(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        }).onClick(()=>{
          router.pushUrl({url:"pages/PageA"})
      })
    }.justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor(Color.White)
    .height('100%')
    .width('100%')
  }
}

PageA.ets
import { router } from '@kit.ArkUI';

[@Entry](/user/Entry)
@Component
struct PageA {
  @State message: string = 'Page A';
  build() {
    Column() {
      Row(){
        Button(this.message)
          .id('Page A')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          }).onClick(()=>{
          router.pushUrl({url:"pages/PageB"})
        })
      }.width("100%").height("50%")
      .backgroundColor(Color.White)
      .borderRadius(16)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
    }
    .justifyContent(FlexAlign.End)
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }
}

由于PageB代码与PageA高度类似，仅仅是弹框高度的区别，在此省略代码部分。

【背景知识】

• Navigation组件（推荐）：适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。
• Router模块（不推荐）：通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。
• Router切换Navigation：原先使用Router的，建议切换成Navigation使用。

Router与Navigation的能力对比：

【定位思路】

背景知识中，简单描述了Router和Navigation的区别，可以看出Router有非常大的局限性，Router配合@Entry的路由方式很难实现一些复杂场景的功能，如：页面间传递不可序列化的页面参数、复杂动效互动场景的实现、模态互动场景、灵活的让开发者灵活管控页面的加载和销毁、一多分栏等能力，这些能力都需要使用Navigation实现。

考虑上述Navigation的优势，以及为保证体验一致性，跳转页面场景推荐使用Navigation。

【解决方案】

根据定位思路，应通过Navigation实现页面跳转。

作为子页面的根容器，用于显示Navigation的内容区NavDestination的NavDestinationMode.DIALOG属性。

EntryAbility.ets
onWindowStageCreate(windowStage: window.WindowStage): void {
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
  AppStorage.setOrCreate("windowStage", windowStage);
  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) ?? '');
  });
}

PageA.ets
import window from '@ohos.window';
[@Entry](/user/Entry)
@Component
struct PageA{
  @State message: string = 'Page A';
  aboutToAppear() {
    window.findWindow("subWindowA").setWindowBackgroundColor("# 32ffffff") // 设置子窗口背景透明
  }
  onBackPress() { // 关闭子窗口
    window.findWindow("subWindowA").destroyWindow().then((res) => {
      console.log("destroyWindow success")
    }).catch(() => {
      console.log("destroyWindow fail")
    })
    return true
  }
  build() {
    Column() {
      Row() {
        Button(this.message)
          .id('Page A')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          })
          .onClick(() => {
            let windowStage_: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage;
            windowStage_.createSubWindow("subWindowB", (err, win) => { // 创建透明子窗口并打开
              win.setUIContent('pages/PageB');
              win.showWindow();
            })
          })
        }
      .width("100%")
      .height("50%")
      .backgroundColor(Color.Pink)
      .borderRadius(16)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
    }
    .justifyContent(FlexAlign.End)
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }
}

同样，因为PageB的代码与PageA类似，在此省略代码部分。

效果如图：