如何在WebMessagePort中发送复杂对象？

Question

WebMessagePort 消息机制实现问题，怎么处理发送复杂对象？

// 尝试：直接发送复杂对象
messagePort.postMessage({type: "update", data: {id: 1}}); // 报错：不支持Object类型
怎么处理发送复杂对象

Answer 1

解决方案：序列化 + 类型转换
步骤 1：发送端序列化对象
typescript
Copy
// ArkUI侧发送代码
import { webview } from '@kit.ArkWeb';

const complexData = {
type: "update",
data: {

id: 1,
timestamp: Date.now()

}
};

// 序列化为JSON字符串
const jsonString = JSON.stringify(complexData);
messagePort.postMessage(jsonString); // ✅ 合法类型
步骤 2：接收端反序列化
javascript
Copy
// HTML5/JS侧接收
h5Port.onmessage = (event) => {
if (typeof event.data === 'string') { // 验证类型

const parsedData = JSON.parse(event.data);
console.log(parsedData.data.id); // 输出：1

}
}