解析华为鸿蒙next：Web组件自适应布局与渲染模式详解

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统（截止目前API12）的技术细节，基于实际开发实践进行总结。
主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。
本文为原创内容，任何形式的转载必须注明出处及原作者。

Web 组件大小自适应页面内容布局
使用 Web 组件大小自适应页面内容布局模式 layoutMode(WebLayoutMode.FIT_CONTENT) 可以使 Web 组件的大小根据页面内容自适应变化。适用于 Web 组件需要根据网页高度撑开，与其他原生组件一起滚动的场景，如浏览长文章、长页面首页等。

@Entry
@Component
struct WebHeightPage {
  // ...
  build() {
    Column() {
      // ...
      Web({
        // ...
        .layoutMode(WebLayoutMode.FIT_CONTENT) // 设置为 Web 组件大小自适应页面内容
        .overScrollMode(OverScrollMode.NEVER) // 设置过滚动模式为关闭状态
      })
    }
  }
}

Web 组件渲染模式
Web 组件支持两种渲染模式：

• 异步渲染模式（默认）： renderMode: RenderMode.ASYNC_RENDER

• 同步渲染模式： renderMode: RenderMode.SYNC_RENDER
  异步渲染模式下，Web 组件作为图形 surface 节点，独立送显。建议在仅由 Web 组件构成的应用页面中使用此模式，有更好的性能和更低的功耗表现。
  同步渲染模式下，Web 组件作为图形 canvas 节点，Web 渲染跟随系统组件一起送显。可以渲染更长 Web 组件内容，但会消耗更多的性能资源。

  @Entry
  @Component
  struct WebHeightPage {
    // ...
    build() {
  Column() {
    // ...
    Web({
      // ...
      .renderMode(RenderMode.ASYNC_RENDER) // 设置为异步渲染模式
    })
  }
    }
  }

  在应用中使用前端页面 JavaScript
  前端页面和应用侧之间可以用 createWebMessagePorts() 接口创建消息端口来实现两端的通信。

  @Entry
  @Component
  struct WebComponent {
    // ...
    build() {
  Column() {
    // ...
    Button('postMessage')
      .onClick(() => {
        try {
          // 1、创建两个消息端口。
          this.ports = this.controller.createWebMessagePorts();
          // 2、在应用侧的消息端口(如端口 1)上注册回调事件。
          this.ports[1].onMessageEvent((result: webview.WebMessage) => {
            // ...
          });
          // 3、将另一个消息端口(如端口 0)发送到 HTML 侧，由 HTML 侧保存并使用。
          this.controller.postMessage('__init_port__', [this.ports[0]], '*');
        } catch (error) {
          // ...
        }
      })
    // ...
  }
    }
  }

  应用侧与前端页面的相互调用 (C/C++)
  前端页面和应用侧之间可以使用本文 Native 方法实现两端通信，可解决 ArkTS 环境的冗余切换，同时允许发送消息、回调在非 UI 线程上报，避免造成 UI 阻塞。当前只支持 string 和 buffer 数据类型。

  // ArkTS 侧代码
  // ...
  aboutToAppear() {
    console.info("aboutToAppear")
    // 初始化 web ndk
    testNapi.nativeWebInit(this.webTag);
  }
  // ...
  build() {
    // ...
    Web({ src: $rawfile('index.html'), controller: this.controller })
  .onConsole((event) => {
    if (event) {
      let msg = event.message.getMessage()
      if (msg.startsWith("H5")) {
        this.h5Log = event.message.getMessage() + "\n" + this.h5Log
      }
    }
    return false;
  })
  }
  // ...

  // NAPI 侧代码
  // ...
  static void WebMessagePortCallback(const char *webTag, const ArkWeb_WebMessagePortPtr port, const ArkWeb_WebMessagePtr message, void *userData) {
    // ...
  }
  // ...

  总结
  通过本文，您已经了解了华为鸿蒙 ArkWeb 的高级功能与应用，包括 Web 组件大小自适应页面内容布局、Web 组件渲染模式、在应用中使用前端页面 JavaScript 以及应用侧与前端页面的相互调用 (C/C++)等功能。这些功能可以帮助您更好地控制 Web 组件的行为，并提升您的应用程序的性能和用户体验。