解析华为鸿蒙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 组件的行为，并提升您的应用程序的性能和用户体验。