介绍

H5-Raptor（简称 Raptor）是一款满足多团队、多业务需求的组件化中台，以业务组件为基础，通过页面可视化搭建满足团队特色业务的页面快速上线诉求。

与模板配置方案不同，传统的模板配置只解决特定页面场景的快速配置，而组件化中台围绕所有业务，通过归类多个业务场景，从中提炼组件加以开发， 多个业务场景必定存在可复用的公共组件，并且以组件为单元的灵活组合亦能产生更丰富的页面场景。

TIP

Raptor 并不提供组件，完全由业务自行归类、提炼、设计和开发。

Raptor 四要素

1. 组件：唯一的实体要素，中台运行的基础。
2. 业务组：其他3要素只有挂载在业务组下才能按预期角色运行。
3. 组员：某个业务组下的用户即是本组组员。
4. H5：亦虚（预览时）亦实（发布后）要素，中台目标产出。

功能特性

1. 多框架：现支持 Vue、React，渲染核心 + 框架渲染使得兼容其他框架变得更轻松。
2. 高复用：
   • 组件为独立单元：各业务组可复用，组件不存在物理隔离（跨组件库、代码库等）。
   • 组件嵌套：组件可以嵌套其他任意组件，大粒度耦合业务的定制组件将更少。
   • 组件通信：组件可以在关键时机发出通知也可以对外提供方法，编辑者将其串联以形成通信。
   • 插件：纯 JS 逻辑可沉淀为插件从而不耦合框架，可以跨框架与组件通信。
   • 复合组件：多个组件的组合粒度较小时不足以表达完整 H5 页面，可存为复合组件以供其他页面使用。
3. 组件版本管理：组件的每一个版本都是独立的个体，页面不受组件升级影响。
4. 多语言：组件化搭建的页面也可以高效率的支撑国际化多语言业务。
5. 主题色：支持业务特色的主题色一键换肤，同时动态图片主题色为多变的品牌场景提供灵活的适配能力。
6. 自定义代码：极简的扩展API，支持自定义的代码逻辑并打通到组件内部与之通信。

设计初衷

1. 此前开发过组件化中台，而后续想法越发完善，遂将之沉淀。
2. 多年来C端开发经验的总结——组件化解决方案。

如果你想在深入了解 Raptor 之前对它有一个大体认识，下面这个视频将带你了解其基本概念以及搭建一个示例页面。

架构图

TIP

官方指南假设你已了解关于组件化、低码和可视化相关知识。如果你此前从未有过接触，可以先行了解后再回顾本指南。