华为H5快游戏web双向通信介绍 HarmonyOS鸿蒙Next

华为H5快游戏web双向通信介绍 HarmonyOS鸿蒙Next 背景

在华为H5快游戏中可以使用快应用的device接口来获取设备信息吗？在华为H5快游戏中可以使用快应用的广告能力吗？

诸如此类的问题，答案是肯定的。但是需要注意，H5涉及到浏览器，所以跨域问题是绕不开的，由于是使用快应用的能力，因此建议通信过程中网页只接收和发送指令，具体执行代码放到快应用的ux文件来处理。

使用

我们都知道华为H5快游戏是使用华为快应用IDE打包的，我们可以详细看到里面的目录结构。

1：在快应用侧的web组件上注册onmessage事件监听网页消息。 检查hello.ux的web组件上是否存在onmessage=”onMessage”，如果没有需要添加。 处理函数onMessage示例代码如下：

onMessage(e) {
    console.info('onmessage e = ' + e.message + ", url = " + e.url);
    var msg=e.message;
    if(msg==='xxx'){
        // todo
    }
},

在todo里根据接收到网页发出的不同指令来具体执行相应代码。注意相应逻辑代码需要写在快应用侧。

2：在H5网页侧发送消息 网页使用system.postMessage()向快应用发送消息， 示例代码如下：

system.postMessage("xxx");

3：双向通信功能： 刚才只是介绍了网页如何发送给快应用侧，既然是双向通信，那快应用也可以向网页发送消息，这里，不推荐数据传输，可能会涉及跨域问题。 网页注册system.onmessage()监听来自快应用的消息： 示例代码如下（注意代码需要放到head标签下的script中）：

system.onmessage = function(data) {
    console.info("onmessage data="+data);
    //todo 
}

快应用侧使用postMessage向网页发送消息： 示例代码如下：

this.$element('web').postMessage("senddata");

总结

双向通信不是万能的，可以让华为H5快游戏调用快应用大部分能力，如果遇到无法解决的问题，欢迎各位在此帖讨论遇到的问题和解决思路。