Hybrid框架之交互通信篇

前言

虽然有些应用在使用React Native或Weex开发，但综合来看，业内还是以混合开发模式为主，从我们自家的App来看，H5业务所占比重越来越高，目前大概占到35%左右，因此一套好的Hybrid开发框架必不可少。

混合开发的一般原则为交互较少、上线周期短、展示性质的页面使用H5开发，如节日活动页、商品秒杀页面等。Hybrid框架要考虑的事情非常多，如页面加载速度、预加载及缓存机制、与原生交互通信、不同机型兼容等问题。

本文的关注点仅在于Hybrid框架交互通信的设计与实现，框架的其他方面日后分享，感兴趣的也可以留言探讨。

交互通信类型

从大的范围来看，可以分为三类：

• H5向Native通信，以下为常见场景：
  
  1. H5打开一个原生界面，H5只作为一个入口，后续逻辑均在原生界面处理
  2. H5唤起一个原生界面执行一些逻辑，需要将结果返回给H5
• Native向H5通信
  
  1. 通常表现原生界面将某些结果传给H5页面或触发某些H5的行为
• H5页面之间通信
  
  1. 如果H5项目有多个独立页面，页面之间可能需要通信

设计与实现

设计原则

1. 为了安全，尽量避免JavaScript注入
2. 原生埋点，H5开发不依赖于原生版本

交互通信实现

H5向Native通信

如果不用JavaScript注入的方式，最常见的做法是利用自定义的交互协议，通过public boolean shouldOverrideUrlLoading(WebView view, String url)拦截并进行原生处理。因此