# 介绍

# Epage

Epage是一款可视化页面配置工具。结合前端框架相关组件库，可以实现复杂的界面交互。我们会根据业内主流的组件库做二次封装，使成为Epage可配置的widget，目前已针对iview (opens new window)及vant (opens new window)组件库做封装，ant design (opens new window)等组件库已在开发中。开发者也可定制开发widget。常用于流程表单、报表、中后台页面配置，

WARNING

注意： Epage本身不提供视图渲染能力。渲染可以根据我们提供的基础widget，也可以自行封装

# 界面

基于iview的PC界面

基于iview的PC界面

基于vant的H5界面

基于vant的H5界面

# 兼容性

因底层数据状态依赖vue@2.x及vuex@3.x，所以需要使用IE9及以上浏览器

# 更新日志

每个版本特性及日志请查看 CHANGELOG (opens new window)

# 快速起步

WARNING

因设计器仅提供框架能力，渲染由widget完成，这里以封装的iview@2 (opens new window)组件库为例

# 安装依赖

npm i epage epage-iview -S

# 启动

# 创建设计器

实例设计器

import { render } from 'epage-core'
import Epage from 'epage'
import PCWidgets, { entry as PCEntry } from 'epage-iview'
import H5Widgets, { entry as H5Entry } from 'epage-vant'
import schema from './schema.json'

//!! 为了使移动端与pc端配置widget时，使用相同Setting表单
//!! 这里移动端Setting借用pc的Setting能力，未来会会改进用法
const h5Widgets = vantWidgets.map((group, index) => {
  group.widgets.map((widget, key) => {
    widget.Setting = pcWidgets[index].widgets[key].Setting
    return widget
  })
  return group
})

const el = document.getElementById('root')
new Epage({
  el,
  schema,
  // 非必填，默认渲染视图
  view: 'pc',
  // pc 与 h5属性必填一个
  pc: {
    component: PCEntry,
    widgets: PCWidgets,
    Render: render.VueRender
  },
  h5: {
    component: entry,
    widgets: H5Widgets,
    Render: render.VueRender
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

引入样式

@import '~iview/src/styles/index.less';
@import '~vant/lib/index.less';
@import '~epage/src/style/main.less';
@import '~epage-iview/src/style/main.less';
@import '~epage-vant/src/style/main.less';

1
2
3
4
5

# 创建渲染器

实例渲染器

import { render } from 'epage-core'
import widgets, { entry } from 'epage-iview'

const schema = {} // mock schema
const el = document.getElementById('root')

new render.VueRender({ el, schema, widgets, component: entry })

1
2
3
4
5
6
7

引入样式

@import '~iview/src/styles/index.less';
@import '~epage-iview/src/style/main.less';

1
2

# 脚手架epage-cli

对于开发一套公共或业务widgets可以使用脚手架开发

全局安装脚手架（可能需要sudo权限）

npm i -g epage-cli

初始化一个项目

# pc端iview模板项目(默认)
epage init myWidgets
# 或
epage init myWidgets --tpl iview
# 移动端vant模板项目
epage init myWidgets --tpl vant

# 自定义模板项目
epage init myWidgets --tpl git@github.com:epage-team/epage-template-iview.git

1
2
3
4
5
6
7
8
9

本地启动 localhost:8084 (opens new window)

cd myWidgets
# 安装依赖
npm install
# 本地启动
npm start

1
2
3
4
5

widget是完成页面特定功能的独立组件。可以是一个输入框(input)，也可以是一个图表等。一个完整的widget通常有三部分组成：Schema、View、Setting （如果仅渲染可以不用这个部分，如移动端只做渲染不做可视化配置，支持数组，多个配置表单）。如何开发一个widget，请参考开发文档

# 工作原理

# 整体架构

说明：

Rule模块用于校验表单，支持扩展
Store模块作为设计器与渲染器通信的唯一桥梁，维护内部状态
Worker模块用于执行用户自定义脚本，避免恶意脚本影响主线程执行
Event模块用于监听、管理widget对外暴露的事件
schema模块用于实例化schema(json)
widget模块即部件，维护基础组件的通用配置及schema定义
helper模块提供常见数据修改及获取的工具方法

# 数据流

说明：

Widget：包含 Schema、View、Setting三个部分
Store：设计模式下，设计器与渲染视图共享store，预览模式下，渲染store与设计器store不共享
设计模式：通过修改Setting表单影响存储到Store的Schema实例（schema）变化，Schema实例的变化直接影响视图View实例的变化
渲染模式：根据Schema实例渲染视图(View)，针对表单widget，用户编辑View实例的数据将作为model(form data)实时存储在Store内

# 生命周期

关于使用，请访问生命周期

说明：

设计器render时工作面板与设计视图面板使用渲染器独立渲染
设计器和渲染器created表示已经根据真实dom创建实例
生命周期一般配合plugin一起使用

# 特性

可视化：通过可视化方式拖拽、配置，实现可嵌套的栅格布局界面。
可扩展、易定制：可定制widget、扩展规则等功能。
跨框架、跨组件库渲染：设计器与渲染器分离设计，使得跨框架组件库的渲染成为可能。不仅支持我们正在针对iview的二次封装，react框架生态主流的组件库，也在筹划中
表单级联：可视化配置表单字段级联关系，事件及值联动等。
事件外放：widget可自定义事件，可针对指定widget监听、移除事件，满足复杂的业务场景。比如按钮点击事件
数据驱动：借助Vue响应式数据能力，统一管理设计器与渲染器的内部状态，维护更容易。

配置 →