HarmonyOS 鸿蒙Next中Web组件加载空白问题

HarmonyOS 鸿蒙Next中Web组件加载空白问题

数据从后端返回，处理以后转成html。通过Web组件加载，显示空白几秒（大概6秒左右），然后显示内容

cke_1698.png

cke_2143.png

代码：

struct WebComponent {
   controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear(): void {   
    this.loadHtmlContent()
  }

  loadHtmlContent() {
     const html = `
       <!DOCTYPE html>
        <html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
          <style>
            a[ahref]{ color: #007AFF; }
            tr,td { border: 1px solid #000; }
            table { border: 1px solid #000; width: 100%;}
          </style>
        </head>
        <body>
          <h1>本地渲染示例</h1>
          <p>点击链接：<a href="https://harmonyos.com"  id="targetLink">访问官网</a></p>
          <table><tr><td>1</td><td>1</td></tr><tr><td>1</td><td>2</td></tr></table>
        </body>
      `;

    try {
      this.controller.loadData(
        encodeURIComponent(html),
        "text/html",
        "UTF-8"
      );
    } catch (error) {
      const e = error as BusinessError;
      console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
    }
  }

  build() {
    Column() {
      Web({
        src: '',
        controller: this.controller,
        renderMode: RenderMode.SYNC_RENDER
      })
        .height('auto')
        .layoutMode(WebLayoutMode.FIT_CONTENT) 
       //.onAppear(() => this.loadHtmlContent()) // 页面显示时加载      
   }
  }
}

更多关于HarmonyOS 鸿蒙Next中Web组件加载空白问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

鸿蒙Next中Web组件加载空白可能是以下原因导致：

  1. 网络权限未配置 - 检查config.json是否添加了ohos.permission.INTERNET权限
  2. URL地址错误 - 确保加载的网页地址有效且可访问
  3. 同源策略限制 - 跨域请求需服务器配置CORS
  4. 渲染模式问题 - 尝试设置webConfig的javaScriptAccess属性为true
  5. 组件尺寸异常 - 检查Web组件宽高是否设置为0

排查方法：

  • 启用onError回调捕获加载错误
  • 使用webDebugAccess开启调试模式查看控制台输出，

更多关于HarmonyOS 鸿蒙Next中Web组件加载空白问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Web组件加载空白的问题通常与渲染模式和加载时机有关。针对您的情况，建议以下优化方案：

  1. 使用异步渲染模式： 将RenderMode.SYNC_RENDER改为RenderMode.ASYNC_RENDER，这可以避免UI线程阻塞导致的空白期。

  2. 优化加载时机： 建议将loadHtmlContent()调用移到onPageShow()生命周期中，而不是aboutToAppear()，确保Web组件完全初始化后再加载内容。

  3. 添加加载状态提示： 在加载过程中显示加载指示器，提升用户体验：

@State isLoading: boolean = true;

loadHtmlContent() {
  this.isLoading = true;
  // ...原有加载逻辑...
  this.controller.onPageEnd(() => {
    this.isLoading = false;
  });
}

build() {
  Column() {
    if (this.isLoading) {
      LoadingProgress()
    }
    Web({...})
  }
}

  1. 检查HTML内容编码： 确保HTML内容正确编码，避免特殊字符导致的解析问题。

  2. 性能优化： 对于复杂HTML内容，考虑分块加载或使用模板引擎预编译。

回到顶部