From a6579c52aecb2af880d6c90e65dd734e65cef86e Mon Sep 17 00:00:00 2001
From: EasyGuohf <163991322+EasyGuohf@users.noreply.github.com>
Date: Wed, 6 Aug 2025 17:19:48 +0800
Subject: [PATCH] =?UTF-8?q?web=E9=A2=84=E5=8A=A0=E8=BD=BD=E6=97=B6?=
 =?UTF-8?q?=E6=9C=BA=E5=8F=8A=E6=B7=BB=E5=8A=A0=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/ets/common/utils/WindowUtil.ets  |  4 +-
 .../src/main/ets/view/WebPage.ets             | 60 ++++++++++++-------
 2 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/webprerenderlibrary/src/main/ets/common/utils/WindowUtil.ets b/webprerenderlibrary/src/main/ets/common/utils/WindowUtil.ets
index 955194c..ab31541 100644
--- a/webprerenderlibrary/src/main/ets/common/utils/WindowUtil.ets
+++ b/webprerenderlibrary/src/main/ets/common/utils/WindowUtil.ets
@@ -31,6 +31,7 @@ export class WindowUtil {
       WindowUtil.windowClass = windowStage.getMainWindowSync();
       const uiContext: UIContext = WindowUtil.windowClass.getUIContext();
       AppStorage.setOrCreate<UIContext>(Constants.KEY_UI_CONTEXT, uiContext);
+      createNWeb(ResourceUtil.getRawFileStringByKey(ConfigMapKey.GALLERY_URL), uiContext);
       WindowUtil.requestFullScreen(WindowUtil.windowClass);
       WindowUtil.registerBreakPoint(WindowUtil.windowClass);
     } catch (err) {
@@ -52,11 +53,9 @@ export class WindowUtil {
     } catch {
       hilog.error(0x0000, TAG, 'Failed to set the window layout to full-screen mode. ');
     }
-
   }
 
   public static registerBreakPoint(data: window.Window) {
-
     try {
       BreakpointSystem.getInstance().updateWidthBp(data);
       const systemAvoidArea: window.AvoidArea = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
@@ -73,7 +72,6 @@ export class WindowUtil {
       hilog.error(0x0000, TAG,
         `Register avoidAreaChange or windowSizeChange failed. code: ${error.code}, message: ${error.message}`);
     }
-    createNWeb(ResourceUtil.getRawFileStringByKey(ConfigMapKey.GALLERY_URL), data.getUIContext());
   }
 
   // Get status bar height and indicator height.
diff --git a/webprerenderlibrary/src/main/ets/view/WebPage.ets b/webprerenderlibrary/src/main/ets/view/WebPage.ets
index 18bb76e..df0d680 100644
--- a/webprerenderlibrary/src/main/ets/view/WebPage.ets
+++ b/webprerenderlibrary/src/main/ets/view/WebPage.ets
@@ -20,34 +20,54 @@ import { hilog } from '@kit.PerformanceAnalysisKit';
 import { Constants } from '../common/Constants';
 import { ConfigMapKey, ResourceUtil } from '../common/ResourceUtil';
 
+const TAG = '[WebPageView]';
+
 class Data {
   public url: string =
     ResourceUtil.getRawFileStringByKey(ConfigMapKey.GALLERY_URL);
   public controller: WebviewController = new webview.WebviewController();
 }
 
+@Component
+struct WebPageView {
+  @Prop @Require data: Data;
+  @State currentProgress: number = 0;
+  private total: number = 100;
+
+  build() {
+    Stack({ alignContent: Alignment.Top }) {
+      Web({ src: this.data.url, controller: this.data.controller })
+        .geolocationAccess(false)
+        .onControllerAttached(() => {
+          try {
+            // Set the whitelist to allow access to only the trust web page.
+            this.data.controller.setUrlTrustList(Constants.URL_TRUST);
+          } catch (error) {
+            const err: BusinessError = error as BusinessError;
+            hilog.error(0x0000, TAG, '%{public}s', `ErrorCode: ${err.code},  Message: ${err.message}`);
+          }
+        })
+        .onSslErrorEventReceive((event) => {
+          hilog.error(0x0000, TAG, '%{public}s', 'OnSslErrorEventReceive: ssl check failed');
+          event.handler.handleCancel();
+        })
+        .width($r('app.string.full_height_width'))
+        .height($r('app.string.full_height_width'))
+        .domStorageAccess(true)
+        .onProgressChange((event) => {
+          this.currentProgress = event.newProgress;
+        })
+      Progress({ value: this.currentProgress, type: ProgressType.Linear }).width($r('app.string.full_height_width'))
+        .visibility(this.currentProgress === this.total ? Visibility.Hidden : Visibility.Visible)
+    }
+    .width($r('app.string.full_height_width'))
+    .height($r('app.string.full_height_width'))
+  }
+}
+
 @Builder
 function webBuilder(data: Data) {
-  Column() {
-    Web({ src: data.url, controller: data.controller })
-      .geolocationAccess(false)
-      .onControllerAttached(() => {
-        try {
-          // Set the whitelist to allow access to only the trust web page.
-          data.controller.setUrlTrustList(Constants.URL_TRUST);
-        } catch (error) {
-          hilog.error(0x0000, 'WebviewController', '%{public}s',
-            `ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
-        }
-      })
-      .onSslErrorEventReceive((event) => {
-        hilog.info(0x0000, 'onSslErrorEventReceive', '%{public}s', 'ssl check failed');
-        event.handler.handleCancel();
-      })
-      .width($r('app.string.full_height_width'))
-      .height($r('app.string.full_height_width'))
-      .domStorageAccess(true)
-  }
+  WebPageView({ data: data })
 }
 
 let wrap = wrapBuilder<Data[]>(webBuilder);
-- 
Gitee