HarmonyOS Web组件RenderMode.SYNC_RENDER使用问题

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

代码如下：

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-V5/js-apis-webview-V5#getpageheight

2、可直接设置支持全量展开。api12支持web组件全量展开，需要设置renderMode：RenderMode.SYNC_RENDER。

参考文档： https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkweb/ts-basic-components-web.md#%E6%8E%A5%E5%8F%A3

参考如下：

Web({ src: $rawfile('index.html'), controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
  .width(CommonConstants.WIDTH_OR_HEIGHT)
  .layoutMode(WebLayoutMode.FIT_CONTENT) 

目前只支持两种web布局模式，分别为Web布局跟随系统WebLayoutMode.NONE和Web基于页面大小的自适应网页布局WebLayoutMode.FIT_CONTENT。默认为WebLayoutMode.NONE模式。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#layoutmode11