HarmonyOS鸿蒙Next中Web组件RenderMode.SYNC_RENDER使用问题

HarmonyOS鸿蒙Next中Web组件RenderMode.SYNC_RENDER使用问题 在使用Web组件时，官方文档介绍“如果网页内容宽或长度超过8000px，请在Web组件创建的时候指定RenderMode.SYNC_RENDER模式”。问题如下：

  1. 如何计算网页高度？

  2. 在不知道网页高度的情况下，可否直接使用 .layoutMode(WebLayoutMode.FIT_CONTENT) 和 renderMode: RenderMode.SYNC_RENDER ？

3 回复
  1. 可以通过在js里面监听展示URL内容的高度，然后把高度值传输过来；放在ArkTS中的生命周期回调里面，然后在展示的页面加载完毕的回调里面然后设置webview的高度。比如要获取内容为html高度，可以在js里面监听html的高度，然后把高度值传输过来；

代码如下：

page.ets

import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State webResult: string = ''
  build() {
    Column() {
      Text(this.webResult).fontSize(20)
      Web({ src: $rawfile('index.html'), controller: this.controller })
      .javaScriptAccess(true)
      .aspectRatio(1.5)
      .onPageEnd(e => {
        this.controller.runJavaScript(
          'watchWindowSize()',
          (error,result)=>{
            this.webResult=result
            let pageHeight=this.controller.getPageHeight()+'';
            pageHeight=this.webResult;
            console.info("webResult="+this.webResult);
            console.info("pageHeight="+pageHeight);
          }
        );
      })
    }
  }
}
注意一下单位转换 h5获取的高度是px 可以根据你自己喜欢的单位进行设置。这里使用了`getPageHeight()`方法，参考：
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V1/js-apis-webview-0000001630265617-V1#getpageheight

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


在HarmonyOS鸿蒙Next中，Web组件的RenderMode.SYNC_RENDER模式用于同步渲染网页内容。同步渲染意味着网页的渲染过程会阻塞主线程，直到渲染完成。这种模式适用于需要确保网页内容完整显示的场景，但可能会影响应用的响应性能。

使用RenderMode.SYNC_RENDER时，开发者需要在Web组件的renderMode属性中设置为SYNC_RENDER。例如：

webComponent.renderMode = RenderMode.SYNC_RENDER;

这种模式下，Web组件会等待网页内容完全加载并渲染完成后才继续执行后续代码。如果网页内容较大或网络较慢，可能会导致界面卡顿或无响应。

需要注意的是，RenderMode.SYNC_RENDER与异步渲染模式RenderMode.ASYNC_RENDER不同，后者不会阻塞主线程，但可能导致网页内容显示不完全或延迟。

在实际开发中，应根据具体需求选择合适的渲染模式，以确保应用性能和用户体验的平衡。

在HarmonyOS鸿蒙Next中，Web组件的RenderMode.SYNC_RENDER模式用于同步渲染网页内容。使用该模式时，网页会在主线程中同步渲染，确保页面内容与UI线程同步更新。这种模式适用于对页面加载速度要求较高的场景，但需注意，同步渲染可能会阻塞主线程，导致UI卡顿。因此，建议在轻量级网页或对性能影响较小的场景下使用。若网页内容复杂或需要异步处理，可考虑使用RenderMode.ASYNC_RENDER模式。

回到顶部