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