HarmonyOS鸿蒙Next中Init error. The WebviewController must be associated with a Web component

HarmonyOS鸿蒙Next中Init error. The WebviewController must be associated with a Web component

import webview from '@ohos.web.webview';
import { hilog } from '@kit.PerformanceAnalysisKit';
import type { TabRoute, QueryParam } from '../common/AppConfig';
import { AppConfig, buildWebUrl } from '../common/AppConfig';
import { STORAGE_KEYS } from '../common/AppState';
import type { UserSession } from '../models/UserSession';
import type { UserInfo } from '../models/UserSession';
import { NativeBridgeProxy } from '../common/NativeBridgeProxy';

const TAG = 'SmartStoreWebContainer';

interface WebUserPayload {
  token: string;
  userInfo: UserInfo | null;
  nativeShell: boolean;
}

@Component
export struct WebContainer {
  @Prop route: TabRoute = AppConfig.tabs[0];
  @StorageLink(STORAGE_KEYS.session) private session: UserSession | null = null;
  @State private isLoading: boolean = true;
  @State private webSrc: string = 'about:blank';
  @State private loadFailed: boolean = false;
  @State private loadErrorText: string = '';
  private controller: webview.WebviewController = new webview.WebviewController();
  private bridgeRegistered: boolean = false;
  private controllerAttached: boolean = false;

  private buildWebSrc(): string {
    this.loadFailed = false;
    this.loadErrorText = '';
    const query: QueryParam[] = [];
    if (this.session?.token) {
      query.push({ key: 'token', value: this.session.token });
    }
    const url = buildWebUrl(this.route.path, query);
    hilog.info(0x0001, TAG, `buildWebSrc route=${this.route.id} url=${url}`);
    return url;
  }

  private buildBridgeScript(payload: WebUserPayload): string {
    const payloadStr = JSON.stringify(payload);
    return `
      (function() {
        try {
          const bridgePayload = ${payloadStr};
          const bridge = {
            navigateToNativePage: function(pageName, params) {
              console.log('[NativeBridge] navigateToNativePage', pageName, params);
            },
            switchMenu: function(menuItem) {
              console.log('[NativeBridge] switchMenu', menuItem);
            },
            nativeLogin: function() { console.log('[NativeBridge] nativeLogin'); },
            logout: function() { console.log('[NativeBridge] logout'); },
            getUserData: function() { return JSON.stringify(bridgePayload); },
            setTabBarVisible: function(visible) { console.log('[NativeBridge] setTabBarVisible', visible); },
            goBack: function() { console.log('[NativeBridge] goBack'); },
            testConnection: function() { return 'NativeBridge(HarmonyOS) connected'; }
          };
          if (!window.NativeBridge) {
            window.NativeBridge = bridge;
          }
          if (!window.AndroidBridge) {
            window.AndroidBridge = bridge;
          }
        } catch (error) {
          console.error('[NativeBridge] inject failed', error);
        }
      })();
    `;
  }

  private injectSessionToWeb(): void {
    if (!this.session?.token) {
      hilog.warn(0x0001, TAG, '[SESSION_INJECT] skipped: missing token');
      return;
    }
    const payload: WebUserPayload = {
      token: this.session.token,
      userInfo: this.session.userInfo ?? null,
      nativeShell: true,
    };
    hilog.info(0x0001, TAG, `[SESSION_INJECT] payload: ${JSON.stringify(payload)}`); // 增加日志打印payload内容
    const script = `
      (function() {
        try {
          window.__NATIVE_USER__ = ${JSON.stringify(payload)};
          window.__NATIVE_APP_DATA__ = ${JSON.stringify(payload)};
          localStorage.setItem('token', ${JSON.stringify(payload.token)});
          localStorage.setItem('auth_token', ${JSON.stringify(payload.token)});
          sessionStorage.setItem('token', ${JSON.stringify(payload.token)});
          sessionStorage.setItem('auth_token', ${JSON.stringify(payload.token)});
          console.log('[SESSION_INJECT] token injected len=${payload.token.length}');
        } catch (error) {
          console.error('[SESSION_INJECT] failed', error);
        }
      })();
    `;
    hilog.info(0x0001, TAG, `[SESSION_INJECT] script: ${script}`); // 增加日志打印script内容
    const bridgeScript = this.buildBridgeScript(payload);
    hilog.info(0x0001, TAG, `[SESSION_INJECT] bridgeScript: ${bridgeScript}`); // 增加日志打印bridgeScript内容
    const runnable = this.controller as JavaScriptRunnable;
    if (!runnable.runJavaScript) {
      hilog.error(0x0001, TAG, '[SESSION_INJECT] runJavaScript unavailable');
      return;
    }
    if (!this.controllerAttached) {
      hilog.warn(0x0001, TAG, '[SESSION_INJECT] controller not attached, retry in 80ms');
      setTimeout(() => this.injectSessionToWeb(), 80);
      return;
    }
    runnable.runJavaScript(bridgeScript).catch((error: Error) => {
      hilog.error(0x0001, TAG, `[BRIDGE_INJECT] error: ${error}`);
    });
    runnable.runJavaScript(script).catch((error: Error) => {
      hilog.error(0x0001, TAG, `[SESSION_INJECT] runJavaScript error: ${error}`);
    });
  }


  aboutToAppear(): void {
    hilog.info(0x0001, TAG, `[aboutToAppear] called.`);
    this.isLoading = true;
    this.controllerAttached = false;
    this.bridgeRegistered = false;
    this.webSrc = this.buildWebSrc();
    webview.WebviewController.setWebDebuggingAccess(true);
  }

  aboutToRender(): void {
    const nextSrc = this.buildWebSrc();
    if (nextSrc !== this.webSrc) {
      this.webSrc = nextSrc;
    }
  }

  private ensureBridge(): void {
    if (!this.controllerAttached) {
      hilog.warn(0x0001, TAG, 'ensureBridge controller not attached, retry in 80ms');
      setTimeout(() => this.ensureBridge(), 80);
      return;
    }
    if (this.bridgeRegistered) {
      return;
    }
    const registerProxy = this.controller.registerJavaScriptProxy;
    if (!registerProxy) {
      hilog.warn(0x0001, TAG, 'registerJavaScriptProxy unavailable');
      return;
    }
    try {
      const proxy = new NativeBridgeProxy();
      const methods = [
        'navigateToNativePage',
        'switchMenu',
        'nativeLogin',
        'logout',
        'getUserData',
        'setTabBarVisible',
        'goBack',
        'testConnection',
      ];
      registerProxy(proxy, 'NativeBridge', methods);
      registerProxy(proxy, 'AndroidBridge', methods);
      this.bridgeRegistered = true;
      hilog.info(0x0001, TAG, 'NativeBridge registered');
    } catch (error) {
      hilog.error(0x0001, TAG, `bridge register error ${error}`);
    }
  }

  private onControllerAttached(controller?: webview.WebviewController): void {
    // 控制器已绑定 Web 组件，此时才可安全注册桥接；使用回调提供的 controller，避免引用不一致
    if (controller) {
      this.controller = controller;
    }
    this.controllerAttached = true;
    this.bridgeRegistered = false;
    hilog.info(0x0001, TAG, `[onControllerAttached] controller attached`);
    // 延迟注册，确保底层完全就绪
    setTimeout(() => this.ensureBridge(), 60);
  }

  build() {
    Column() {
      if (this.isLoading) {
        Progress({ value: 0, type: ProgressType.Ring })
          .width(36)
          .height(36)
          .margin({ bottom: 8 });
      }
      if (this.loadFailed) {
        Column() {
          Text('页面加载失败')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .margin({ bottom: 4 });
          if (this.loadErrorText) {
            Text(this.loadErrorText)
              .fontSize(12)
              .fontColor('#666666')
              .textAlign(TextAlign.Center);
          }
          Button('重试')
            .type(ButtonType.Capsule)
            .margin({ top: 12 })
            .onClick(() => {
              this.isLoading = true;
              this.loadFailed = false;
              this.webSrc = this.buildWebSrc();
            });
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
      }
      Web({ src: this.webSrc, controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onPageBegin((event) => {
          this.isLoading = true;
          this.loadFailed = false;
          // 每次新页面开始时重置桥接状态，等待 onControllerAttached 再注册
          this.bridgeRegistered = false;
          if (event) {
            hilog.info(0x0001, TAG, `[PAGE_BEGIN] route=${this.route.id} url=${event.url}`);
          }
        })
        .onPageEnd((event) => {
          this.isLoading = false;
          if (event) {
            hilog.info(0x0001, TAG, `[PAGE_END] route=${this.route.id} url=${event.url}`);
          }
          // 先确保桥接，再注入会话
          setTimeout(() => this.ensureBridge(), 50);
          setTimeout(() => this.injectSessionToWeb(), 120);
        })
        .onControllerAttached(() => this.onControllerAttached())
        .onErrorReceive((event) => {
          if (event && event.error) {
            hilog.error(0x0001, TAG, `[WEB_ERROR] ${event.error.getErrorCode()} ${event.error.getErrorInfo()}`);
            this.loadFailed = true;
            this.loadErrorText = `${event.error.getErrorCode()}: ${event.error.getErrorInfo()}`;
            this.isLoading = false;
          }
        })
        .onHttpErrorReceive((event) => {
          if (event && event.response) {
            hilog.error(0x0001, TAG, `[HTTP_ERROR] ${event.response.getResponseCode()}`);
            hilog.error(0x0001, TAG, `[HTTP_ERROR_DETAIL] ${event.response.getResponseData()}`);
          }
        })
        .width('100%')
        .height('100%')
        .onConsole((event) => {
          // 处理普通日志
          hilog.info(0x0001, TAG, `[JS Console] ${event.message.getMessage()}`);
          return true;
        })
    }
    .width('100%')
    .height('100%')
  }
}

interface JavaScriptRunnable {
  runJavaScript?: (code: string) => Promise<string>;
}

interface JavaScriptProxyCapable {
  registerJavaScriptProxy?: (
    bridge: object,
    namespace: string,
    methodList: Array<string>,
    asyncMethodList?: Array<string>,
    permission?: string
  ) => void;
}

我已经反复试过很多次，onControllerAttached中覆盖controller也不行，不覆盖也不行，真不知道是什么问题了；

nativeBridge不成功，一直报这个，解决不了了： Init error. The WebviewController must be associated with a Web component

这是日志：

PAGE_END后调用也不行，反复试各种方式都不行。需要帮助