前端架构

下图是移动 PaaS 平台的前端架构图:

移动 PaaS 平台的前端架构图

我们根据既有需求定义了运行时、设计时和预览时三个运行态,分别实现了代码逻辑及元数据的加载等:

  • 运行时:运行在用户端真实运行环境之上的中介层,包含 PaaS 平台在各种运行环境上所做兼容性处理及引擎、SDK 和运行时元数据的加载,目前支持以下终端
    • App(Vue):实现基于 Vue 的单页应用入口,并实现静态资源、元数据本地存储及热更新,加载各种 AppCloud 所提供插件
    • H5(Vue):实现基于 Vue 的单页应用入口,同时提供如下终端适配
      • 微信:原有功能基础上加入微信jssdk支持
      • 企业微信:原有功能基础上加入企业微信jssdk支持
      • 云助手:原有功能基础上加入云助手sdk支持
    • 小程序(微信):实现基于 Vue 的单页应用入口,并对小程序官方运行环境进行封装改造,Vue 组件经过自动化处理后可以直接运行在小程序端
  • 设计时(设计器):加载仿真器,实现设计时元数据的读写
    • 仿真器:加载引擎、SDK、组件,实现拖拽拼装,实现元数据的渲染及本地修改(经过设计器保存)
  • 预览时(设计器-预览):加载引擎、SDK、组件,实现元数据的设计效果的高效预览

各种运行态之上,包含贯穿应用构建阶段与渲染阶段的编译器(构建阶段)、元数据(渲染阶段),以及提供组件注册、渲染能力的引擎和各终端统一化的SDK,最后是组成应用页面的最小单元——组件

  • 编译器:负责组件源码到可执行代码的转换
  • 元数据:描述组件渲染阶段布局、交互等
  • 引擎:注册应用所依赖组件,根据元数据所描述组件布局、交互等进行渲染
  • SDK:渲染引擎及组件所依赖API在各运行态上的实现
  • 组件:组成应用页面的最小单元,从代码维护者维度看,包含系统组件(PaaS 平台开发维护)、业务组件(业务团队开发维护),由于代码规范一致,不做赘述。以代码规范维度可以分为以下三类
    • 视图组件:视图类组件,包含页面内各个可见单元,可以接收元数据入参等用于最终渲染
    • 钩子组件:纯逻辑类组件,会在引用打开后首先加载,可以做一些全局逻辑处理、资源共享等
    • 页面组件(待实现):路由组件,编码阶段可以定义页面路径等信息的组件,渲染阶段会直接挂载在页面路由上