背景

快应用这个平台吧，作为当年国内手机厂商联合起来对抗微信小程序的核战略武器，阵势上无比之大，毕竟除开卖手机硬件的收益外，承载APP分发渠道的应用市场也是一块巨大肥肉，谁都担心才从豌豆荚、360手机市场手上抢来的肉转头又被微信给叼走了，不过好在张小龙一直没跨出这一步，号称：“不做应用商店”、“不做推荐”、“用完即走”。

所以快应用这个平台慢慢也就变成了俄罗斯的航母，仅限于有、却很难说有多大用。联盟的状态则有点儿类似于五岳剑派：

vivo是嵩山派，无论在论坛上、还是开源组件库方面都最为活跃；
华为是华山派，处于听调不听宣的状态，名义上同属快应用联盟，但是从加载器到API实现方案都跟联盟其他厂家不一致；

所以对于这样的平台，前期在不明确效果的情况下建议是以hybird方式试水，只做一层薄薄的通讯层，等到后面验证效果后再加大投入。

原理

前面说了这么多快应用的背景，其实就是想表达，虽然快应用有一套联盟标准，但因为没有统一的主导力量，所以接口完成度、文档丰富程度都很堪忧，像是早期的快应用与页面通讯就只能通过hack的方式完成，新版下虽然官方已经支持了更为优雅的方式，但在文档上却让人看的一头雾水。

先来看一下h5与快应用通讯的流程图：

从流程图上看，快应用本质上也是采用了主流的注入API式的通讯方式，对于有过hybird开发经验的人来说理解起来并不难。

实现

1、首先需要在h5侧添加快应用页面加载事件的监听。

1	window.addEventListener('load', this.onHapLoad);

2、当监听到加载事件后，需要在注入的system对象中绑定上h5的快应用消息处理函数。

onHapLoad = () => {
  window.system.onmessage = this.handleHapMessage;
}

handleHapMessage = (data) => {
  // 快应用消息处理
}

3、快应用侧向h5发送消息需要用定时器异步出去，否则在某些情况下可能会导致h5无法收到。

setTimeout(() => {
    this.$element('web').postMessage({
        message: message
    });
}, 0);

4、因为消息只能使用字符串形式，为保证2侧的序列化便利性，同时规避特殊字符，可以现将对象转换成json字符串，然后在进行base64编码。

// 快应用侧
let message = Base64.encode(JSON.stringify(params));

//h5侧
data = Base64.decode(data);
data = JSON.parse(data);

5、在华为的快应用平台上，h5向快应用发送的消息间一定要留有间隔，否则代码中连续发送2条消息一定会导致后一条消息丢失。