【快应用】快应用与网页通信踩坑合集处理

 【关键词】

Web、postMessage、onMessage

【问题背景】

快应用中通过web组件加载的h5网页，快应用在和网页进行通信时，经常会遇到网页发送信息给快应用，快应用成功收到，反过来的时候，h5网页就没法收到了。如提示 xxx is not defined、onmessage is not a function等问题，这里就带来这些问题的解决办法。

【问题分析】

问题一：xxx is not defined

如下所示：

快应用端

sendMessage: function () {

            this.$element('web').postMessage({ data: 'message to Web page' });

        }

H5端

system.onmessage = function(data) {

      console.info("onmessage data="+data);

        //todo

}

该问题出现的原因是h5端收到的消息参数没定义导致的，但通常检查时会发现是有在快应用中定义的，这就让不少人费解了。我们可以来看下文档中的介绍：

看到这里，很多人会认为文档上是xxx：xxx形式的，我在快应用中也是这样的啊，应该是没问题的。其实不然，这里的参数名是固定的，应该是message：xxxx形式，只有这样写在h5端才能收到消息。

问题二：h5端提示onmessage is not a function

如下所示：

H5端

Window.system.onmessage(res=>{

Console.log("onmessage data="+data)

})

该问题的原因是h5端调用onmessage方法的方式错误导致的，同样看下文档上所描述的

这里该事件的描述是一个可以携带参数的方法，而不是一个有回调结果的方法，所以按正常函数方法的形式去写就可以了。

到这里大家就知道上面两个问题如何去修改了，具体可以看下面的解决方案。

【解决方案】

问题一：

快应用端做如下修改即可，h5端不用变更：

sendMessage: function () {

            this.$element('web').postMessage({ message: 'message to Web page' });

        }

或者

sendMessage: function () {

     let senddata={"message":nativeAdMsg};

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

}

问题二：

H5端改成如下形式去接收就可以

system.onmessage = function(data) {

      console.info("onmessage data="+data);

        //todo

}