前言
虽然有些应用在使用React Native或Weex开发,但综合来看,业内还是以混合开发模式为主,从我们自家的App来看,H5业务所占比重越来越高,目前大概占到35%左右,因此一套好的Hybrid开发框架必不可少。
混合开发的一般原则为交互较少、上线周期短、展示性质的页面使用H5开发,如节日活动页、商品秒杀页面等。Hybrid框架要考虑的事情非常多,如页面加载速度、预加载及缓存机制、与原生交互通信、不同机型兼容等问题。
本文的关注点仅在于Hybrid框架交互通信的设计与实现,框架的其他方面日后分享,感兴趣的也可以留言探讨。
交互通信类型
从大的范围来看,可以分为三类:
- H5向Native通信,以下为常见场景:
- H5打开一个原生界面,H5只作为一个入口,后续逻辑均在原生界面处理
- H5唤起一个原生界面执行一些逻辑,需要将结果返回给H5
- Native向H5通信
- 通常表现原生界面将某些结果传给H5页面或触发某些H5的行为
- H5页面之间通信
- 如果H5项目有多个独立页面,页面之间可能需要通信
设计与实现
设计原则
- 为了安全,尽量避免JavaScript注入
- 原生埋点,H5开发不依赖于原生版本
交互通信实现
H5向Native通信
如果不用JavaScript注入的方式&#