基于Weex的跨平台图表库的设计与实现

• 作 者: 孟腾飞
• 出 处: 南京大学
• 发表日期: 2019年07期
• 关键词: Weex 跨平台 绘制 手势 动画 图表库

阿里巴巴集团内存储的各种各样的业务数据已经达到EB级别,这些数据在各种数据分析工具的处理下,每天需要导出数十万张图表。阿里巴巴内部有大量使用中的图表库,包括Android端原生图表库、iOS端原生图表库和Web端图表库,这些图表库使用不同的架构和技术,最终数据的展示方式和图表的交互方式也各不相同。这种多个平台独立开发图表库的开发方式带来了多端平台图表应用的重复适配问题,为了满足需求的快速变更往往需要频繁发布新版本。为了解决现有图表库架构和标准不统一的问题,以及由此带来的重复适配和频繁发版问题,本文设计并实现了基于Weex的跨平台图表库,既实现了Android、iOS和H5上的高性能原生图表,又实现了对跨平台开发的支持。基于Weex的跨平台图表库使用Weex组件扩展的方式支持跨平台开发。通过扩展Weex Component,Web组件可以映射成Android、iOS和H5上的高性能原生组件。在绘制层面,图表库使用Android平台android.graphics、iOS平台Core Graphics和H5平台的Canvas API绘制图形。在交互上,图表库使用Android Ges-ture、iOS UIGesture和H5touch事件机制判断手势类型,通过Android Animation、iOS Core Animation和H5Canvas+JavaScript提供交互动画。基于Weex的跨平台图表库最终提供了一个Android、iOS和H5端界面风格和交互设计统一的图表库,该图表库使用平台原生组件渲染,具备高性能的优势。该图表库还通过Weex组件扩展的方式支持跨平台开发,有效解决了多平台重复开发和频繁发版本的问题。本文使用软件工程的分析方法,分析了跨平台图表库应当满足数据管理、绘制管理、手势管理和动画管理等功能需求,以及高性能、可扩展性、可移植性等非功能需求。然后本文基于需求分析,将基于Weex的跨平台图表库系统分为了Weex图表库API模块、原生图表库API模块、数据管理模块、绘制管理模块、动画管理模块、绘制管理模块、图标配置项模块和通用工具模块等,并给出了每个模块的得包图和类图。最后本文给出了详细设计中各个模块中类和方法的示例代码。