回复
解析华为鸿蒙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修改
赞
收藏
回复
相关推荐