HarmonyOS 鸿蒙Next Web组件黑屏修复方案

HarmonyOS 鸿蒙Next Web组件黑屏修复方案

// 导入HarmonyOS的Web视图组件
import web_webview from '@ohos.web.webview';

// 定义基础网页组件
@Component
export struct BasicWebPage {
  webController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Web({
      controller: this.webController,
      src: 'https://www.baidu.com',
    }).width('100%').height('100%')
  }
}

// 定义带加载遮罩的网页组件（采用延时隐藏遮罩方案）
@Component
export struct MaskedWebPage {
  webController: web_webview.WebviewController = new web_webview.WebviewController();
  @State showLoadingMask: boolean = true;

  aboutToAppear() {
    setTimeout(() => {
      this.showLoadingMask = false;
    }, 500);
  }

  build() {
    Stack() {
      Web({ controller: this.webController, src: 'https://www.baidu.com' })
        .width('100%').height('100%')
      Stack() {
        LoadingProgress().width('50%').height('50%')
      }
      .width('100%')
      .height('100%')
      .backgroundColor("#ffffff")
      .visibility(this.showLoadingMask ? Visibility.Visible : Visibility.None)
    }.width('100%').height('100%')
  }
}

// 定义智能加载遮罩的网页组件（基于可视区域变化和页面加载完成事件）
@Component
export struct SmartMaskedWebPage {
  webController: web_webview.WebviewController = new web_webview.WebviewController();
  @State showInitialLoadingMask: boolean = true
  @State isPageLoaded: boolean = false

  build() {
    Stack() {
      Web({ controller: this.webController, src: 'https://www.baidu.com' })
        .width('100%').height('100%')
        .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
          if (!this.isPageLoaded) { //首次url未加载
            this.showInitialLoadingMask = true;
          }
        })
        .onPageEnd((e) => {
          this.isPageLoaded = true
          this.showInitialLoadingMask = false
        })
      Stack() {
        LoadingProgress().width('50%').height('50%')
      }
      .width('100%')
      .height('100%')
      .backgroundColor("#ffffff")
      .visibility(this.showInitialLoadingMask ? Visibility.Visible : Visibility.None)
    }.width('100%').height('100%')
  }
}

@Entry
@Component
export struct test {
  // 控制基础网页视图显示状态
  @State isBasicWebVisible: boolean = false;

  // 控制带遮罩的网页视图显示状态（延时方案）
  @State isMaskedWebVisible: boolean = false;
  @State isMaskedWebContentVisible: boolean = false;

  // 控制智能遮罩的网页视图显示状态
  @State isSmartMaskedWebVisible: boolean = false;

  build() {
    Stack() {
      Column() {
        Button('显示基础网页（无遮罩加载)').onClick(() => {
          this.isBasicWebVisible = !this.isBasicWebVisible
        })
        Button('显示带延时隐藏遮罩的网页').onClick(() => {
          if (!this.isMaskedWebVisible) {
            this.isMaskedWebVisible = true;
            this.isMaskedWebContentVisible = true;
          } else {
            this.isMaskedWebContentVisible = false;
            setTimeout(() => {
              this.isMaskedWebVisible = false;
            }, 500);
          }
        })
        Button('最终方案，通过web组件的onVisibleAreaChange解决').onClick(() => {
          this.isSmartMaskedWebVisible = !this.isSmartMaskedWebVisible;
        })

      }.width('100%').height('100%')

      Text('测试文本')
      if (this.isBasicWebVisible) {
        BasicWebPage().width('50%').height('50%')
      }
      if (this.isMaskedWebVisible) {
        MaskedWebPage()
          .width('50%')
          .height('50%')
          .visibility(this.isMaskedWebContentVisible ? Visibility.Visible : Visibility.None)
      }
      SmartMaskedWebPage().width('50%').height('50%')
        .visibility(this.isSmartMaskedWebVisible ? Visibility.Visible : Visibility.None)
    }.width('100%').height('100%').backgroundColor("#fafafa")
  }
}