HarmonyOS鸿蒙Next中华为快应用加载器不支持system.onmessage事件
HarmonyOS鸿蒙Next中华为快应用加载器不支持system.onmessage事件
快应用中嵌入<web>组件，设置src属性和pagestart，pagestart事件里执行postMessage发送消息给webview，在webview页面里执行system.onmessage接收消息，该方式在调试器里是可以正常运行的，但是在快应用加载器里就不起作用了。在webview里打印system为空，system.onmessage也是undefined，不知道为什么在快应用加载器里就不行。
Web组件发消息给H5页面时报错
现象描述
Web组件发消息给H5页面时，出现如下js错误：02-14 09:22:56.329 E/jsLog (18834)：[H5]Uncaught TypeError: system.onmessage is not a function。
问题分析
当H5页面中定义的 system.onmessage 函数代码逻辑较多，有可能还依赖一些外部js（比如jquery）的引用。此时如果web组件在 onpagefinish 事件处理函数中触发了 this.$element('webElementId').postMessage({message:'xxx'})，则可能会由于H5页面的js没有完全加载，从而导致出现 system.onmessage is not a function 的错误。
解决方法
H5页面中 system.onmessage 函数定义要轻量，只接收快应用页面传递过来的数据即可，剩下的逻辑交给h5页面自己的生命周期函数处理，比如 onload 事件。
需要注意 onload 事件触发时，快应用的数据还没接收到，H5页面中要轮询监听数据，故请参考如下实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>接受快应用消息最佳实践</title>
<script>
var recieveData;
//轻量的system.onmessage定义，仅接受数据，保证第一时间加载完成
system.onmessage = function (data) {
recieveData =data;
}
</script>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(() =>{
var stopIntervalId =setInterval(function () {
if(recievedData){
execBusinessLogic()
clearInterval(stopIntervalId)
}
}, 20) // 每20ms轮询一次，直到接收到快应用发送的消息数据，然后停止轮询
})
function execBusinessLogic() {
//执行业务逻辑的代码
}
</script>
<script src="js/html2canvas.js"></script>
</head>
</html>建议与总结
理解快应用与H5消息发送机制，通过轮询的方式解决异步问题。
更多关于HarmonyOS鸿蒙Next中华为快应用加载器不支持system.onmessage事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
非常感谢你的回复，H5页面是用vue3开发的，我的理解是通过轮询解决异步的前提是system已经注入到H5了，且system.onmessage不为undefined。我尝试在public/index.html中head打印system.onmessage也为undefined，目前这个问题只有在华为加载器上才有，华为手机上用快应用调试器没有这个问题。加载器的版本是12.2.1.300_dev，平台版本1090，
在HarmonyOS鸿蒙Next中，华为快应用加载器确实不支持system.onmessage事件。这可能是因为鸿蒙系统对快应用的运行机制进行了优化或调整。建议开发者查阅最新的官方文档，了解新的API或替代方案。同时，关注华为开发者社区和官方更新，及时获取技术支持和解决方案。如果项目依赖此功能，可能需要考虑兼容性处理或使用其他事件机制来实现类似功能。
