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

SameX
发布于 2024-10-17 13:46
浏览
0收藏

本文旨在深入探讨华为鸿蒙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 组件作为图形节点,独立送显。建议在仅由 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 组件的行为,并提升您的应用程序的性能和用户体验。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
已于2024-10-17 13:47:08修改
收藏
回复
举报
回复
    相关推荐